webfeelfree

2つ、3つ以上のテーブルを並べて中央に寄せるHTML&CSSコンビネーション

テーブル
いつも、tableタグで組もうか?dlタグで組もうか?迷ってしまいます。
本当にコレでいいのかと・・・

しかし、最近になって、やっと?表なんだ、tableタグでいんじゃね?レイアウトじゃないしと思えるようになってきました。
そして、CSSが外れているときも見やすく表示させたい、更新する人もtableタグのほうが見やすいときもあるだろうと思って、今回、整理してみました。

調べたのを忘れないようにメモ的意味でもあります。
テーブル1つ、2つ、3つと3段階で、ご紹介。

基本のHTML

<table>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
</table>
<table>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
</table>

1つのテーブルを中央寄せ

ポイントのCSS

table{
   margin-left: auto;/*ポイント01*/
   margin-right: auto;/*ポイント01*/
}

埋め込んであるJSFiddleのサービスが突然、終了すると悪いので重要なCSSだけ、別に載せます(保険

ということで、こちらは、基礎の基礎。
左右の余白をautoで取ることによって、中央に寄ります【ポイント01】。

装飾系のCSSは、割愛します。

2つのテーブル並べて中央寄せ

ポイントのCSS

div{
    width: 220px;/*ポイント03*/
    margin-left: auto;/*ポイント01*/
    margin-right: auto;/*ポイント01*/
}
table{
    width: 100px;/*ポイント03*/
    float: left;/*ポイント02*/
    margin-left: 5px;/*ポイント03*/
    margin-right: 5px; /*ポイント03*/
}

HTMLではtableタグdivタグで囲んでいます。

左右の余白については、1つのテーブルと同じです。
ただし、今回はdivタグに書きます。
イメージでは、divタグ自体を中央寄せするという感じ。

そしてfloat: left;を使ってテーブル自体を左詰にします【ポイント02】。

最後に、ここが重要!
divタグの幅をきっちりと指定してあげます【ポイント03】。
具体的には・・・
『テーブルの幅 + テーブル自体の左右の余白(marginやpadding) = divタグの幅』
となります。
ここでいうと「テーブル幅(100px×2) + 余白(margin左5px右5px×2) = 220px」ということです。

軽く算数が入ってきてます。

3つのテーブル並べて中央寄せ

ポイントのCSS

section{
    width: 400px;/*ポイント04*/
}
div{
    width: 330px;/*ポイント03*/
    margin-left: auto;/*ポイント01*/
    margin-right: auto;/*ポイント01*/
}
table{
    width: 100px;/*ポイント03*/
    float: left;/*ポイント02*/
    margin-left: 5px;/*ポイント03*/
    margin-right: 5px; /*ポイント03*/
}

最後になります。
普通に3つ並べても面白くないので、少し応用を利かせてみようかと思います。

さらにdivタグsectionタグで囲んでいます。
囲みタグは、臨機応変で割り当ててください。

今回のイメージは、3つのテーブルを並べて、divタグsectionタグの中で、中央寄せというイメージ。

ちなみに、さっき紹介した1つ、2つのテーブルの中央寄せは、ブラウザウインドウに対して、中央寄せになっています。
なので、sectionタグで指定してあるwidth: 400pxを外すと、ブラウザウインドウに対して、中央寄せなります【ポイント04】。

ということで、紹介させていただきましたが、お役に立てればと思います。
機会があれば、今度はdlタグを使ったテーブルレイアウトも書きます。

思ったこと・・・
テーブルがバラバラだと、レスポンシブレイアウトのときでも、役に立つのでは?
その有効活用ややり方は、分かりませんけどw

最新記事

読まれている記事

ツイッター

カテゴリー