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

HTMLでテーブルを右寄せする方法を解説します。HTMLでテーブルの位置を右寄せ、またはテーブル内の文字を右寄せする方法についてHTMLのみで行う方法とCSSを用いて行う方法それぞれ解説します。また簡単に中央寄せする方法についても紹介します。

コンテンツ [表示]

  1. 1HTMLでテーブルを右寄せしたい
  2. 2HTMLでテーブルを右寄せする方法
  3. 2.1table自体を右寄せする方法
  4. 2.2テーブル内の文字を右詰めする方法
  5. 2.3補足(左寄せに中央寄せについて)
  6. 3まとめ

HTMLでテーブルを右寄せしたい

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

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

Photo byDarkmoonArt_de

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

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

table自体を右寄せする方法

HTMLのみで行う場合

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

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

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

CSSを用いた場合

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

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

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

テーブル内の文字を右詰めする方法

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

HTMLのみ用いた場合

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

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

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

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

CSSを用いた場合

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

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

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

補足(左寄せに中央寄せについて)

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

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

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

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

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

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

まとめ

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

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

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

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次