<thead>要素

Technical Summary

定義・配置・content model

thead要素の基本定義

項目	仕様上の定義	条件・範囲
意味	列見出しと補助cellを含むrow group	cell自体のheader/data semanticsとは区別する
配置先	tableの子	captionとcolgroupの後。table body、tfoot、table直下のtrより前。直接の子は最大1個
content model	0個以上のtrとscript-supporting elements	各行のcellはtdまたはthを含められる
開始タグ・終了タグ	開始タグは必須	直後がtbodyまたはtfootなら終了タグを省略できる
DOM interface	HTMLTableSectionElement	tbody・tfootと共有する
固有属性	定義なし	global attributesを利用できる

HTMLの適合性とparser recoveryは分けて扱います。parserが不正な入力からDOMを作れたことは、その入力が適合するHTMLであることを意味しません。

thead、th、table model

table内で異なる意味を持つ要素

要素	構造上の役割	cell semantics
thead	見出し部分の行グループ	sectionだけでは各cellを見出しcellにしない
th	row内のcell	header cell。scopeやheader-assignment algorithmが適用関係を決める
tbody	表本体の行グループ	中のthはrow headerなどとして使える
td	row内のcell	data cell

HTML Standardのthead定義は、列見出しの行に加えて補助的なnon-header cellを含む場合を認めます。したがって、行の所属先だけで見出し関係を推定せず、実際のcell要素とtable modelを確認します。

複雑な表では、thのscope、id、headers、row/column groupおよびcell spanが関係します。theadというsection名だけで全cellの関連先や読み上げ順を決めることはできません。

parserが作るDOM

<table id="schedule">
  <tr><th scope="col">曜日</th></tr>
</table>

// HTML parserが構築するDOM
table#schedule
└─ tbody  (暗黙に挿入)
   └─ tr
      └─ th

table insertion modeで、table childとして適合するsectionの外にtr tokenが現れると、tree builderはtbodyを暗黙に挿入してtokenを再処理します。cellがthであることを理由にtheadは推定されません。適合するauthoring markupでは、見出し行の親としてtheadを明示します。

HTMLTableSectionElementとtable API

theadから使う主なAPI

member	戻り値・動作	範囲・境界
table.tHead	最初の直接子theadを返す	該当要素がなければnull
table.createTHead()	既存の最初のthead、または新しいsectionを返す	新規作成時はcaption・colgroupの後へ挿入する
table.deleteTHead()	最初の直接子theadを削除する	存在しない場合は何もしない
thead.rows	section直下のtrを含むHTMLCollection	行の追加・削除を反映するlive collection
thead.insertRow() / deleteRow()	section内の行を追加・削除する	indexはsection内の行に対して解釈する

const table = document.querySelector("table");
const head = table.tHead;           // 既存のthead。なければnull
const sameHead = table.createTHead(); // あれば同じ要素を返す
head.rows.length;                   // thead内のtrの数

table.rowsはtable全体の行collection、thead.rowsはheader sectionの行collectionです。似た名前でも、対象範囲が異なります。createTHead()はsectionを作るAPIであり、thや行の内容までは作りません。

Accessibility mapping

HTML-AAMはnative theadをWAI-ARIAのrowgroup roleへ対応付けます。これはheader row groupの構造を示し、列見出しcellのroleを代わりに与えるものではありません。header cellはthと、そのscopeやtable header-assignment規則を基に区別します。

本ページのAAM実測はChromeのbrowser role/name queryです。これはHTML-AAMの規範的mappingそのものでも、Windows UI Automationなどplatform APIの記録でも、支援技術の読み上げ観測でもありません。

Fact / Evidence（主張 / 根拠）

規範的な仕様上の主張、AAMのmapping、選定環境における実装結果を別々に記録します。

Evidence

1. HTML Standard: The thead element — context, content model, tag omission, and section interface
2. HTML Standard: The table element — table child structure and table APIs
3. HTML Standard: The “in table” insertion mode — implied tbody insertion and token reprocessing
4. HTML Accessibility API Mappings: thead — rowgroup mapping
5. Web Platform Tests: the-thead-element/rows.html — section row collection
6. Web Platform Tests: the-table-element/tHead.html — table.tHead behavior

Implementation Evidence

仕様上の要求、選定環境のbrowser観測、WPT実行、Accessibility role/name queryを分けて記録します。各結果は記載したfixture・browser・test範囲に限られます。

Coverage / Open Issues

• SPEC要素の意味、配置条件、content model、tag omission、DOM interface、table parser、table API、HTML-AAM role mappingを確認
• IMPLfixtureとChrome 1環境に限定。別browser・OS build・印刷時のheader group behaviorは未測定
• WPT選定testのみ実行。wpt.liveが配信した上流revisionは未固定で、他browserとdirectory全体は未確認
• AAMbrowser role/name queryを測定。platform Accessibility API、実際の支援技術の読み上げ、他環境の比較は未実施
• ReviewExpert-gap Reviewは未実施

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

関連Surface

列グループの仕様と実測結果はcolgroup Topic、初心者向けの例はYugienのcolgroup要素ページで扱います。

初心者向けの例はYugienのthead要素ページを参照してください。表全体の構造はtable Topic、見出しcellとcell associationはth Topic、表本体の行グループはtbody Topic、summary row groupはtfoot Topic、row structureはtr Topicで扱います。