<td headers=""></td>
<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属性を使用した方が便利です。
headers属性とscope属性は同じ機能を持ちます（見出しとデータセルとを関連付けます）。複雑な表の場合（個別に関連付ける場合）はheaders属性を使用し、単純な表の場合（一括で関連付ける場合）はscope属性を使用します。
使用例
■縦列と横列を同時に関連付けた例
<table border="3">
<tr>
<th></th>
<th id="t1">見出しセル1</th>
<th id="t2">見出しセル2</th>
<th id="t3">見出しセル3</th>
</tr>
<tr>
<th id="s1">見出しセルA</th>
<td headers="s1 t1">データセルA-1</td>
<td headers="s1 t2">データセルA-2</td>
<td headers="s1 t3">データセルA-3</td>
</tr>
<tr>
<th id="s2">見出しセルB</th>
<td headers="s2 t1">データセルB-1</td>
<td headers="s2 t2">データセルB-2</td>
<td headers="s2 t3">データセルB-3</td>
</tr>
<tr>
<th id="s3">見出しセルC</th>
<td headers="s3 t1">データセルC-1</td>
<td headers="s3 t2">データセルC-2</td>
<td headers="s3 t3">データセルC-3</td>
</tr>
</table>
表示例
| 見出しセル1 | 見出しセル2 | 見出しセル3 | |
|---|---|---|---|
| 見出しセルA | データセルA-1 | データセルA-2 | データセルA-3 |
| 見出しセルB | データセルB-1 | データセルB-2 | データセルB-3 |
| 見出しセルC | データセルC-1 | データセルC-2 | データセルC-3 |
※このように単純な表の場合は、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 |
- サイト内検索
