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

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

caption 要素

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

サンプル

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

テーブル1
赤 red
黄 yellow
青 blue
テーブル2
赤 red
黄 yellow
青 blue

コード

上記サンプルのコードです。
18,24行目でcaption要素を指定しています。
8行目はtext-alignプロパティでテーブル2の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>テーブル1</caption>
		<tr><td>赤 red</td></tr>
		<tr><td>黄 yellow</td></tr>
		<tr><td>青 blue</td></tr>
	</table>
	<table>
	<caption id="caption1">テーブル2</caption>
		<tr><td>赤 red</td></tr>
		<tr><td>黄 yellow</td></tr>
		<tr><td>青 blue</td></tr>
	<table>
</div>
</body>
</html>

関連の記事

HTML テーブルのセルを縦につなげるサンプル(rowspan)
HTML テーブルのセルを横につなげるサンプル(colspan)
HTML テーブルのセル内の余白を指定するサンプル(cellpadding)
HTML テーブルのセルの間隔を指定するサンプル(cellspacing)
HTML リストを作成するサンプル(ul/li/ol)



△上に戻る