＜th要素＞ - テーブルのヘッダーセル

公開日: 2017/02/09

th要素は、テーブルのヘッダーセル(キーとなる項目)を表す要素です。tr要素のこ要素として配置することができます。

概要

名前

th (Table header cell)

カテゴリー

なし。

配置できる場所

tr要素の子要素として配置すること。

コンテンツモデル

Flow content。ただし、header要素、footer要素、Sectioning content、Heading contentの祖先となってはいけない。

タグの省略

別のtd要素、またはth要素が後に続く場合、終了タグを省略できる。

または、親要素にこれ以上コンテンツがない場合、終了タグを省略できる。

DOM Interface

HTMLTableCellElement

デフォルトのスタイル

th {
	font-weight: bold;
	text-align: -internal-center;
	display: table-cell;
	vertical-align: inherit;
}

仕様書

https://html.spec.whatwg.org/multipage/tables.html#the-th-element

属性

colspan

またがる列の数。

デモを見る

rowspan

またがる行の数。

デモを見る

headers

このセルを関連付けるヘッダーセルを、ヘッダーセルのidで指定する。複数ある場合は半角スペース( )で区切る。

scope

このヘッダーセルが、他のセルにどのように関連しているかをキーワードで指定する。列挙属性で、欠損値はauto。

row: 同じ行の、全てのセルに関与する。
col: 同じ列の、全てのセルに関与する。
rowgroup: 同じ行の、後続のセルにだけ関与する。
colgroup: 同じ列の、後続のセルにだけ関与する。
auto: ブラウザの解釈に任せる。

abbr

ヘッダーセルの略語、または別の言い回しを指定する。例えば音声ソフトによっては、abbr属性があるとその値を優先して読み上げる。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

基本的な使い方

th要素の使い方は基本的にtd要素と同じです。ヘッダーセルとなる項目だけ、td要素ではなく、th要素でマークアップしましょう。

HTML

<table>
	<!-- 1つ目の行 -->
	<tr>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

デモを開く

scope属性とは？

scope属性は、ユーザーエージェントにテーブルのヘッダーセルが、どのセルにかかっているのか、ヒントを与えるための属性です。例えば、下記のテーブルでは、3行目のIDが何らかの理由で存在しないため、名前(高橋)を表すヘッダーセルは、後続(右側)のセルにだけ関与していることをscope属性で示しています。この例ではあえて指定していますが、テーブルがよほど複雑な構造でない限り、この属性を使う必要はないと思います。

HTML

<table>
	<!-- 1行目 -->
	<tr>
		<th>ID</th>
		<th>名前</th>
		<th>打率</th>
		<th>順位</th>
	</tr>

	<!-- 2行目 -->
	<tr>
		<td>1</td>
		<th>山田</th>
		<td>.336</td>
		<td>1</td>
	</tr>

	<!-- 3行目 -->
	<tr>
		<td></td>
		<th scope="rowgroup">高橋</th>
		<td>.321</td>
		<td>2</td>
	</tr>

	<!-- 4行目 -->
	<tr>
		<td>3</td>
		<th>新井</th>
		<td>.287</td>
		<td>8</td>
	</tr>
</table>

デモを開く

abbr属性とは？

abbr属性は、ヘッダーセルの略語、または別の言い回しを指定するための属性です。例えば、音声ソフトでテーブルを読み上げる場合、ソフトによっては「〜行目の〜(ヘッダーセル)は〜(セル)」と毎回読み上げます。この時、ヘッダーセルが長たらしい名称だったら読者は苦痛になるでしょう。この属性を指定しておくと、ソフトが代わりにこちらを読み上げてくれるかもしれません。

HTML

<table>
	<!-- 1行目 -->
	<tr>
		<th>名前</th>
		<th abbr="HTML">HyperText Markup Language</th>
		<th>JavaScript</th>
	</tr>

	<!-- 2行目 -->
	<tr>
		<th>山田</th>
		<td>得意</td>
		<td>不得意</td>
	</tr>

	<!-- 3行目 -->
	<tr>
		<th>高橋</th>
		<td>不得意</td>
		<td>得意</td>
	</tr>
</table>

デモを開く

列をまたがる

colspan属性に数値を指定すると、その数だけ後の列にまたがることができます。またがった数だけ、後続のセルを省略しましょう。

HTML

<table>
	<!-- 1つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<th>AAA</th>
		<td>BBB</td>
		<td>CCC</td>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<th colspan="2">DDD</th>
		
		<td>FFF</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<th>GGG</th>
		<td>HHH</td>
		<td>III</td>
	</tr>
</table>

デモを開く

行をまたがる

rowspan属性に数値を指定すると、その数だけ後の行にまたがることができます。またがった数だけ、後続の行にあるセルを省略しましょう。

HTML

<table>
	<!-- 1つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		<th rowspan="3">AAA</th>
		<th>BBB</th>
		<th>CCC</th>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		
		<td>EEE</td>
		<td>FFF</td>
	</tr>

	<!-- 3つ目の行 -->
	<tr>
		<!-- 3個分のセル -->
		
		<td>HHH</td>
		<td>III</td> 
	</tr>
</table>

デモを開く

headers属性とは？

headers属性に別のth要素のidを指定すると、このセルが、対象のヘッダーセルに対応したセルであることを示せます。複数指定するには半角スペース( )で区切ります。表示には影響がありません。コードを解釈するユーザーエージェント向けの属性です。表が複雑な構造になった時に指定すればよく、通常は必要ありません。

HTML

<table>
	<tr>
		<th id="syncer">ID</th>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<tr>
		<th headers="syncer">1</th>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<tr>
		<th headers="syncer">2</th>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜th要素＞ - テーブルのヘッダーセル</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/th/">
		<style>
			body {
				background-color: #fff ;
			}

			table, th, td {
				border: 1px solid #000 ;
			}
		</style>
	</head>
	<body>

<p>th要素は、テーブルのヘッダーセルを表す要素です。使い方はtd要素とほぼ同じです。キーとなる項目をマークアップしましょう。</p>

<table>
	<tr>
		<th>ID</th>
		<th>名前</th>
		<th>色</th>
		<th>種類</th>
	</tr>

	<tr>
		<th id="id-1">1</th>
		<td>リンゴ</td>
		<td>赤</td>
		<td>果物</td>
	</tr>

	<tr>
		<th>2</th>
		<td>キャベツ</td>
		<td>緑</td>
		<td>野菜</td>
	</tr>
</table>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/650/"> <meta charset="utf-8"> <title>【デモ】＜th要素＞ - テーブルのヘッダーセル</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/th/"> </head> <body>

<p>th要素は、テーブルのヘッダーセルを表す要素です。使い方はtd要素とほぼ同じです。キーとなる項目をマークアップしましょう。</p> <table> <tr> <th>ID</th> <th>名前</th> <th>色</th> <th>種類</th> </tr> <tr> <th id="id-1">1</th> <td>リンゴ</td> <td>赤</td> <td>果物</td> </tr> <tr> <th>2</th> <td>キャベツ</td> <td>緑</td> <td>野菜</td> </tr> </table>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } table, th, td { border: 1px solid #000 ; }

</style>

</script>