<td headers=""></td>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 tr要素の子要素として
内容 フロー・コンテンツ

td要素headers="" を追加すると、そのセルに対応する見出しセルを指定することができます。

  • この属性はth要素でも同じように指定することができます。
  • この属性で示された情報は、非視覚系のブラウザ(音声ブラウザ等)で役立てられることになります。

<td headers="c1">データセル</td>

属性
任意属性
headers="" 対応する見出しセル ID名 見出しセルのID名、半角スペース区切りで複数指定可能

headers属性を指定することで、そのセルがどの見出しに対するデータなのかを明確に示すことができます。

  • この属性を使用する場合は、見出しのセルにid属性を指定しておく必要があります。

次の例では、単純な表にheaders属性を使用しています。例えばデータセルB-2r2 c2 は、そのセルが見出しセルB見出しセル2のデータであることを示しています。

<table>
<tr>
<td></td>
<th id="c1">見出しセル1</th>
<th id="c2">見出しセル2</th>
<th id="c3">見出しセル3</th>
</tr>
<tr>
<th id="r1">見出しセルA</th>
<td headers="r1 c1">データセルA-1</td>
<td headers="r1 c2">データセルA-2</td>
<td headers="r1 c3">データセルA-3</td>
</tr>
<tr>
<th id="r2">見出しセルB</th>
<td headers="r2 c1">データセルB-1</td>
<td headers="r2 c2">データセルB-2</td>
<td headers="r2 c3">データセルB-3</td>
</tr>
<tr>
<th id="r3">見出しセルC</th>
<td headers="r3 c1">データセルC-1</td>
<td headers="r3 c2">データセルC-2</td>
<td headers="r3 c3">データセルC-3</td>
</tr>
</table>
  • 上記のようにシンプルな表の場合には、scope属性を使用した方が便利です。

scope属性との使い分けについて

scope属性とheaders属性は、その設定方法が異なるだけで、どちらも同じ機能を持っています。(見出しとデータセルとを関連付けます)

scope属性
th要素に指定するだけなので、簡単に設定することができます。単純な表の場合には、こちらの属性を使用した方が良いでしょう。
headers属性
設定には手間がかかりますが、scope属性では対応できない複雑な表の場合には、こちらの属性を使用することになります。

使用例

  • 以下の例では、次のスタイルシートを指定して表の境界線を表示しています。
-----
table, th, td {
border: 1px #000000 solid;
}
-----

<table>

<caption>上半期 販売数</caption>

<thead>
<tr>
<th id="items" rowspan="2">品目</th>
<th id="month1">1月</th>
<th id="month2">2月</th>
<th id="month3">3月</th>
</tr>
<tr>
<th id="month4">4月</th>
<th id="month5">5月</th>
<th id="month6">6月</th>
</tr>
</thead>

<tbody>
<tr>
<th id="item1" headers="items" rowspan="2">商品A</th>
<td headers="item1 month1">100,000</td>
<td headers="item1 month2">120,000</td>
<td headers="item1 month3">110,000</td>
</tr>
<tr>
<td headers="item1 month4">130,000</td>
<td headers="item1 month5">140,000</td>
<td headers="item1 month6">150,000</td>
</tr>
<tr>
<th id="item2" headers="items" rowspan="2">商品B</th>
<td headers="item2 month1">200,000</td>
<td headers="item2 month2">220,000</td>
<td headers="item2 month3">210,000</td>
</tr>
<tr>
<td headers="item2 month4">230,000</td>
<td headers="item2 month5">240,000</td>
<td headers="item2 month6">250,000</td>
</tr>
</tbody>

</table>

表示例
上半期 販売数
品目 1月 2月 3月
4月 5月 6月
商品A 100,000 120,000 110,000
130,000 140,000 150,000
商品B 200,000 220,000 210,000
230,000 240,000 250,000