<td headers=""></td>

ブラウザ 非視覚系のブラウザ向け
分類 ---
要素

td要素やth要素に headers="" を追加すると、関連する見出しセルを指定することができます。

この属性で示された情報は、音声ブラウザなどで役立てられることになります。


<td headers="t1">データセル</td>
属性 値 説明
headers="" ID名 見出しセルのID名を指定
  • headers属性の値（ID名）は、半角スペース区切りで複数指定することができます。

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

  • この属性を使用する場合は、見出しのセルにid属性を指定しておく必要があります。
<table border="3">
<tr>
<th id="t1">見出し1</th>
<th id="t2">見出し2</th>
<th id="t3">見出し3</th>
</tr>
<tr>
<td headers="t1">データ1-1</td>
<td headers="t2">データ2-1</td>
<td headers="t3">データ3-1</td>
</tr>
<tr>
<td headers="t1">データ1-2</td>
<td headers="t2">データ2-2</td>
<td headers="t3">データ3-2</td>
</tr>
</table>
見出し1 見出し2 見出し3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2

上記の例では、例えば見出し1とデータ1-1、データ1-2が関連付けられることになります。

  • 上記のようにシンプルな表の場合は、scope属性を使用した方が便利です。

使用例

縦列と横列を同時に関連付けた例

<table border="3">
<tr>
<th></th>
<th id="t1">見出し1</th>
<th id="t2">見出し2</th>
</tr>
<tr>
<th id="s1">見出しA</th>
<td headers="s1 t1">データA-1</td>
<td headers="s1 t2">データA-2</td>
</tr>
<tr>
<th id="s2">見出しB</th>
<td headers="s2 t1">データB-1</td>
<td headers="s2 t2">データB-2</td>
</tr>
<tr>
<th id="s3">見出しC</th>
<td headers="s3 t1">データC-1</td>
<td headers="s3 t2">データC-2</td>
</tr>
</table>
表示例
見出し1 見出し2
見出しA データA-1 データA-2
見出しB データB-1 データB-2
見出しC データC-1 データC-2
  • このように単純な表の場合は、scope属性でも同様の設定を行うことができます。
scope属性と組み合わせて使用した例

<table border="3">
<tr>
<th scope="col">見出し1</th>
<th scope="col">見出し2</th>
<th scope="col">見出し3</th>
</tr>
<tr>
<th id="s1">見出しA</th>
<th></th>
<th></th>
</tr>
<tr>
<td headers="s1">データA-1-1</td>
<td headers="s1">データA-2-1</td>
<td headers="s1">データA-3-1</td>
</tr>
<tr>
<td headers="s1">データA-1-2</td>
<td headers="s1">データA-2-2</td>
<td headers="s1">データA-3-2</td>
</tr>
<tr>
<th id="s2">見出しB</th>
<th></th>
<th></th>
</tr>
<tr>
<td headers="s2">データB-1-1</td>
<td headers="s2">データB-2-1</td>
<td headers="s2">データB-3-1</td>
</tr>
<tr>
<td headers="s2">データB-1-2</td>
<td headers="s2">データB-2-2</td>
<td headers="s2">データB-3-2</td>
</tr>
</table>
表示例
見出し1 見出し2 見出し3
見出しA
データA-1-1 データA-2-1 データA-3-1
データA-1-2 データA-2-2 データA-3-2
見出しB
データB-1-1 データB-2-1 データB-3-1
データB-1-2 データB-2-2 データB-3-2