第51回 CSSでtableのデザインテーブルレイアウトを卒業しよう

CSSでtableのデザイン

今回は、Table要素、つまり表の見た目をCSSで設定していくときのコツを解説します。実は意外とクセモノです。

Tableの仕組み

まず何より大切なのが、table要素の仕組み、マークアップを理解しておくことです。

これはtableに限ったことではないですが、普通の要素とくらべると構造がチョイややこしいので、整理しておきます。

シンプルな例を挙げてみます。

<table>
<tr>
<th scope="col">ヘッダー</th>
<th scope="col">ヘッダー</th>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

table要素の構造

この他にもtheadやtbody、tfoot要素などを使う場合もありますが、まずはシンプルケースということで、1行目のみをthで見出しにしています。

では、tableをデザインするときに重要なCSSの関連プロパティを見てみます。

border-collapse
セル同士の間にスペースを入れるか密接させるかを指定します。値はcollapseで間隔なし、separateで間隔が空きます。
border-spacing
border-collapseがseparateの場合に、間隔を数値で指定します。IE6,7未対応。
empty-cells
border-collapseがseparateの場合に、空白セルの表示または非表示を指定します。値はshowで表示、hideで非表示になります。IE6,7未対応。

次に実際にスタイルを書いていくときのポイントです。

まず覚えておくとよいのは、trにborderは設定できないということです。

正確には、border-collapseがcollapseであればtrにborderが設定できるのですが、IEはこの通りに動いてくれません。たとえcollapseでもtrのborderは表示されません。6~8まで全滅です。

縦線のないtable

そこで、上図のようなborderを描きたいときはどこに設定すればいいかというと、各thやtdのborder-bottomで設定します。

table {
border-collapse: collapse;
border: 1px solid #000;
border-bottom: none;
}
th, td {
border-bottom: 1px solid #000;
}

まずtable全体にぐるっとborderをひき、各セルの下側だけborder-bottomをひきます。するとtableの下側のborderと一番下のセルのborder-bottomが重複するので、tableのborder-bottomのみnoneとして線を表示しないようにしています。(これはやらなくてもいいかもしれません)

もう少し手を加えていくとこんな感じに。

thとtdに背景色をつける

body {
color: #24282b;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"MS Pゴシック", "MS PGothic", sans-serif;
}
table {
width: 400px;
border-collapse: collapse;
border: 1px solid #548582;
background-color: #fcf9ca;
}
th {
padding: 5px;
border-bottom: 3px double #548582;
background-color: #9fc7b2;
text-align: left;
}
td {
border-bottom: 1px dotted #548582;
}

tableを表として正しく使う分には用途は非常に多いと思います。

参考までにさまざまなデザインのサンプル集を紹介しておきます!

Pricing Tables: Examples And Best Practices

Top 10 CSS Table Designs

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
Firefox 4.0のSync機能を試した
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読