“th”要素~“scope”属性

“scope”属性について

“scope”属性は見出しセルが対象とするセルを指定します。

“scope”属性を省略した場合の既定値は自動で対象範囲を判定する“auto”です。

“rowspan”属性や“colspan”属性を使用した複雑な表では“headers”属性と“id”属性で直接見出しセルとセルを結びつけることもできます。

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

指定できる値

サンプルコード

行方向と列方向に対する見出し

<table>

<caption>予選結果<caption>
<tr>

<th>Aグループ</th>
<th scope="col">シャラコビッチ</th>
<th scope="col">フェデアムズ</th>
<th scope="col">ニシコレール</th>
<th scope="col">勝ち</th>
<th scope="col">負け</th>

</tr>
<tr>

<th scope="row">シャラコビッチ</th>
<td>***</td>
<td>0-3</td>
<td>2-3</td>
<td>0</td>
<td>2</td>

</tr>
<tr>

<th scope="row">フェデアムズ</th>
<td>3-0</td>
<td>***</td>
<td>1-3</td>
<td>1</td>
<td>1</td>

</tr>
<tr>

<th scope="row">ニシコレール</th>
<td>3-2</td>
<td>3-1</td>
<td>***</td>
<td>2</td>
<td>0</td>

</tr>

</table>

予選結果

Aグループ	シャラコビッチ	フェデアムズ	ニシコレール	勝ち	負け
シャラコビッチ	***	0-3	2-3	0	2
フェデアムズ	3-0	***	1-3	1	1
ニシコレール	3-2	3-1	***	2	0

行グループに対する見出し

<table>

<colgroup span="3"></colgroup>
<colgroup span="1"></colgroup>
<colgroup span="2"></colgroup>
<thead>

<tr>

<th colspan="3" scope="colgroup">名前</th>
<th colspan="1" scope="colgroup">分類</th>
<th colspan="2" scope="colgroup">特徴</th>

</tr>
<tr>

<th>かな</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>

</tr>

</thead>
<tbody>

<tr>

<td>りんご</td>
<td>林檎</td>
<td>apple</td>
<td>バラ科リンゴ属</td>
<td>あおもり</td>
<td>あか</td>

</tr>
<tr>

<td>いちご</td>
<td>苺</td>
<td>strawberry</td>
<td>バラ科オランダイチゴ属</td>
<td>とちぎ</td>
<td>あか</td>

</tr>
<tr>

<td>もも</td>
<td>桃</td>
<td>peach</td>
<td>バラ科モモ属</td>
<td>やまなし</td>
<td>もも</td>

</tr>

</tbody>
<tfoot>

<tr>

<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>

</tr>

</tfoot>

</table>

名前			分類	特徴
かな	漢字	英語	分類	産地	果実の色
りんご	林檎	apple	バラ科リンゴ属	あおもり	あか
いちご	苺	strawberry	バラ科オランダイチゴ属	とちぎ	あか
もも	桃	peach	バラ科モモ属	やまなし	もも
名前	漢字	英語	分類	産地	果実の色

“colgroup”要素でグループ化した列グループのセルを対象とした見出しを表します。

列グループに対する見出し

<table>

<thead>

<tr>

<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>

</tr>

</thead>
<tbody>

<tr>

<th colspan="6" scope="rowgroup">果物</th>

</tr>
<tr>

<td>りんご</td>
<td>林檎</td>
<td>apple</td>
<td>バラ科リンゴ属</td>
<td>あおもり</td>
<td>あか</td>

</tr>
<tr>

<td>いちご</td>
<td>苺</td>
<td>strawberry</td>
<td>バラ科オランダイチゴ属</td>
<td>とちぎ</td>
<td>あか</td>

</tr>
<tr>

<td>もも</td>
<td>桃</td>
<td>peach</td>
<td>バラ科モモ属</td>
<td>やまなし</td>
<td>もも</td>

</tr>

</tbody>
<tbody>

<tr>

<th colspan="6" scope="rowgroup">野菜</th>

</tr>
<tr>

<td>ピーマン</td>
<td>甘唐辛子</td>
<td>bell pepper</td>
<td>ナス科トウガラシ属</td>
<td>みやざき</td>
<td>みどり</td>

</tr>
<tr>

<td>なす</td>
<td>茄子</td>
<td>eggplant</td>
<td>ナス科ナス属</td>
<td>こうち</td>
<td>むらさき</td>

</tr>

</tbody>
<tfoot>

<tr>

<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>

</tr>

</tfoot>

</table>

名前	漢字	英語	分類	産地	果実の色
果物
りんご	林檎	apple	バラ科リンゴ属	あおもり	あか
いちご	苺	strawberry	バラ科オランダイチゴ属	とちぎ	あか
もも	桃	peach	バラ科モモ属	やまなし	もも
野菜
ピーマン	甘唐辛子	bell pepper	ナス科トウガラシ属	みやざき	みどり
なす	茄子	eggplant	ナス科ナス属	こうち	むらさき
名前	漢字	英語	分類	産地	果実の色

“tbody”要素でグループ化した行グループのセルを対象とした見出しを表します。