HTML

The <caption> element is an HTML element used to add a title to a table.

caption 要素

　caption要素は、テーブルのタイトルを表すために使用されます。これは、テーブルの上部に表示され、テーブルの内容についての簡単な説明を提供します。

　以下は、caption要素を使用してテーブルにタイトルを付ける方法の例です。

<table>
	<caption>注文履歴</caption>
	<thead>
		<tr>
			<th>注文番号</th>
			<th>商品名</th>
			<th>数量</th>
			<th>金額</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>001</td>
			<td>りんご</td>
			<td>2</td>
			<td>200円</td>
		</tr>
		<tr>
			<td>002</td>
			<td>バナナ</td>
			<td>3</td>
			<td>300円</td>
		</tr>
	</tbody>
</table>

　この例では、caption要素を使用して "注文履歴" というテーブルのタイトルを設定しています。

　caption要素は、必ずしもテーブル内で最初に表示される必要はありません。テーブルのどこにでも配置することができますが、通常はテーブルの上に置かれます。

　caption要素には、テキスト以外にも HTML要素を含めることができます。これは、テーブルのタイトルに関連する図や表などを表示するために使用できます。

　以下は、画像を含む caption要素の例です。

<table>
	<caption>
		<img src="table_title.jpg" alt="注文履歴">
	</caption>
	<thead>
		<tr>
			<th>注文番号</th>
			<th>商品名</th>
			<th>数量</th>
			<th>金額</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>001</td>
			<td>りんご</td>
			<td>2</td>
			<td>200円</td>
		</tr>
		<tr>
			<td>002</td>
			<td>バナナ</td>
			<td>3</td>
			<td>300円</td>
		</tr>
	</tbody>
</table>

　この例では、img要素を使用してテーブルのタイトルに画像を表示しています。img要素には、画像の URLと代替テキストを指定する必要があります。代替テキストは、画像が表示できない場合に代わりに表示されるテキストです。

　caption要素は、テーブルのデザインにはほとんど影響を与えませんが、テーブルに関連する重要な情報を提供するために重要な要素です。また、アクセシビリティの観点からも重要です。caption要素を使用することで、スクリーンリーダーなどの補助技術を使用するユーザーがテーブルの内容をより理解しやすくなります。

　caption要素は、table要素の直下に配置する必要があります。複数の caption要素を同じテーブルに配置することはできません。

　また、caption要素は、テーブルの構造に影響を与えません。つまり、テーブルの列数や行数に合わせて自動的に配置されるわけではありません。テーブルの幅が小さくなって caption要素が見切れた場合は、CSSを使用して caption要素の表示を制御する必要があります。

　以下は、CSSを使用して caption要素の表示を制御する方法の例です。

caption {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}  

　この例では、caption要素に対して、フォントサイズ、フォントウェイト、テキストの配置、下部のマージンを設定しています。caption要素に対する CSSの設定は、デザインやレイアウトに応じて変更することができます。

caption要素の概要

　caption要素のコンテンツ・モデルは、フロー・コンテンツですので、生のテキストだけでなく、p要素や details要素や strong要素などを入れることもできます。ただし、caption要素の中に table要素を入れることはできません。

　また、figure要素の中に table要素だけを入れた場合、その table要素に caption要素を入れるべきではありません。この場合は、figcaption要素が caption要素の役割を果たします。

カテゴリー

なし

コンテンツ･モデル

フロー・コンテンツ。ただし、中に table要素を入れては行けません。

利用可能な場所

table要素の最初の子として

タグの省略

不可。開始と終了タグの両方が必要。

要素固有の属性

なし

標準的なスタイル

caption {
	display: table-caption;
}