cssしやすいテーブルマークアップ
大上段に構えましたけれども、要は<thead>, <th>を使えば楽できるんとちゃうかな？っていうことです。
悪い表組み
悪い表組みの要素を簡単にリストしてみます
- <th>を使ってない
- <thead><tfoot><tbody>が存在しない
- 以上をふまえ<td class="head"> とかあまり意味づけされてないものだけでマークアップ
とまあ、当たり前といえば当たり前ですが、知ると知らんとでは大違いです。マークアップ量もcssコード量も管理のしやすさも歴然とした差がでてきますね。
th=row型
あまりよろしくないマークアップ
| 肩パッド | 170 | 60 |
| 肩パッド | 170 | 60 |
| 肩パッド | 170 | 60 |
<td class="name"> と意味づけはされているように見えますが、そんなものよりも<th>！
<th>とはテーブルセルの見出しとでもいいましょうか。scope属性を使ってその見出しが列に影響するのか、行に影響するのかを決められます。この場合は行なのでscope="row"ですね。私は便宜上この表組みパターンを「th=row型」と呼んでいます。
よろしいマークアップ
| katapad | ||
|---|---|---|
| katapad | ||
| katapad |
th=row, thead型
あまりよろしくないマークアップ
| 名前 | 身長 | 体重 |
| 肩パッド | 170 | 60 |
| 中村 | 190 | 30 |
こちらも全て<td>のみで構成された表組みです。いけませんね〜。classがたくさん増えてしまい、見た目もよくありませんし、cssも面倒です。
というわけで<thead><tbody>の登場です。表組みのヘッダとなるとこを<thead>、本文となるところを<tbody>と設定します。ホームページビルダーでよく見る<tbody>はそういう意味がありました。<tfoot>は最後の行で「合計」とかあるでしょう。あのへんですね。IE以外のモダンブラウザでは<table>の高さを決めてやれば<thead><tfoot>は固定表示、<tbody>部分のみスクロールされるっていうのんも可能です。
これで<th><td>の局所化が行えるのでcssも定義しやすいですね。
余談ですが、<thead><tfoot>がなければ<tbody>は省略可能です。確か…。みんなで仕様書か益子氏の本でも読みましょう。
よろしいマークアップ
そのほか役立つtableの要素：<col>,<colgroup>
ここではあまり触れませんが、<table>には<col><colgroup>という列選択する要素も含むことができます。列ごとに背景色を変えたり、ということもできます。IE6でも動きますが、確かボーダーあたりの挙動がおかしかったはず。まあ、背景色を変える、というのが使用頻度の高い目的となるでしょうから、なにかあったらなにかあったでエンジョイしましょう。