scopeとは何か?

scopeは、英語で「範囲、視野」などを意味する単語です。HTMLでは、テーブルの見出し「th」がどの方向に対してのものかを表す時に使います。縦方向になる場合は「scope=”col”」、横方向になる場合は「scope=”row”」と書きます。

横方向(行)に対しての見出しの場合

例えば、以下のような表組みの場合。

1位 埼玉県
2位 神奈川県
3位 茨城県

この場合は、横(行)に対しての見出しになるので「scope=”row”」になります。コードで書くと、

<table>
	<tr>
		<th scope="row">1位</th>
		<td>埼玉県</td>
	</tr>
	<tr>
		<th scope="row">2位</th>
		<td>神奈川県</td>
	</tr>
	<tr>
		<th scope="row">3位</th>
		<td>茨城県</td>
	</tr>
</table>

です。「ぎょう(行)=ロー」。発音が似ているので覚えやすいですね。

縦方向(列)に対しての見出しの場合

次は、縦方向の見出しがある表組みの場合です。

はい いいえ
99% 1%

この場合は縦(列)に対しての見出しなので、「scope=”col”」になります。こちらのコードは、

<table>
	<tr>
		<th scope="col">はい</th>
		<th scope="col">いいえ</th>
	</tr>
	<tr>
		<td>99%</td>
		<td>1%</td>
	</tr>
</table>

となります。2列や3列のサイトを作ったことがある人なら「カラム=column」なんて言葉を目や耳にしたことがありますよね。それと紐付けて覚えておくと、次からはスグに頭に思い浮かぶかも。

発展編

今度は、以下のような構成の場合です。

パスタ消費量 1位 埼玉県
2位 神奈川県
3位 茨城県

構成としては「1位」「2位」「3位」が『パスタ消費量』という行グループに属している形ですね。この場合は、『パスタ消費量』には「scope=”rowgroup”」という行グループを表すコードを記述します。その他の個所はさきほどと同じです。

<table>
	<tr>
		<th rowspan="3" scope="rowgroup">パスタ巻いてる?</th>
		<th scope="row">1位</th>
		<td>埼玉県</td>
	</tr>
	<tr>
		<th scope="row">2位</th>
		<td>神奈川県</td>
	</tr>
	<tr>
		<th scope="row">3位</th>
		<td>茨城県</td>
	</tr>
</table>

続いて、以下のような縦(列)方向の場合。

パスタ巻いてる?
はい いいえ
99% 1%

この場合は『パスタ巻いてる?』というグループに「はい」「いいえ」が属している構成です。なので、

<table>
	<tr>
		<th colspan="2" scope="colgroup">パスタ巻いてる?</th>
	</tr>
	<tr>
		<th scope="col">はい</th>
		<th scope="col">いいえ</th>
	</tr>
	<tr>
		<td align="center">99%</td>
		<td align="center">1%</td>
	</tr>
</table>

となります。理屈が分かれば、というか、どちらが「col」「row」なのかが覚えられれば簡単ですよね。