複数行にまたがるヘッダーとHTMLの値を関連付けるには、行グループを定義し、scope="rowgroup"を使用します。より複雑な関係の場合は、ヘッダーに一意のIDを付け、それぞれのデータセルのheaders属性に列挙します。このガイドでは、MacのTextEditでローカルの例を作成します。
ここでの課題は、ラベルが複数行にまたがる場合でも、値がその文脈を保つHTMLテーブルを1つ作成することです。W3Cは、グループ化されたヘッダーについて不規則なテーブルのチュートリアルで、明示的な関連付けについて複数レベルのヘッダーのチュートリアルで説明しています。
このテーブルに必要な関連付けはどれですか？
まず、1つの値を理解するために必要なラベルを書き出します。以下の架空の例では、値40はセットAlphaのLargeバリエーションの幅をミリメートル単位で示します。したがって、完全な文脈はAlpha、Large、Widthです。すべての寸法は説明用のサンプルデータです。
編集する前に、次の判断表を使ってください。
| テーブルの構造 | 使用する関連付け | 構造上の要件 |
|---|---|---|
| ヘッダーが通常の行を1つ示す | scope="row" |
その行のthセルにヘッダーを配置する |
| ヘッダーが通常の列を1つ示す | scope="col" |
その列のthセルにヘッダーを配置する |
| ヘッダーが本文の行グループ全体を示す | scope="rowgroup" |
その行を独立したtbodyで囲む |
| 1つの値に複数のヘッダーが必要、またはテーブル内で関係が変化する | 一意のヘッダーIDとheadersのリスト |
該当するヘッダーをすべて明示的に指定する |
scopeの値は関連付けを示し、rowspanはセルが占める行数を示します。縦に長いヘッダーにも、適切な関連付けが必要です。MDNはテーブルヘッダー要素のリファレンスで、この2つの属性を別々に説明しています。
規則的なグループでは、W3Cのパターンは、複数行にまたがるヘッダーと独立したtbodyおよびscope="rowgroup"を組み合わせます。テーブルには複数の本文グループを含められます。ヘッダー行はtheadに置き、フッターで複数行にまたがるヘッダーはtfootに置きます。W3C：不規則なヘッダーを持つテーブル。
複雑なテーブルでは、明示的な関連付けにより、値の意味全体を直接指定できます。W3Cは、列ヘッダーが変化するパターンや、3つ以上のヘッダーに関連付けられたセルを含むパターンで、この方法を推奨しています。完成例では、構造上のscope属性とともに明示的なリストを使い、それぞれの数値が3つのヘッダーを指定するようにしています。W3C：複数レベルのヘッダーを持つテーブル。
TextEditでHTMLドキュメントを作成する
この練習では、新しいローカルファイルを使います。既存のドキュメントを編集する場合は、まず別のコピーを保存して、編集前後の値と順序を比較できるようにしてください。
- TextEditを開き、
ファイル > 新規を選択します。 フォーマット > 標準テキストにするを選択します。- Markdownのフェンス記号を除き、以下のドキュメント全体を貼り付けます。
ファイル > 保存を選択し、ファイル名をtable-headers.htmlにします。- 拡張子について確認されたら、
Use .htmlを選択します。
これはAppleが説明しているTextEditでHTMLファイルを作成する手順です。この例では、パッケージ、スクリプト、外部アセットは必要ありません。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample tile dimensions</title>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #777; padding: 0.5rem; }
caption { text-align: left; font-weight: bold; }
</style>
</head>
<body>
<h1>Sample tile dimensions</h1>
<table>
<caption>Illustrative tile dimensions in millimetres</caption>
<thead>
<tr>
<th scope="col">Set</th>
<th scope="col">Variant</th>
<th id="tiles-width" scope="col">Width</th>
<th id="tiles-height" scope="col">Height</th>
</tr>
</thead>
<tbody>
<tr>
<th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
<th id="tiles-alpha-small" scope="row">Small</th>
<td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
<td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
</tr>
<tr>
<th id="tiles-alpha-large" scope="row">Large</th>
<td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
<td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
</tr>
</tbody>
<tbody>
<tr>
<th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
<th id="tiles-beta-small" scope="row">Small</th>
<td headers="tiles-beta tiles-beta-small tiles-width">25</td>
<td headers="tiles-beta tiles-beta-small tiles-height">35</td>
</tr>
<tr>
<th id="tiles-beta-large" scope="row">Large</th>
<td headers="tiles-beta tiles-beta-large tiles-width">45</td>
<td headers="tiles-beta tiles-beta-large tiles-height">65</td>
</tr>
</tbody>
</table>
</body>
</html>
結果をプレビューするには、保存したファイルをSafariで開きます。4列が表示され、AlphaとBetaがそれぞれ2つの本文行を占めているはずです。以下のソース確認を行うため、ファイルをTextEditで開いたままにしておきます。
TextEditでドキュメントを開き直すときは、ファイル > 開くを使ってファイルを選択し、オプションを表示をクリックして、リッチテキストコマンドを無視を選択します。または、TextEdit > 設定の開く／保存でHTMLファイルをフォーマット済みテキストではなくHTMLコードとして表示を有効にします。AppleはHTMLの編集手順でこれらのオプションを説明しています。
この例では各値をどのようにヘッダーと関連付けていますか？
値40のソースを、小さな関連付けマップとして読み取ってみましょう。そのheadersリストには、tiles-alpha、tiles-alpha-large、tiles-widthが含まれています。これらのIDは、それぞれAlpha、Large、Widthを示します。対応する高さの値60では、最初の2つのIDをそのまま使い、3つ目をtiles-heightに置き換えます。
IDは作成者が選ぶ識別子であり、HTMLの特別なキーワードではありません。リスト内の各トークンは、同じテーブル内のth要素を示す必要があります。トークンはスペースで区切り、1つのリスト内で重複させないでください。これらの要件はHTML標準の共通テーブルセル属性に定められています。
このリストは、別のヘッダーから文脈を再構成させるのではなく、完全な文脈を明記します。W3CのH43手法では、各データセルのheaders属性に該当するヘッダーIDを記述する方法が説明されています。
2行目のAlphaの先頭がLargeであることに注目してください。Alpha用のセルは追加されていません。1行目のrowspan="2"がすでにその位置を占めているからです。そこに空のセルを追加すると、グリッドが変わってしまいます。MDNはヘッダーセルの使用上の注意で、複数行にまたがるセルが空けた位置にセルを配置することを説明しています。
同じ考え方で、見た目が似ている次の2つのレイアウトを区別してください。左側のラベルが複数の本文行にまたがる場合、それは行グループヘッダーにできます。先頭部分で列ラベルが2行にまたがる場合でも、scope="col"を持つ列ヘッダーであることに変わりはありません。セルの物理的な高さによって、関連付けが行グループとの関係に変わるわけではありません。MDN：ヘッダー属性。
テーブルを変更する前に関連付けを確認する
この例では、3つのラベルを使って確認します。値を1つ選び、それがどのセット、バリエーション、寸法を示すかを特定してから、そのラベルを参照先のIDと照合します。
| 値 | 想定される文脈 | headersの想定値 |
|---|---|---|
| 20 | Alpha、Small、Width | tiles-alpha tiles-alpha-small tiles-width |
| 60 | Alpha、Large、Height | tiles-alpha tiles-alpha-large tiles-height |
| 25 | Beta、Small、Width | tiles-beta tiles-beta-small tiles-width |
| 65 | Beta、Large、Height | tiles-beta tiles-beta-large tiles-height |
すべての数値セルについて、この確認を繰り返します。参照先のIDがすべて存在すること、各参照が意図したヘッダーを示していること、ドキュメント内のほかの場所でIDが重複していないことを確認してください。これらの確認はW3CのH43手法に沿ったものです。見た目が整ったテーブルかどうかを確認するだけでは不十分なので、ソース内の関連付けも確認してください。
Alphaに3つ目のバリエーションを追加するときは、その行を既存のAlphaのtbody内に挿入し、Alphaのspanをrowspan="3"に変更し、新しいバリエーションに一意のIDを付け、それぞれの新しい数値セルに適切な3つのヘッダーのリストを追加します。この変更を行うときも、元の行順と値を維持してください。
バリエーションを削除するときは、それに応じてspanを減らします。グループの先頭行を削除する場合は、そのグループのヘッダーを最初に残る行へ移動します。複数行にまたがるセルは1つの行グループ内に収めてください。HTMLのテーブルモデルでは、セルが複数の行グループにまたがることはできません。WHATWG：テーブルモデル。
後からアプリケーションによって行が生成または並べ替えられる場合は、次の更新要件を守ってください。各グループをまとめて維持し、グループの複数行にまたがるヘッダーを先頭行に置き、spanの数を保ち、参照先に変更があれば更新します。この例でAlpha内のLargeをSmallより前に移動する場合は、Alphaヘッダーも新たに先頭となる行に移動する必要があります。
エディターがこれらの属性を保持できない場合は？
エディターでセルを結合できるからといって、ここで使っている関連付けまで保持されるとは限りません。編集またはエクスポートしたドキュメントを利用する前に、HTMLを確認し、意図したグループ境界、scope、ID、ヘッダーリストが保たれていることを確かめてください。このチュートリアルで対象とするMacの手順は、TextEditでソースを直接編集する方法です。
作成ツールが必要な構造を保持できない場合は、Variant、Width、Heightの列を持つ、セットごとのシンプルなテーブルを別に作ることを検討してください。W3Cは、複雑なテーブルを小さなテーブルに分割する方法を、読みやすさと作成のしやすさを向上させる代替案として紹介しています。元の構造を変更しても差し支えない場合に限り、この方法を使ってください。W3C：複数レベルのテーブルを分割する。
完成した例から任意の数値を1つ選び、参照している3つのラベルが、その数値の示す内容と正確に一致することを確認してください。そして、行の挿入、削除、並べ替えのたびに同じ確認を行ってください。これにより、テーブルの見た目だけでなく意味も保つための具体的な方法が得られます。
出典
- 不規則なヘッダーを持つテーブル — W3C Web Accessibility Initiative。
- 複数レベルのヘッダーを持つテーブル — W3C Web Accessibility Initiative。
- MacのTextEditでHTMLドキュメントを操作する — Apple Support。
- HTMLテーブルのヘッダー要素 — MDN Web Docs。
- HTML標準：表形式データ — WHATWG。
- H43：id属性とheaders属性を使って、データテーブルのデータセルとヘッダーセルを関連付ける — W3C Web Accessibility Initiative。