caption要素

caption要素は、表(テーブル)のタイトルを表す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト table要素内の1つ目の子要素として使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。
ただし、table要素を子孫要素に持つことはできない。
属性 グローバル属性
ブラウザ対応

要点

  • caption要素は、親要素がtable要素であれば、表のタイトルを表す要素である。
  • caption要素は、table要素1つ目の子要素として配置する。
  • ほとんどのブラウザは、caption要素内のテキストを、表の上中央に表示する。
  • figure要素の子要素が、figcaption要素table要素だけの場合、caption要素を省略する。

サンプルコード

表のタイトルを指定

<table>
	<caption>表のタイトル</caption>
	<tr>
		<th>見出しセル</th>
		<th>見出しセル</th>
		<th>見出しセル</th>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

figure要素の子要素が、figcaption要素とtable要素だけのとき

figure要素の子要素が、figcaption要素table要素だけの場合、caption要素を省略する。

<figure>
	<figcaption>表のタイトル</figcaption>
	<table>
		<tr>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</table>
</figure>

サンプル

表のタイトルを指定

HTMLソースコード
<table border="1">
	<caption>表のタイトル</caption>
	<tr>
		<th>見出しセル</th>
		<th>見出しセル</th>
		<th>見出しセル</th>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>
実際の表示
表のタイトル
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル

表タイトル付加、及び、グループ分け

HTMLソースコード
<table border="1">
	<caption style="background-color: red">表のタイトル</caption>
	<colgroup span="1" style="background-color: lime"></colgroup>
	<colgroup span="2" style="background-color: aqua"></colgroup>
	<colgroup span="2" style="background-color: silver"></colgroup>
	<thead style="background-color: fuchsia">
		<tr>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
			<th>見出しセル</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot style="background-color: yellow">
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tfoot>
</table>
実際の表示
表のタイトル
見出しセル 見出しセル 見出しセル 見出しセル 見出しセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル