“th”要素~“headers”属性

“headers”属性について

“headers”属性はセルに関連付ける見出しを指定します。

“headers”属性の値にはセルに関連付ける見出しセルを表す“th”要素の“id”属性の値を指定します。複数の見出しセルに関連付けられる場合は空白文字で区切って複数の値を指定できます。

通常の視覚系ブラウザでの表示には影響しませんが、音声ブラウザなどの二次元で表を表示できない環境で見出しセルとデータを正しく結びつけるのに役立ちます。

指定できる値

値は空白文字で区切って複数指定できます。

サンプルコード

<table>

<thead style=" background-color: rgb(218,193,171);">

<tr>

<th rowspan="2" id="name">名前</th>
<th colspan="2" id="rank">順位</th>
<th rowspan="2" id="height">高さ</th>

</tr>
<tr>

<th headers="rank" id="jpn">全国</th>
<th headers="rank" id="pref">都道府県</th>

</tr>

</thead>
<tbody style=" background-color: rgb(221,231,197);">

<tr>

<th id="skytree" headers="name">東京スカイツリー</th>
<td colspan="2" headers="skytree jpn pref">1</td>
<td headers="skytree height">634.0m</td>

</tr>
<tr>

<th id="omega" headers="name">対馬オメガ局</th>
<td headers="omega jpn">2</td>
<td headers="omega pref">1</td>
<td headers="omega height">454.8m</td>

</tr>
<tr>

<th id="iwo" headers="name">硫黄島ロランC主局(2代)</th>
<td rowspan="2" headers="iwo minamitori jpn">3</td>
<td rowspan="2" headers="iwo minamitori pref">2</td>
<td rowspan="2" headers="iwo minamitori height">411.5m</td>

</tr>
<tr>

<th id="minamitori" headers="name">南鳥島ロランC局(初代)</th>

</tr>
<tr>

<th id="tokyo" headers="name">東京タワー</th>
<td headers="tokyo jpn">5</td>
<td headers="tokyo pref">4</td>
<td headers="tokyo height">332.6m</td>

</tr>

</tbody>

</table>

名前	順位		高さ
	全国	都道府県
東京スカイツリー	1		634.0m
対馬オメガ局	2	1	454.8m
硫黄島ロランC主局(2代)	3	2	411.5m
南鳥島ロランC局(初代)
東京タワー	5	4	332.6m