Tableタグ、th=scope | choco

choco

Design,Photo

DreamweaverCS4から、表組みをつくるときデフォルトで、thタグにscope属性がはいるようになった。

thは見出しのセルを表すが、

これに対応するtd(データセル)が列方向(下方向)か行方向(右方向)かを表す。


th scope="col":下方向

th scope="row":右方向


例えば以下のような表組みがあったとする。


平成20年 平成21年
321 223
356 210


<table>
<tr>
<td></td>
<th scope="col">平成20年</th>
<th scope="col">平成21年</th>
</tr>
<tr>
<th scope="row">男</th>
<td>321</td>
<td>223</td>
</tr>
<tr>
<th scope="row">女</th>
<td>356</td>
<td>210</td>
</tr>
</table>



「平成20年」のth(見出し用セル)は、「scope="col"」がはいっており、

見出しに対応するtd(データ用セル)は列方向(下方向)ですよいう意味を表している。


「男」のthは、「scope="row"」がはいっており、

見出しに対応するtdは行方向(右方向)ですよいう意味を表している。


ビジュアルウェブブラウザでみれば、thとtdの対応は一目瞭然だが、

音声読み上げブラウザなどのビジュアル環境でない閲覧環境だと

scope属性で指定するとデータ構造がはっきりして、アクセシブルなサイトになる。


このあたりの議論はアクセシビリティといわれる分野である。

特に大手企業や自治体のサイトの場合、

アクセシビリティを配慮したサイト制作が求められる。