HTMLでテーブルを右寄せする方法を解説！

HTMLでテーブルの位置を右寄せ、またはテーブル内の文字を右詰めしたいと思ったが、うまくできないときの対処法についてここでは解説します。

またHTMLのみではなくてCSSを用いた方法についても解説します。

それではテーブルの位置を右寄せする方法とテーブル内の文字を右詰めする方法についての解説をしていきます。

HTMLのみで行う場合はテーブル全体を囲んでいるtableタグにalign="right"を付け加えます。
これだけでテーブルの位置を右寄せすることが出来ます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにテーブルの位置が右寄せされていることが分かります。

CSSを用いた場合は、table全体をdivタグで囲み、そのdivタグに対して、 display: flex;とjustify-content: flex-end;を設定することでテーブルの位置を右寄せするすることが出来ます。

ではサンプルコードを用いて、実際の挙動を見てみましょう。

このようにテーブルの位置が右寄せされています。

次にテーブル内の文字を右詰めする方法について、HTMLのみを用いた場合と、CSSを用いた場合それぞれ解説します。

HTMLのみを用いた場合は、thタグ、tdタグそれぞれにalign="right"を設定します。

そうすることでテーブル内の文字を右詰めすることが出来ます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにテーブル内の文字を右詰めすることができました。

CSSを用いた場合としては、thタグ、tdタグ要素それぞれにtext-align: right;を付与するだけです。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにtable内の文字が右詰めされていることが分かります。

補足情報として左寄せ、中央寄せについても簡単に解説します。

デフォルトで左寄せはされるので、何も手を加えることはないです。

中央寄せについては右寄せでrightとしていたところをcenterに変えるのみで実行できます。

またflexboxを用いたところではjustify-content: flex-end;をjustify-content: center;に変えると、テーブルの位置を真ん中に配置できます。

簡単ではありますがCSSを用いた中央寄せする方法についてプレビューを載せておきます。

このように中央寄せされていることが分かります。

いかがでしたでしょうか？

テーブルの位置を変えたり、テーブル内の文字の位置を変えたりすることで、ユーザビリティを向上させることができます。

ぜひ試してみてください。