HTML テーブルの見出しを指定するサンプル(caption)

HTMLの見出しを指定するサンプルです。
caption要素を使用します。

caption 要素

< table>
<caption>見出し</caption>

テーブルの見出しを指定します。
tableの最初の子要素に指定します。
CSSのtext-alignプロパティでcaptionを左や右に寄せることができます。
以下は、MDNのcaption要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/caption

サンプル

caption要素を使用したサンプルです。
テーブル２のcaptionは左寄せにしています。

テーブル１
赤 red
黄 yellow
青 blue

テーブル２
赤 red
黄 yellow
青 blue

コード

上記サンプルのコードです。
18,24行目でcaption要素を指定しています。
8行目はtext-alignプロパティでテーブル２のcaptionを左寄せにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>captionのサンプル</title>
<style>
#caption1{
	text-align:left;
	margin-top:20px;
}
#d1 table{width:200px;border-collapse:collapse;}
#d1 td{border: 1px solid #000;}
</style>
</head>
<body >
<div id="d1">
	<table>
	<caption>テーブル１</caption>
		<tr><td>赤 red</td></tr>
		<tr><td>黄 yellow</td></tr>
		<tr><td>青 blue</td></tr>
	</table>
	<table>
	<caption id="caption1">テーブル２</caption>
		<tr><td>赤 red</td></tr>
		<tr><td>黄 yellow</td></tr>
		<tr><td>青 blue</td></tr>
	<table>
</div>
</body>
</html>