WWW Watch

tfoot は tbody の前に書いた方がいいよ

404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た...

404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た時にその HTML ソースはないなぁ...... と思ったのと同時に、tbody に CSS を適用して overflow:auto とかすれば終わる話じゃないのとか思ってそれについてエントリーを書こうかなと思った瞬間、hxxk.jp さんにて 「CSS で tbody 要素を一定の高さにして、 overflow: auto でスクロール表示にする tips」 っていうエントリーが上がってるのを見て萎えた。

で、それについて書くのは諦めたんですが、hxxk.jp さんのサンプルソース (XHTMLの方) で一点気になったんでそれについて書いてみることに。

と言っても、本エントリーのタイトルで完結しちゃってるんですが...... 下記に該当のソースを引用してみます。

<table summary="tbody 要素のスクロールの実験">
<thead>
<tr>
<th>hello</th>
<th>hi</th>
<th>goodbye</th>
</tr>
</thead>
<tbody>
<tr>
<td>test(0)</td>
<td>aa(0)</td>
<td>cols(0)</td>
</tr>
<!--中略-->
<tr>
<td>test(19)</td>
<td>aa(19)</td>
<td>cols(19)</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>hello</th>
<th>hi</th>
<th>goodbye</th>
</tr>
</tfoot>
</table> 

行グループを指定するために、「thead」、「tbody」、「tfoot」 の各要素が使用されていますが、気になったのは、「tfoot」 の出現位置。ここでは 「tbody」 の下に記述されています。感覚的には自然なのですが、HTML 4.01 仕様書11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements) では、下記のように書かれています。

TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.

「表データが大きい場合などに、表内のデータをすべて取得するまで待たずにユーザーエージェントがフッタのレンダリングが行えるよう、tfoot は tbody の前に書くべし」 ということですね。

なので、こんな感じで書くと正しいと。

<table summary="tbody 要素のスクロールの実験">
<thead>
<tr>
<th>hello</th>
<th>hi</th>
<th>goodbye</th>
</tr>
</thead>
<tfoot>
<tr>
<th>hello</th>
<th>hi</th>
<th>goodbye</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>test(0)</td>
<td>aa(0)</td>
<td>cols(0)</td>
</tr>
<!--中略-->
<tr>
<td>test(19)</td>
<td>aa(19)</td>
<td>cols(19)</td>
</tr>
</tbody>
</table>

これで、tfoot でマークアップされた部分は、フッターに固定されます。ただ、HTML 4.0 以降にきちんと対応していない古いブラウザでは tfoot でマークアップされた部分がフッターに固定されず、記述した順でそのままレンダリングされるので注意が必要です。(HTML 3.2 ではそれが正しい挙動)

と、本題からずれてしまいましたがこの辺で。

ところで、hxxk.jp さんのアプローチ (私も同じこと書こうとしていたわけですが) だと IE でスクロールバーが出ないので 404 Blog Not Found さんが元ネタとして挙げている 「ScrollableTable」 の完全な代替としては使えないんですよね。

3月20日 追記
タイトルに突っ込み頂いたので、補足エントリーを上げています。

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー