[5] tfoot 要素型は、 行群の要素型の一つで、表の尾部を表します。 すなわち、表の見出しにあたる行の集合です。

tfoot 要素は、表の、列に関する情報を含むべきです。

[11] 仕様書:

[7]

開始タグ
必須
終了タグ
省略可能 (HTML 4), 必須 (XHTML 1)
内容模型
(tr+)
出現できる文脈
table 直下で、 thead (あれば。) と tbody の間。高々1個。
属性
属性名属性値既定値説明状態出典
align揃え[HTML4] %cellhalign
bgcolor%Color背景色非標準
char揃える文字[HTML4] %cellhalign
charoff揃える文字[HTML4] %cellhalign
class級[HTML4] %coreattr
dir書字方向[HTML4] %i18n
id一意識別子[HTML4] %coreattr
lang自然言語[HTML4] %i18n
xml:lang自然言語[XHTML1]
onclick[HTML4] %events
ondblclick[HTML4] %events
onkeydown[HTML4] %events
onkeypress[HTML4] %events
onkeyup[HTML4] %events
onmousedown[HTML4] %events
onmousemove[HTML4] %events
onmouseout[HTML4] %events
onmouseover[HTML4] %events
onmouseup[HTML4] %events
styleスタイル情報[HTML4] %coreattr
title注釈的題[HTML4] %coreattr
valign垂直配置[HTML4] %cellvalign
xmlnshttp://www.w3.org/1999/xhtml 固定名前空間名W3C 勧告XHTML m12n

[9] tbody, thead, tfoot は同じ数の行を含まなければなりません。

タグの最小化

[4] tfoot の開始タグが省略できるのは、 表の足にあたる部分が存在しない (= tfoot 要素自体存在しない) 時だけです。すなわち開始タグは必須です。

終了タグはいつでも省略できます。

文脈

[24] tfoot 要素は、 table 要素の子要素として、かつ tbody 要素の弟として、高々1つ使うことができます。

[25] tbody 要素のかわりに tr 要素を使う時は、その弟として高々1つ使うことができます。

[26] tfoot 要素は、必要がなければ、 省略できます。

[1] 直感には反しますが、 table 要素内では thead, tfoot, tbody の順に要素を並べます。

[2] >>1 は遅い回線の環境で届いた部分から順次表示する時に、尾部を先にレンダリングできた方がよろし、ということでこうなりました。 (RFC 1942 参照)

[3] 今となっては無用の制限ですね。何とかならないのかなあ。 XHTML 2 で入れ替えるとかして欲しいなあ。

[15] tfoot に関するエントリーの補足 | WWW WATCH (2007-03-20 10:05:36 +09:00 版) http://hyper-text.org/archives/2007/03/tfoot_supplement.shtml (名無しさん 2007-03-20 01:10:33 +00:00)

[16] >>3 HTML 5 で tfoot は tbody の後でもよいことになりました。

[27] その後、 tbody 要素の前に置けるとの規定は削除されました。

レンダリング

[6] HTML 4 仕様書は、レンダリングの例として、 表が一頁に収まりきらないときに全頁に tfoot を入れてもよいとしています。

(ありそうもないですが、 tfoot が一頁に収まりきらないときにどうするか、 UA は一応対処しておかないといけないでしょう。)

[13] Firefox で表の中身を普通に drag and drop で選択すると、 表示順ではなく文書順で、 thead の次に tfoot、 その後から tbody と選ばれていきます。 利用者的にはあまり嬉しくないような。

(名無しさん 2005-05-17 08:02:00 +00:00)

例

[10] table の使用例も参照されたし。

[17] Taken SPC : Web 標準の日々 (2007-07-22 15:11:19 +09:00 版) http://taken.s101.xrea.com/blog/article.php?id=772

<table id="calendar" summary="Archive calendar of this weblog">
<thead>
<tr>
<th colspan="7" abbr="Year and Month">2007-07</th>
</tr>
<tr>
<th abbr="Sun" class="sunday">日</th>
<th abbr="Mon">月</th>
<th abbr="Tue">火</th>
<th abbr="Wed">水</th>
<th abbr="Thu">木</th>
<th abbr="Fri">金</th>
<th abbr="Sat">土</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7">
<a href="./search.php?d=2007-06" class="prev-month">Jun</a> | 
<a href="./search.php?d=2007-08" class="next-month">Aug</a>
</td>
</tr>
</tfoot>
<tbody>

(名無しさん)

[18] Taken SPC : Web 標準の日々 ( 版) http://taken.s101.xrea.com/blog/article.php?id=772

<table id="calendar" summary="Archive calendar of this weblog">
<thead>
<tr>
<th colspan="7" abbr="Year and Month">2007-07</th>
</tr>
<tr>
<th abbr="Sun" class="sunday">日</th>

<th abbr="Mon">月</th>
<th abbr="Tue">火</th>
<th abbr="Wed">水</th>
<th abbr="Thu">木</th>
<th abbr="Fri">金</th>
<th abbr="Sat">土</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="7">

<a href="./search.php?d=2007-06" class="prev-month">Jun</a> | 
<a href="./search.php?d=2007-08" class="next-month">Aug</a>
</td>
</tr>
</tfoot>
<tbody>

関連

[33] 類似した要素に thead と tbody があります。

歴史

誕生

[28] HTML表モデルの一部として早期から定義されていました。

[29] ただし初期の実装や HTML 3.2 は簡易表モデルのみだったため、 tfoot 要素はありませんでした。

[30] HTML4 は完全な表モデルの規定を含んでおり、 tfoot 要素も含まれていました。

[31] この時代には、長大な表のレンダリングの際のページングやスクロールを考慮した配置の便宜上、 tfoot は thead と tbody の間に挿入するべきとされていました。レンダリングその他の自然な順序は tfoot 内の行が tbody 内の行より後に来るものですから、ソース上では順序が逆転することになります。

[12] HTML 4 DTD の注釈 (参考) には Use TFOOT to duplicate footers when breaking table across page boundaries, or for static footers when TBODY sections are rendered in scrolling panel. とアドバイス(?)があります。

[14] tfoot は tbody の前に書いた方がいいよ | WWW WATCH (2007-03-19 08:19:33 +09:00 版) http://hyper-text.org/archives/2007/03/table_row_groups.shtml (名無しさん 2007-03-18 23:23:26 +00:00)

HTML5

[32] 実際には tfoot は表の末尾に挿入されることも少なくなく、 それで実害も特にありませんでした。 HTML5 はこれを追認し、 tfoot は tbody の前後どちらでも良い (が両方あってはならない) と規定を改めました。

HTML Standard

[23] 2015年には実装状況を踏まえた再検討が行われ、 tfoot 要素は tbody 要素の後でなければならないと改められました。 これにより HTML4 方式は完全に否定されることとなりました。

[19] Web Applications 1.0 r8394 Fix errors in table.caption, table.tHead, table.tFoot ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8393&to=8394

[8] Let HTMLTableElement create*() and insertRow() return specific types · whatwg/html@93cb3d6 ( 版) https://github.com/whatwg/html/commit/93cb3d61526cf956a739c57398760dc8a3a633bd

[20] Disallow <tfoot> before <tbody> in the content model · whatwg/html@94d55af ( 版) https://github.com/whatwg/html/commit/94d55af9cda601ce675d15f6a0e52c9bb9c6afa9

[21] Fix #352: Change .tFoot and .createTFoot() to always insert at the end · whatwg/html@da491d4 ( 版) https://github.com/whatwg/html/commit/da491d4c62c3efb73a96bce7071a0a0dcbfa95d8

[22] Web Applications 1.0 r8394 Fix errors in table.caption, table.tHead, table.tFoot ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8393&to=8394

[34] 8月23日からタイ標準時を導入 | チエンマイブログ日々雑感 ( ()) http://payap.net/blog/2008/08/8%E6%9C%8823%E6%97%A5%E3%81%8B%E3%82%89%E3%82%BF%E3%82%A4%E6%A8%99%E6%BA%96%E6%99%82%E3%82%92%E5%B0%8E%E5%85%A5

<table id="wp-calendar">

<caption>2008年8月</caption>

<thead>

<tr>

<th scope="col" title="日曜日">日</th>

<th scope="col" title="月曜日">月</th>

<th scope="col" title="火曜日">火</th>

<th scope="col" title="水曜日">水</th>

<th scope="col" title="木曜日">木</th>

<th scope="col" title="金曜日">金</th>

<th scope="col" title="土曜日">土</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="3" id="prev"><a href="http://payap.net/blog/2008/07/">&laquo; 7月</a></td>

<td class="pad">&nbsp;</td>

<td colspan="3" id="next"><a href="http://payap.net/blog/2008/09/">9月 &raquo;</a></td>

</tr>

</tfoot>

<tbody>

<tr>

<td colspan="5" class="pad">&nbsp;</td><td>1</td><td>2</td>