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日 追記
タイトルに突っ込み頂いたので、補足エントリーを上げています。
