<tfoot>要素

Technical Summary

定義・配置・content model

tfoot要素の基本定義

項目	仕様上の定義	条件・範囲
意味	表の列のまとめ（footer）を含む行グループ	値の計算、表示位置の装飾、ページ全体のfooterを定義しない
配置先	tableの子	caption、colgroup、thead、table bodyまたはtable直下のtrの後。直接のtfoot childは最大1個
content model	0個以上のtrとscript-supporting elements	空のtfootもcontent model上は許される
開始タグ・終了タグ	開始タグは必須	終了タグは、親要素に続く内容がない場合だけ省略できる
DOM interface	HTMLTableSectionElement	theadとtbodyも同じinterfaceを使う
固有属性	定義なし	global attributesを利用できる

tfootはsummary rowを置くための構造です。tfootを追加しても、合計値の算出やセルの関連付けが自動で行われるわけではありません。行とセルはtr、th、tdで表します。

row groupとtable rowsの順序

thead、tbody、tfootはそれぞれ異なる種類の行をまとめるtable row groupです。適合するHTML tableのcontent modelでは、table body（0個以上のtbody、または1個以上の直接のtr）の後に、任意でtfootを置きます。

<table>
  <caption>四半期の売上</caption>
  <thead>...見出し行...</thead>
  <tbody>...データ行...</tbody>
  <tfoot>...まとめの行...</tfoot>
</table>

HTMLTableElement.rowsはtableの行を返すlive HTMLCollectionです。その順序は、tree orderそのままではなく、theadの行、tbodyまたはtable直下の行、tfootの行の順です。行グループのソース順やDOM順を確認するときは、table.rowsだけでなくtable.childrenも見ます。

HTMLTableSectionElementとtable API

tfootとtableから使う主なAPI

member	戻り値・動作	境界
tfoot.rows	section直下のtrを含むHTMLCollection	行の追加・削除を反映するlive collection
tfoot.insertRow(index)	tfoot内に新しいtrを挿入する	-1は末尾。範囲外indexはIndexSizeError
tfoot.deleteRow(index)	tfoot内の指定したtrを削除する	-1は最後の行。範囲外や空sectionではIndexSizeError
table.tFoot	tableの最初の直接のtfoot child。なければnull	HTMLTableElementの単数形のgetter
table.createTFoot()	既存の最初のtfootを返すか、なければtfootを作ってtable末尾に挿入する	呼び出しだけでsummary rowは作らない
table.deleteTFoot()	最初の直接のtfoot childを削除する	tfootがなければ何もしない

const table = document.querySelector("table");
const foot = table.tFoot;
foot.rows.length;       // tfoot内の行数
foot.insertRow(-1);     // tfootの末尾に行を追加
table.createTFoot();    // 既存があればそれを返す

table.insertRow(-1)は、tableのrows collectionに行があり、最後の行がtfootに属する場合、そのsectionへ行を追加します。sectionが空の場合など、異なる条件では挿入先が変わるため、特定のsectionを更新したいときはtfoot.insertRow()を使います。

parserが作るDOM

HTML Standardの適合content modelでは、tfootをtable bodyより後に書きます。一方、HTML parserは不適合な順序の入力からもDOMを作ります。次の不適合markupでは、tree上の子要素順とtable.rows collectionの順序が異なります。

<table>
  <tfoot><tr><td>合計</td></tr></tfoot>
  <tbody><tr><td>品目</td></tr></tbody>
</table>

// Chrome 155で観測したDOM child order: tfoot, tbody
// table.rows order: tbodyのtr, tfootのtr

このparser recoveryは、tfootを先に書くことを推奨する根拠ではありません。通常のHTMLではtable bodyの後に書き、DOM child orderとAPI collectionの順序を分けて調べます。

Accessibility mapping

HTML-AAMはnative tfootをWAI-ARIAのrowgroup roleに対応付けます。これは行をまとめる構造です。tfoot自体が表の名前や行見出しになるわけではありません。summary row内の見出しにはth scope="row"、値にはtdを使い、見出しと値の関係をcellで表します。

Chrome 155のbrowser role queryでは、名前付きtable内に3つのrowgroupが公開され、そのうち最後のグループにはsummary rowがありました。これは選定fixtureのbrowser Accessibility role queryです。規範的なHTML-AAM mapping、Windows UI Automationなどのplatform API、スクリーンリーダーの発話は別のEvidenceとして扱います。

Fact / Evidence（主張 / 根拠）

主要な仕様上の主張と根拠を対応付けます。規範的mappingと、選定browserでの観測を混同しません。

Evidence

1. HTML Standard: The tfoot element — meaning, context, content model, tag omission, and table section interface
2. HTML Standard: The table element — table child order and the table row collection
3. HTML Standard: Parsing tables — parser behavior for table tokens
4. HTML Accessibility API Mappings: tfoot — native rowgroup role
5. Web Platform Tests: tfoot rows — section row collection
6. Web Platform Tests: tFoot.html — table footer getter and methods
7. Web Platform Tests: footer before body — table.insertRow(-1) with this parsed child order

Implementation Evidence

仕様上の要求、fixtureでのChrome観測、WPT実行、browser Accessibility role queryを分けて記録します。各結果は記載した条件と範囲に限られます。

browserのrole queryは、platform Accessibility APIやスクリーンリーダーの発話と同じ測定ではありません。実施した層と未測定の範囲を分けます。

Coverage / Open Issues

• 仕様確認済み意味、配置条件、content model、tag omission、HTMLTableSectionElementとtable API、table rows collection、HTML-AAM mapping
• 選定観測済みChrome 155 fixture 17/17、選定WPT 4/4、browser role queryでtable 1・rowgroup 3・row 4
• 未完了WPTは選定3ファイルだけ。wpt.liveが配信した上流revisionは固定していない
• 未完了Chrome以外、他OS、platform Accessibility API、スクリーンリーダー、印刷、全parser recovery経路、Expert-gap Review

このTopicは初期Coverageです。選定したfixtureとtestの成功は、すべてのHTML構造、browser、OS、支援技術で同じ結果になることを示しません。

関連Surface

列グループの構造、CSS、実測結果はcolgroup Topicを参照してください。

初めて表を作るときの説明はYugienのtfoot要素ページを参照してください。表全体のcontent modelはtable Topic、見出し行はthead Topic、主なデータ行はtbody Topic、行のDOM APIはtr Topic、summary cellの見出し関係はth Topicで扱います。