html･CSSで表テーブル(table)を中央寄せ(center)にする方法

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

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

というあなたへ、html･CSSで表テーブル（table）を中央寄せ(center)にする方法と中央寄せできないワケを解説します。

関連記事も参考にしてください。

【htmlだけ】align="center"

htmlだけで表（table）を中央寄せするには「align="center"」を指定しましょう。

左上	右上
左下	右下

<table align="center" border="1">
    <tr><td>左上</td><td>右上</td></tr>
    <tr><td>左下</td><td>右下</td></tr>
</table>

ただしalign属性は廃止されたため、後述する「margin:autoを指定する」方法がオススメです。

align="center"で中央寄せできないワケ

上記のように「align="center"」を指定したのに中央寄せできないときはズバリCSSのmarginの指定が原因です。

html属性よりCSSが優先されて効きます。

tableにmargin-leftやmargin-rightが指定されていないか確認しましょう。

指定されているようなら下記のCSSで中央寄せする方法を使いましょう。

【CSS】margin:autoを指定

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

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はブロック要素（や表）自身を中央寄せすることができます。

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

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>

まとめ

htmlだけで表（table）を中央寄せするには「align="center"」を指定しましょう。ただしCSSの方法がオススメです。

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

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

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

以上、html･CSSで表（table）を中央寄せする方法でした。