<th> 表(テーブル)の見出しとなるセルを作成

取り扱い 現行の標準
カテゴリ なし
親にできる要素 <tr>
子にできる要素 フロー・コンテンツ。ただし、セクショニング・コンテンツ、ヘッディング・コンテンツを除く。
対応ブラウザ caniuseで確認

<th>タグの説明

<th>は、表(テーブル)の見出しとなるヘッダーセルを作成する場合に使用します。ヘッダーはデータの集合体である表の列あるいは行を代表する項目を表します。通常のセルを作る場合は、<td>を採用して下さい。

テーブルの作成は、以下の流れで行います。

  1. まず<table>で表の作成を開始
  2. 必要であれば<caption>を配置
  3. <tr>で表の行(横軸)を定義
  4. 見出しのセルが必要な場合は<th>を配置
  5. <td>でセルとデータを作成
  6. 必要に応じて<thead>を配置
  7. 必要に応じて<tbody>を配置
  8. 必要に応じて<tfoot>を配置
  9. 列をグループ化する場合<colgroup>を配置
  10. 列に対して一括で属性を指定する場合<col>を配置

<th>タグの特徴

  • テーブルの見出しに該当するセルを作成します。必ず<tr>の中に配置しなければなりません。
  • CSSのdisplayは、既定値でtable-cellが適用されます。
  • 視覚的な効果としてセルにボーダー(枠線)が付きます。結果としてセルの集合体であるテーブルは、格子状の表を映します。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<th>に指定できる主な属性

abbr
セルの内容に関する簡単な説明を指定できます。
colspan
表を構成するセルの横何行個分に相当するのかを整数で指定します。
rowspan
表を構成するセルの縦何列個分に相当するのかを整数で指定します。
scope
見出しの対象となるセルを定義します。
  • auto:既定値です。省略した場合はこの値が採用されます。
  • row:見出しは、同じ行に属するセルを対象にします。
  • col:見出しは、同じ列に属するセルを対象にします。
  • rowgroup:見出しは、行のグループに属するセルを対象にします。
  • colgroup:見出しは、列のグループに属するセルを対象にします。
headers
このセルに当てはめる<th>id属性を指定します。
align(非推奨)
セル内容の水平方向の表示位置を指定します。スタイルシートを使って下さい。
valign(非推奨)
セル内容の垂直方向に対する表示位置を指定します。スタイルシートを使って下さい。
width(非推奨)
テーブルセルの幅を指定します。スタイルシートを使って下さい。
height(非推奨)
テーブルセルの高さを指定します。スタイルシートを使って下さい。
border(非推奨)
枠線(ボーダー)の太さを指定します。0を指定すると枠線が非表示になります。
bordercolor(非推奨)
枠線(ボーダー)の色を指定します。スタイルシートを使って下さい。
bgcolor(非推奨)
背景色を指定します。スタイルシートを使って下さい。
background(非推奨)
背景画像を指定します。スタイルシートを使って下さい。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<th>の使い方とサンプル

<th>を使う場合の最も基本的な例です。以下の例では、見出しの方向を明示せずにブラウザの自動的な解釈に任せます。この場合、scope属性の値はautoの扱いになります。

表示確認
HTML
<table>
	<caption>列に対する見出し</caption>
	<tr>
		<th>項目A</th>
		<th>項目B</th>
		<th>項目C</th>
	</tr>
	<tr>
		<td>A-1</td>
		<td>B-1</td>
		<td>C-1</td>
	</tr>
	<tr>
		<td>A-2</td>
		<td>B-2</td>
		<td>C-2</td>
	</tr>
</table>

列方向の見出しであることを明示する

続いて、見出しに対応するセルの方向を明確にする方法です。scope属性の値にcolを指定すると、その見出しは列方向つまり垂直に並ぶセルの見出しを表すことになります。

表示確認
HTML
<table>
	<caption>列に対する見出し</caption>
	<tr>
		<th scope="col">項目A</th>
		<th scope="col">項目B</th>
		<th scope="col">項目C</th>
	</tr>
	<tr>
		<td>A-1</td>
		<td>B-1</td>
		<td>C-1</td>
	</tr>
	<tr>
		<td>A-2</td>
		<td>B-2</td>
		<td>C-2</td>
	</tr>
</table>

行方向の見出しであることを明示する

次の内容では、行方向つまり水平に並ぶセルに対して見出しを与えています。この場合、<th><td>の配置が変化する点に注意して下さい。

表示確認
HTML
<table>
	<caption>行に対する見出し</caption>
	<tr>
		<th scope="row">項目A</th>
		<td>A-1</td>
		<td>A-2</td>
	</tr>
	<tr>
		<th scope="row">項目B</th>
		<td>B-1</td>
		<td>B-2</td>
	</tr>
	<tr>
		<th scope="row">項目C</th>
		<td>C-1</td>
		<td>C-2</td>
	</tr>
</table>

複数のセルを結合する方法

複数のセルを結合する場合は、colspan属性やrowspan属性を使います。この値に指定した整数が結合するセルの数を表します。セルを結合する場合、その後に続くセルの数を合わせる必要があります。

以下の例では、セルを結合した箇所が分かるように背景色を変えています。加えて、除外したセルの箇所が分かるようにコメントを添えています。

表示確認
HTML
<table>
	<tr>
		<th>項目</th>
		<th colspan="2">内容</th>
		<!-- 結合した分のセルを減らす -->
	</tr>
	<tr>
		<td>セルA1</td>
		<td>セルB1</td>
		<td>セルC1</td>
	</tr>
	<tr>
		<td rowspan="2">セルA2</td>
		<td>セルB2</td>
		<td>セルC2</td>
	</tr>
	<tr>
		<!-- 結合した分のセルを減らす -->
		<td>セルB3</td>
		<td>セルC3</td>
	</tr>
</table>

<th>に関連するHTMLタグ

表(テーブル)を作成する要素
<table> 表(テーブル)を作成する
<caption> 表(テーブル)にキャプションを付ける
<col> 表(テーブル)の縦列の属性をまとめて指定する
<colgroup> 表(テーブル)の縦列をグループ化する
<tr> 表(テーブル)の横一行を定義する
<th> 表(テーブル)の見出しとなるセルを作成する
<td> 表(テーブル)のセルを作成する
<thead> 表(テーブル)のヘッダー行を定義する
<tbody> 表(テーブル)の本体部分を定義する
<tfoot> 表(テーブル)のフッター行を定義する