印刷物では、表の上や下に表の番号やタイトル、表の説明がついています。この部分をキャプションといいます。HTMLでは、キャプションはテーブルと一緒に指定します。

キャプションをつける方法

テーブルにキャプションをつけるには、tableタグの後にキャプションを指定します。
captionタグでキャプションを指定できます。

<caption>~</caption>

タグの間に記述した内容が、キャプションとなります。
キャプションには、表の番号、タイトル、説明文などを入れることができます。
captionタグは、tableタグの直後、trタグの前に記述します。
※captionタグは、1つのtableタグに1つだけ指定できます。2つ以上指定することはできません。

キャプションの位置の指定

何も指定しないままでは、captionタグの内容は表の上に中央揃えで表示されます。
captionタグにalign属性を指定することで、上下および左右の位置を指定することができます。

<caption align="left">

と指定すると、キャプションはテーブルの上部に左端から表示されます。align属性では上下左右を英単語で指定します。

  • top:テーブルの上に中央揃えで表示される
  • bottom:テーブルの下に中央揃えで表示される
  • left:テーブルの上に左寄せで表示される
  • right:テーブルの上に右寄せで表示される

指定しないままだと、初期状態のままテーブルの上に中央揃えで表示されます。

注意点

タイトルタグ

<title>

は、ページタイトルを記述するために使用します。テーブルのタイトルには使えません。
HTML5の場合
HTML5以降は、captionタグではなくfigcaptionタグを使用します。これはHTML5で追加された新しいタグです。またHTML5では位置を指定するalign属性は廃止されています。 キャプションの位置を指定するには、スタイルシートを使用します。
HTML上の表示

<html>
  <head>
    <title>表のサンプル</title>
  </head>
  <body>
<table border="1">
	<caption>ソフトドリンクのメニュー</caption>
	<tr>
		<th>ホット/コールド</th>
		<th>種類</th>
		<th>サイズ</th>
		<th>価格(円)</th>
	</tr>
	<tr>
		<th>ホット/コールド</th>
		<td>コーヒー</td>
		<td>S,M</td>
		<td>150,200</td>
	</tr>
	<tr>
		<th>ホット</th>
		<td>紅茶</td>
		<td>Sサイズのみ</td>
		<td>170</td>
	</tr>
	<tr>
		<th>コールド</th>
		<td>コーラ</td>
		<td>S,M,L</td>
		<td>150,200,250</td>
	</tr>
</table>
</body>
</html>


【おすすめ記事】
【HTML入門】テーブルやセルの大きさを指定するには
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】colspanを使って表セルを横に結合してみよう!
【HTML入門】余白の取り方(paddingとmargin)について