scope属性

th要素のscope属性は、見出しセル（th要素）の対象を指定する属性。

ブラウザ対応

構文

<th scope="対象"></th>

対象

  • row： 同じ行の見出しセルであることを示す。
  • col： 同じ列の見出しセルであることを示す。
  • rowgroup： 同じ行グループの見出しセルであることを示す。
  • colgroup： 同じ列グループの見出しセルであることを示す。
  • auto： 自動判定。初期設定値。

サンプルコード

scope="row"

同じ行（水平方向）のセルを対象とする。

<table border="1">
	<tr>
		<th scope="row">見出しセル</th>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<th scope="row">見出しセル</th>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

scope="col"

同じ列（垂直方向）のセルを対象とする。

<table border="1">
	<tr>
		<th scope="col">見出しセル</th>
		<th scope="col">見出しセル</th>
		<th scope="col">見出しセル</th>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

scope="rowgroup"

tbody要素で括った範囲など、同じ行のグループを対象とする。

<table border="1">
	<tbody>
		<tr>
			<th colspan="3" scope="rowgroup">見出しセル</th>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="3" scope="rowgroup">見出しセル</th>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
</table>

scope="colgroup"

colgroup要素でグループ化した範囲など、同じ列のグループを対象とする。

<table border="1">
		<colgroup span="2"></colgroup>
		<colgroup span="2"></colgroup>
		<tr>
			<th colspan="2" scope="colgroup">見出しセル</th>
			<th colspan="2" scope="colgroup">見出しセル</th>
		</tr>
		<tr>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
</table>

サンプル

scope="col"

HTMLソースコード
<table border="1">
	<tr>
		<th scope="col" style="background-color: lime">見出しセル</th>
		<th scope="col" style="background-color: aqua">見出しセル</th>
	</tr>
	<tr>
		<td style="background-color: lime">データセル</td>
		<td style="background-color: aqua">データセル</td>
	</tr>
	<tr>
		<td style="background-color: lime">データセル</td>
		<td style="background-color: aqua">データセル</td>
	</tr>
</table>
実際の表示
見出しセル 見出しセル
データセル データセル
データセル データセル

scope="row"

HTMLソースコード
<table border="1">
	<tr>
		<th scope="row" style="background-color: lime">見出しセル</th>
		<td style="background-color: lime">データセル</td>
		<td style="background-color: lime">データセル</td>
	</tr>
	<tr>
		<th scope="row" style="background-color: aqua">見出しセル</th>
		<td style="background-color: aqua">データセル</td>
		<td style="background-color: aqua">データセル</td>
	</tr>
</table>
実際の表示
見出しセル データセル データセル
見出しセル データセル データセル

scope="rowgroup"

HTMLソースコード
<table border="1">
	<tbody style="background-color: lime">
		<tr>
			<th colspan="3" scope="rowgroup">見出しセル</th>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tbody style="background-color: aqua">
		<tr>
			<th colspan="3" scope="rowgroup">見出しセル</th>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
</table>
実際の表示
見出しセル
データセル データセル データセル
データセル データセル データセル
見出しセル
データセル データセル データセル
データセル データセル データセル

scope="colgroup"

HTMLソースコード
<table border="1">
		<colgroup span="2" style="background-color: lime"></colgroup>
		<colgroup span="2" style="background-color: aqua"></colgroup>
		<tr>
			<th colspan="2" scope="colgroup">見出しセル</th>
			<th colspan="2" scope="colgroup">見出しセル</th>
		</tr>
		<tr>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
			<th scope="col">見出しセル</th>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
</table>
実際の表示
見出しセル 見出しセル
見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル
データセル データセル データセル データセル