
[5] [DFN[[CODE(HTMLe)[tfoot]] 要素型]]は、
[[行群]]の要素型の一つで、表の尾部を表します。
すなわち、表の見出しにあたる行の集合です。

[CODE(HTMLe)[tfoot]] 要素は、表の、[[列]]に関する情報を含むべきです。

[11]
仕様書: 
- [[HTML 4]]
-- <IW:HTML4:"struct/tables.html#edef-TFOOT">

[7]
:[[開始タグ]]:必須
:[[終了タグ]]:省略可能 (HTML 4), 必須 (XHTML 1)
:[[内容模型]]:[CODE(SGML)[([CODE(HTMLe)[[[tr]]]]+)]]
:出現できる文脈:[CODE(HTMLe)[[[table]]]] 直下で、
[CODE(HTMLe)[[[thead]]]] (あれば。) と [CODE(HTMLe)[[[tbody]]]] の間。高々1個。
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,状態	,出典
,[CODE(HTMLa)[[[align]]]]	,	,	,揃え	,[HTML4] [CODE(SGML)[%[[cellhalign]]]]
,[CODE(HTMLa)[[[bgcolor]]]]	,[CODE(SGML)[%[[Color]]]]	,	,背景色	,非標準
,[CODE(HTMLa)[[[char]]]]	,	,	,揃える文字	,[HTML4] [CODE(SGML)[%cellhalign]]
,[CODE(HTMLa)[[[charoff]]]]	,	,	,揃える文字	,[HTML4] [CODE(SGML)[%cellhalign]]
,[CODE(HTMLa)[[[class]]]]	,	,	,[[級]]	,[HTML4] %[[coreattr]]
,[CODE(HTMLa)[[[dir]]]]	,	,	,[[書字方向]]	,[HTML4] %[[i18n]]
,[CODE(HTMLa)[[[id]]]]	,	,	,一意識別子	,[HTML4] %coreattr
,[CODE(HTMLa)[[[lang]]]]	,	,	,[[自然言語]]	,[HTML4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]]	,	,	,自然言語	,[XHTML1]
,[CODE(HTMLa)[[[onclick]]]]	,	,	,	,[HTML4] %[[events]]
,[CODE(HTMLa)[[[ondblclick]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeydown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeypress]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeyup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousedown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousemove]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseout]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseover]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,[HTML4] %coreattr
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,[HTML4] %coreattr
,[CODE(HTMLa)[[[valign]]]]	,	,	,垂直配置	,[HTML4] [CODE(SGML)[%[[cellvalign]]]]
,[CODE(XMLa)[[[xmlns]]]]	,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定	,==	,[[名前空間名]]	,W3C 勧告	,[[XHTML m12n]]


[9] [CODE(HTMLe)[[[tbody]]]], [CODE(HTMLe)[thead]],
[CODE(HTMLe)[[[tfoot]]]] は同じ数の[[行]]を含まなければなりません。

[[#comment]]


** タグの最小化

[4] [CODE(HTMLe)[tfoot]] の開始タグが省略できるのは、
表の足にあたる部分が存在しない (= [CODE(HTMLe)[tfoot]] 要素自体存在しない)
時だけです。すなわち開始タグは必須です。

終了タグはいつでも省略できます。

* 文脈

[24] [CODE(HTMLe)@en[[[tfoot]]]] [[要素]]は、 [CODE(HTMLe)@en[[[table]]]]
[[要素]]の[[子要素]]として、かつ [CODE(HTMLe)@en[[[tbody]]]]
[[要素]]の[[弟]]として、高々1つ使うことができます。

[25] [CODE(HTMLe)@en[[[tbody]]]] [[要素]]のかわりに [CODE(HTMLe)@en[[[tr]]]]
[[要素]]を使う時は、その[[弟]]として高々1つ使うことができます。

[26] [CODE(HTMLe)@en[[[tfoot]]]] [[要素]]は、必要がなければ、
省略できます。

[HISTORY[
[1] 直感には反しますが、 [CODE(HTMLe)[[[table]]]] 要素内では 
[CODE(HTMLe)[[[thead]]]], [CODE(HTML)[tfoot]], 
[CODE(HTMLe)[[[tbody]]]] の順に要素を並べます。

[2] >>1 は遅い回線の環境で届いた部分から順次表示する時に、尾部を先にレンダリングできた方がよろし、ということでこうなりました。 ([[RFC 1942]] 参照)

[3] 今となっては無用の制限ですね。何とかならないのかなあ。 
[[XHTML 2]] で入れ替えるとかして欲しいなあ。

[15]
[CITE@ja[tfoot に関するエントリーの補足 | WWW WATCH]] ([CODE[2007-03-20 10:05:36 +09:00]] 版) <http://hyper-text.org/archives/2007/03/tfoot_supplement.shtml>
([[名無しさん]] [WEAK[2007-03-20 01:10:33 +00:00]])

[16]
>>3 [[HTML 5]] で [CODE(HTMLe)@en[[[tfoot]]]] は [CODE(HTMLe)@en[[[tbody]]]] の後でもよいことになりました。

[27] その後、 [CODE(HTMLe)@en[[[tbody]]]] [[要素]]の前に置けるとの規定は削除されました。
]HISTORY]

* レンダリング

[6] HTML 4 仕様書は、レンダリングの例として、
表が一頁に収まりきらないときに全頁に [CODE(HTMLe)[tfoot]]
を入れてもよいとしています。

(ありそうもないですが、 [CODE(HTMLe)[tfoot]] が一頁に収まりきらないときにどうするか、
UA は一応対処しておかないといけないでしょう。)

[13]
[[Firefox]] で表の中身を普通に [[drag and drop]] で選択すると、
表示順ではなく[[文書順]]で、
[CODE(HTMLe)[[[thead]]]] の次に [CODE(HTMLe)[[[tfoot]]]]、
その後から [CODE(HTMLe)[[[tbody]]]] と選ばれていきます。
[[利用者]]的にはあまり嬉しくないような。

([[名無しさん]] [WEAK[2005-05-17 08:02:00 +00:00]])

[[#comment]]


** 例

[10] [CODE(HTMLe)[[[table]]]] の使用例も参照されたし。

[17]
[CITE@ja[Taken SPC : Web 標準の日々]] ([CODE[2007-07-22 15:11:19 +09:00]] 版) <http://taken.s101.xrea.com/blog/article.php?id=772>

>
[PRE(HTML example code)[
<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>
]PRE]

([[名無しさん]])


[18]
[CITE@ja[Taken SPC : Web 標準の日々]] ([TIME[2007-07-22 15:11:19 +09:00]] 版) <http://taken.s101.xrea.com/blog/article.php?id=772>

>
[PRE(HTML example code)[
<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>
]PRE]

* 関連

[33] 類似した[[要素]]に [CODE(HTMLe)@en[[[thead]]]] と [CODE(HTMLe)@en[[[tbody]]]]
があります。

* 歴史

** 誕生

[28] [[HTML表モデル]]の一部として早期から定義されていました。

[29] ただし初期の実装や [[HTML 3.2]] は簡易表モデルのみだったため、 [CODE(HTMLe)@en[[[tfoot]]]]
[[要素]]はありませんでした。

[30] [[HTML4]] は完全な表モデルの規定を含んでおり、 [CODE(HTMLe)@en[[[tfoot]]]]
[[要素]]も含まれていました。

[31] この時代には、長大な[[表]]の[[レンダリング]]の際の[[ページング]]や[[スクロール]]を考慮した[[配置]]の便宜上、
[CODE(HTMLe)@en[[[tfoot]]]] は [CODE(HTMLe)@en[[[thead]]]] と [CODE(HTMLe)@en[[[tbody]]]]
の間に挿入するべきとされていました。[[レンダリング]]その他の自然な順序は
[CODE(HTMLe)@en[[[tfoot]]]] 内の[[行]]が [CODE(HTMLe)@en[[[tbody]]]]
内の[[行]]より後に来るものですから、[[ソース]]上では順序が逆転することになります。

[12]
HTML 4 DTD の[[注釈]] (参考) には
[Q[Use TFOOT to duplicate footers when breaking table across page boundaries, or for static footers when TBODY sections are rendered in scrolling panel.]]
とアドバイス(?)があります。

[14]
[CITE@ja[tfoot は tbody の前に書いた方がいいよ | WWW WATCH]] ([CODE[2007-03-19 08:19:33 +09:00]] 版) <http://hyper-text.org/archives/2007/03/table_row_groups.shtml>
([[名無しさん]] [WEAK[2007-03-18 23:23:26 +00:00]])

** HTML5

[32] 実際には [CODE(HTMLe)@en[[[tfoot]]]] は[[表]]の末尾に挿入されることも少なくなく、
それで実害も特にありませんでした。 [[HTML5]] はこれを追認し、
[CODE(HTMLe)@en[[[tfoot]]]] は [CODE(HTMLe)@en[[[tbody]]]]
の前後どちらでも良い (が両方あってはならない) と規定を改めました。

** HTML Standard

[23] 2015年には実装状況を踏まえた再検討が行われ、 [CODE(HTMLe)@en[[[tfoot]]]]
[[要素]]は [CODE(HTMLe)@en[[[tbody]]]] [[要素]]の後でなければならないと改められました。
これにより [[HTML4]] 方式は完全に否定されることとなりました。

[19] [CITE@en[Web Applications 1.0 r8394     Fix errors in table.caption, table.tHead, table.tFoot]]
( ([TIME[2014-01-14 09:05:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8393&to=8394>

[8] [CITE@en[Let HTMLTableElement create*() and insertRow() return specific types · whatwg/html@93cb3d6]]
([TIME[2015-12-01 11:39:13 +09:00]] 版)
<https://github.com/whatwg/html/commit/93cb3d61526cf956a739c57398760dc8a3a633bd>

[20] [CITE@en[Disallow <tfoot> before <tbody> in the content model · whatwg/html@94d55af]]
([TIME[2015-12-19 22:59:47 +09:00]] 版)
<https://github.com/whatwg/html/commit/94d55af9cda601ce675d15f6a0e52c9bb9c6afa9>

[21] [CITE@en[Fix #352: Change .tFoot and .createTFoot() to always insert at the end · whatwg/html@da491d4]]
([TIME[2015-12-19 23:13:06 +09:00]] 版)
<https://github.com/whatwg/html/commit/da491d4c62c3efb73a96bce7071a0a0dcbfa95d8>

[22] [CITE@en[Web Applications 1.0 r8394     Fix errors in table.caption, table.tHead, table.tFoot]]
( ([TIME[2014-01-14 09:05:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8393&to=8394>


[FIG(quote)[
[FIGCAPTION[
[34] [CITE@ja[8月23日からタイ標準時を導入 | チエンマイブログ日々雑感]]
( ([TIME[2016-06-03 22:49:14 +09:00]]))
<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>
]FIGCAPTION]

> <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>

]FIG]
