CSS: table(テーブル)の位置を中央にする
CSS で table(テーブル)をページの中央に配置したい場合は、 margin-left プロパティ、margin-right プロパティを使用します。
左右の margin(マージン)を「auto」に指定することで、 自動的にページの中央の位置に表示されます。
使用例
/* 左右のmarginを個別に指定 */
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;
}