HTMLの表はth要素とscope属性で見出しとデータを対応させる

header logo

HTMLの表はth要素とscope属性で見出しとデータを対応させる

公開日：2012年11月28日執筆：佐藤

scope属性 table要素 th要素

HTMLでデータを表にするときは、見出しセルをth要素、データセルをtd要素で記述します。列見出しにはscope="col"、行見出しにはscope="row"を指定し、見出しがどのデータに対応するかを示します。

太字や背景色だけで見出しらしく見せても、HTML上は見出しになりません。表の見た目と、セル同士の関係は分けて作ります。

th要素は見出しをtd要素はデータを表す

HTML 4.01の表の仕様は、TH要素を見出し情報のセル、TD要素をデータのセルと定義しています。ブラウザがthを太字や中央寄せで表示することがありますが、表示の違いは本来の役割ではありません。

次の書き方では、先頭行のセルをすべてtd要素にしています。

<table>
  <tr>
    <td>行見出し</td>
    <td>列A</td>
    <td>列B</td>
  </tr>
  <tr>
    <td>行A</td>
    <td>データA1</td>
    <td>データA2</td>
  </tr>
</table>

CSSで先頭行を太字にしても、各セルはデータのままです。見出しとして働くセルをth要素へ変更します。

scope属性は見出しが対応する方向を示す

先頭行が列見出し、先頭列が行見出しとなる単純な表は、次のように記述できます。このコードは、構造を説明するための模式例です。

<table>
  <tr>
    <th scope="col">行見出し</th>
    <th scope="col">列A</th>
    <th scope="col">列B</th>
  </tr>
  <tr>
    <th scope="row">行A</th>
    <td>データA1</td>
    <td>データA2</td>
  </tr>
  <tr>
    <th scope="row">行B</th>
    <td>データB1</td>
    <td>データB2</td>
  </tr>
</table>

scope="col"は、そのセルが同じ列の見出しであることを示します。scope="row"は、そのセルが同じ行の見出しであることを示します。たとえば「データA2」には、列見出しの「列B」と行見出しの「行A」が対応します。

WCAG 2.0の実装方法H63は、scope属性の値としてrow、col、rowgroup、colgroupを挙げています。単純な表では、まずrowとcolで、各見出しの方向を明示します。

H63は、見出しが先頭行か先頭列にある単純な表では、th要素だけでも十分と説明しています。それでもscopeを付ければ、見出しが行と列のどちらへ対応するかをHTMLに直接記述できます。表示位置から推測させず、役割を明示するために使います。

thead要素はth要素の代わりにならない

thead要素は、表の見出し部分となる行をまとめます。th要素は、個々のセルが見出しであることを示します。名前は似ていますが、役割は別です。

先頭行をthead要素へ入れても、その中のセルがtd要素なら、セル自体はデータです。列見出しとなるセルにはth scope="col"を使います。tbody要素へ入れた行でも、先頭セルが行見出しならth scope="row"を使えます。

caption要素は表全体の題名を示す

caption要素は、表全体の内容を短く示す題名です。th要素は、行や列にある個々のデータの見出しです。表に題名を付けても、各データと見出しの対応までは示せません。

<table>
  <caption>表の内容を示す題名</caption>
  <tr>
    <th scope="col">項目</th>
    <th scope="col">値</th>
  </tr>
  <tr>
    <th scope="row">項目A</th>
    <td>値A</td>
  </tr>
</table>

表全体にはcaption、列と行の見出しにはthとscopeを使い、役割を重ねません。