CSS: table（テーブル）を中央寄せにする
CSS で table（テーブル）を中央寄せにしたい場合は、 margin-left プロパティ、margin-right プロパティを使用します。
テーブルの左右の margin（マージン）を「auto」に指定することで、 自動的にページの中央の位置に表示されます。
テーブルを中央寄せにすることで、 ページデザインの統一感や視認性の向上が期待できます。
CSSでのテーブル中央寄せ 具体例
/* 左右のmarginを個別に指定 */
table {
margin-left: auto;
margin-right: auto;
}
/* まとめて指定する場合 */
table {
margin: 3px auto; /* 上下3px 左右auto */
}
上の使用例のように、個別に指定する場合は margin-left、margin-right プロパティを使い、 まとめて指定する場合は margin プロパティを使用します。
table の位置を中央にするサンプル
marginを指定しない場合
まずは margin を何も指定しない通常の配置です。margin-left や margin-rightを指定しない場合は、 下のようにページの左側に配置されます。
| ヘッダ | ヘッダ |
|---|---|
| データ | データ |
| データ | データ |
marginを指定した場合
次は「margin-left: auto;」 、「margin-right: auto;」を指定してみます。 下のようにページの中央に配置されます。| ヘッダ | ヘッダ |
|---|---|
| データ | データ |
| データ | データ |
table {
margin-left: auto;
margin-right: auto;
}