<th>要素

Technical Summary

Definition / Content model

th要素の基本定義

項目	定義
意味	table内のheader cell
Context	tr要素の子
Content model	Flow content。ただしheader、footer、sectioning、heading contentの子孫は含めない
Categories	特定のcontent categoryには分類されない
主要属性	Global attributes、colspan、rowspan、headers、scope、abbr
DOM interface	HTMLTableCellElement。tdと同じinterfaceを使う

見出しcellとdata cellはどちらもtable grid上のcellです。thはheader cell、tdはdata cellとなり、table modelで見出し関係が処理されます。

scopeとheader type

scopeのkeywordと意味

Keyword	headerの向き	適用条件
row	同じrow内のdata cells	row headerを指定
col	同じcolumn内のdata cells	column headerを指定
rowgroup	同じrow group内のdata cells	cellがrow groupに属する場合
colgroup	同じcolumn group内のdata cells	cellがcolumn groupに属する場合

scopeのkeywordがない場合、または未知の値の場合はAuto stateです。Autoは属性に書く値ではなく、仕様上のstateです。Auto stateではtable model内のcell位置と、縦横にdata cellsがあるかどうかなどからheaderの向きを判定します。rowgroupとcolgroupは、該当するgroupに属さないcellへ使えません。

HTML-AAMは、計算されたheaderの種類に応じてcolumnheaderまたはrowheader roleへ対応付けます。実装が公開するrole・関係・読み上げは、HTML-AAMの規定と別に確認します。

自動header assignment

cellにheaders属性がない場合、HTML Standardの「Forming relationships between data cells and header cells」algorithmが、cellのgrid座標を使って見出しを割り当てます。概略として、対象cellから同じrowの左方向と同じcolumnの上方向を走査し、scopeで指定されたrow group・column groupのheaderも候補にします。

<table>
  <thead>
    <tr><th scope="col">商品</th><th scope="col">価格</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">りんご</th><td>120円</td></tr>
  </tbody>
</table>

この例の「120円」には、列見出しの「価格」と行見出しの「りんご」が関係します。rowspanやcolspanはcellの占めるgrid slotを変えるので、header assignmentもその形に左右されます。ソース順だけを見て関係を推測せず、HTML Standardのalgorithmと実装結果を別々に追跡します。

idとheadersによる明示的な関連付け

headersを指定したcellでは、属性値をASCII whitespaceで分けたID tokenからheader listを作ります。各tokenは同じtableに属するthのIDを参照し、対象cell自身を参照してはいけません。関係を追うため、header cell自身のheadersから別のheaderへ連なる場合も仕様で定義されています。

<table>
  <thead>
    <tr><th id="cost" scope="colgroup" colspan="2">費用</th></tr>
    <tr>
      <th id="base" scope="col" headers="cost">基本料金</th>
      <th id="extra" scope="col" headers="cost">追加料金</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="plan" scope="row">プランA</th>
      <td headers="plan cost base">1,000円</td>
      <td headers="plan cost extra">200円</td>
    </tr>
  </tbody>
</table>

適合するmarkupでは、同じtableにある一意なIDを使い、参照関係を点検します。複雑なtableの構造自体を簡単にできないか先に検討してください。WAIのauthoring guidanceも、単純な表ではscope、多段・複数方向の関連付けが必要な表ではidとheadersを使う例を示しています。

主要属性とDOM interface

thとセル共通の属性

属性	対象と注意点
scope	row、col、rowgroup、colgroupのkeyword。欠落・不明値はAuto state
headers	tdとthで使える。同一table内のth IDを参照するtoken列
abbr	ほかの文脈でこのheaderを参照するときに使う代替label。略記とは限らない
colspan / rowspan	同じtable grid上でcellが占めるcolumn数・row数。上限やrow group境界を含む条件を確認する

HTMLTableCellElementにはcellIndex、colSpan、rowSpan、headers、scope、abbrなどがあります。headersやscopeのIDL属性が文字列を反映することと、ブラウザーがAccessibility APIへ公開するheader relationshipは別のsurfaceです。

Fact / Evidence（主張 / 根拠）

仕様上の主張を対象範囲と根拠位置に対応付けます。実装・WPT・Accessibilityの測定結果はImplementation Evidenceに分け、未測定範囲はCoverage / Open Issuesに記録します。

Evidence

1. HTML Standard: The th element — 意味、context、content model、scope、abbr、DOM interface
2. HTML Standard: Attributes common to td and th — rowspan、colspan、headers、cellIndex
3. HTML Standard: Header and data cell semantics — header typeとdata/header relationshipのalgorithm
4. HTML Accessibility API Mappings: th — computed roleとplatform mapping
5. WAI Tables Tutorial — 単純な見出しと複雑な見出し関連付けのauthoring guidance

Implementation Evidence

仕様上の主張とは別に、ブラウザー、WPT、Accessibility API、支援技術の結果を記録します。以下は選定したfixture・test・環境の範囲であり、全実装や全支援技術の共通結果を意味しません。

WPTの実行記録と、ブラウザーのAccessibility tree・Windows UI Automation・NVDAによる実測記録を区別します。選定したテストの結果はWPT全体の適合性を示しません。

Coverage / Open Issues

• Reviewed意味、context、主要属性、scope state、headers tokenの同一table条件、HTML-AAMの基本role mapping
• Openheader assignment algorithm全分岐、nested headers、重複ID、rowspan・colspan上限と境界条件の網羅
• OpenWPTは選定範囲のみ。他ブラウザー、全WPT、Windows UIA property全項目、NVDA以外の支援技術は未評価
• Openabbrの読み上げ利用、複雑な表でのannounce順、ブラウザー・支援技術間の組み合わせ差、Expert-gap Review

このページは初期Coverageです。ここで記録した結果は、すべてのtable構造・ブラウザー・支援技術で同じheader relationshipが公開されることを意味しません。

Related surface

初心者向けの見出し例とscopeの使い方はYugienのth要素ページ、データを入れるセルの例はYugienのtd要素ページを参照してください。仕様とEvidenceはtd Topicで確認できます。表の題名とaccessible nameはcaption Topic、表全体のtable modelとparser recoveryはtable Topicを参照してください。