このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

td”要素~“headers”属性

記事Jun. 3rd,2015
July 22nd,2020
セルに関連付ける見出しを指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

headers”属性について

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

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

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

指定できる値

属性値 説明
ID名 関連づける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 headers="name" id="skytree">東京スカイツリー</th>
<td colspan="2" headers="skytree jpn pref">1</td>
<td headers="skytree height">634.0m</td>
</tr>
<tr>
<th headers="name" id="omega">対馬オメガ局</th>
<td headers="omega jpn">2</td>
<td headers="omega pref">1</td>
<td headers="omega height">454.8m</td>
</tr>
<tr>
<th headers="name" id="iwo">硫黄島ロラン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 headers="name" id="minamitori">南鳥島ロランC局(初代)</th>
</tr>
<tr>
<th headers="name" id="tokyo">東京タワー</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
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク