マンガでわかるホームページ作成

CSSで表(table)を中央寄せする方法【中央寄せできないワケ】

「表(table)を作ったけど左寄せになってしまう。中央寄せにするにはどうするの?」

「text-align:center指定すれば中央寄せになるんじゃないの?中央寄せできないよ!」

というあなたへ、CSSで表(table)を中央寄せする方法と中央寄せできないワケを解説します。

【結論】margin:autoを指定

CSSで表(table)を中央寄せするには「margin:auto」を指定しましょう。

下記はmargin:autoを指定していない状態の表(table)です。

左上右上
左下右下

margin:autoを指定すると下記のように中央寄せになります。

左上右上
左下右下
<style>
    #example{
        margin: auto;
    }
</style>
<table id="example" border="1">
    <tr><td>左上</td><td>右上</td></tr>
    <tr><td>左下</td><td>右下</td></tr>
</table>

margin:autoについて

marginは要素の外側の余白を指定するCSSです。この値をautoにした場合、残りの余白に応じて自動で値が決まります。

左右ともautoにすると均等の余白となり結果的に中央寄せになります。

ちなみに上下はautoが効きません。

marginは上右下左の順で一度に指定できます。

値を1つだけ指定した場合上右下左とも同じ値を指定したことになります。

margin:autoと指定すると上右下左いずれもautoということです。

上下のautoは効かないつまり0であり、左右のみautoがかかった状態です。

width(幅)について

ブロック要素を中央寄せする場合widthの指定も必要になります。

なぜなら左右に余白がないと中央寄せにならないからです。

tableの場合、内容量に応じてtableの横幅が決まります。よってwidthを指定しなくても中央寄せが可能です。

ただし、tableの幅が100%の場合は中央寄せになりません。

どうしても中央寄せしたいなら幅を100%未満で指定しましょう。

text-align:centerでは中央寄せできないワケ

text-align:centerは文字つまりインライン要素を中央寄せするCSSです。また、自分自身を中央寄せするのではなく子要素を中央寄せします。

margin:autoはブロック要素(や表)自身を中央寄せすることができます。

  • 「text-align:center」→子要素かつインライン要素の中央寄せ
  • 「margin:auto」→自分自身かつブロック要素の中央寄せ

インライン要素・ブロック要素について詳細はこちら↓

セル(td)の中央寄せについて

セル(td)内の文字の中央寄せは「text-align: center」です。

tableではなく、tdやthに対して指定しましょう。

左上テキストテキスト右上テキストテキスト
中央寄せ右下
<table id="example" border="1">
    <tr><td>左上テキストテキスト</td><td>右上テキストテキスト</td></tr>
    <tr><td style="text-align: center;">中央寄せ</td><td>右下</td></tr>
</table>

まとめ

CSSで表(table)を中央寄せするには「margin:auto」を指定しましょう。

tableの幅が100%未満の場合はwidthの指定は不要です。

セル(td)内を文字を中央寄せする場合は「text-align: center」を指定しましょう。

以上、CSSで表(table)を中央寄せする方法でした。

関連記事