【CSS】table(テーブル)の位置を中央にする

スポンサーリンク

CSS で table(テーブル)をページの中央に配置したい場合は、 margin-left プロパティ、margin-right プロパティを使用します。

左右の margin(マージン)を「auto」に指定することで、 自動的にページの中央の位置に表示されます。

使用例


/* 個別に指定 */
table {
    margin-left: auto;
    margin-right: auto;
}

/* まとめて指定する場合 */
table {
    margin: 3px auto;    /* 上下3px 左右auto */
}

上の使用例のように、個別に指定する場合は margin-left、margin-right プロパティを使い、 まとめて指定する場合は margin プロパティを使用します。

table の位置を中央にするサンプル

まずは margin を何も指定しない通常の配置です。margin-left や margin-rightを指定しない場合は、 下のようにページの左側に配置されます。

ヘッダヘッダ
データデータ
データデータ

次は「margin-left: auto;」 、「margin-right: auto;」を指定してみます。 下のようにページの中央に配置されます。
ヘッダヘッダ
データデータ
データデータ

table {
    margin-left: auto;
    margin-right: auto;
}

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト