【HTML】headers属性でヘッダーセルと関連付ける

このページについて

このページではHTMLのheaders属性の使い方を解説しています。

headers属性はtableタグの中で使用するthタグとtdタグをそれぞれ関連付ける時に使用する属性になります。

通常、データセルとヘッダーセルはそれぞれ「並んでいる」だけでidのようなもので関連付いているわけではありません。言うなれば全く無関係の隣人みたいなものです。それを関連付けることで、それぞれのセルの関係性を伝えるというのが、このheaders属性の役割となります。

ちなみにこの属性を使用しても見た目には何の変化もありません。主にスクリーンリーダを使用されている方向けに、音声アシストとして読み上げる際に利用されます。

headers属性はthタグやtdタグを関連付けるために使用されます。そのため以下のように、それぞれのidを書きます。

<table>
<tr><th id="parts" colspan="2">部品名</th></tr>
<tr><td headers="parts">○○</td><td headers="parts">××</td></tr>
</table>

まずthタグにて、id属性を付与します。中身は上のように何でもいいです。自分が分かれば。

次に、そのヘッダーセルと関連付けたいtdタグに対してheadersでidと同じものを指定します。上の例でいうとpartsですね。このように書くことでそれぞれのtdセルにthセルが関連付いたので、無関係の隣人ではなくなりました。