<caption> 表(テーブル)にタイトルを付ける

取り扱い 現行の標準
カテゴリ なし
親にできる要素 <table>
子にできる要素 なし
対応ブラウザ caniuseで確認

<caption>タグの説明

<caption>は、表(テーブル)にタイトルを付ける場合に使用します。このタグの記述個所は、<table>要素の開始直後です。

表(テーブル)の基本的な作成方法は、<table><tr><td>を参照して下さい。

<caption>タグの特徴

  • この要素は<table>の直後にのみ配置できます。
  • レイアウトの初期値は、マークアップの順序通り表の上部に配置されます。キャプションの位置を変えたい場合は、CSS(スタイルシート)caption-sideプロパティを適用して下さい。
  • 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。

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

グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。
align(非推奨)
横軸の表示位置を指定します。
valign(非推奨)
縦軸の表示位置を指定。

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

テーブルにキャプションを追加する場合、以下のようなマークアップになります。

HTML
<table>
	<caption>キャプションを配置</caption>
	<tr>
		<th colspan="2">表(テーブル)の見出し</th>
	</tr>
	<tr>
		<td>セルA-1</td>
		<td>セルB-1</td>
	</tr>
	<tr>
		<td>セルA-2</td>
		<td>セルB-2</td>
	</tr>
	<tr>
		<td>セルA-3</td>
		<td>セルB-3</td>
	</tr>
</table>
表示確認
キャプションを配置
表(テーブル)の見出し
セルA-1 セルB-1
セルA-2 セルB-2
セルA-3 セルB-3

この表は見やすくするためにCSSで装飾しています。キャプション自体に装飾を施したり、表示位置を変更することも可能です。

HTML
<table>
	<caption style="caption-side:bottom; background:#FF9900;">キャプションを下に配置</caption>
	<tr>
		<th colspan="2">表(テーブル)の見出し</th>
	</tr>
	<tr>
		<td>セルA-1</td>
		<td>セルB-1</td>
	</tr>
	<tr>
		<td>セルA-2</td>
		<td>セルB-2</td>
	</tr>
	<tr>
		<td>セルA-3</td>
		<td>セルB-3</td>
	</tr>
</table>
表示確認
キャプションを下に配置
表(テーブル)の見出し
セルA-1 セルB-1
セルA-2 セルB-2
セルA-3 セルB-3

<caption>に関連するHTMLタグ

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