caption
表題

2009/8/26

caption要素は、表題を表します。

caption要素は、tabie要素の直後に記述する必要があります。
1つのテーブルにつき1つの表題を指定することができます。
一般的なブラウザにおいて、caption要素はテーブルの上にセンタリングされて表示されます。

属性

HTML4.01にあったalign属性はHTML5で廃止されました。
そのため、表題をテーブルの左右中央のいずれかに揃えるかは、CSSで指定してください。

サンプル

<style type="text/css">
	.tb { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; width:100%; }
	.tb th { border:1px solid #ccc; background-color:#eee; }
	.tb td { border:1px solid #ccc; }
	.tb caption { font-weight:bold; color:darkorange; }
	.tb .tbcl { text-align:left; }
	.tb .tbcc { text-align:center; }
	.tb .tbcr { text-align:right; }
</style>
<table class="tb">
	<caption>表題（指定なし）</caption>
	<tr><th>列A</th><th>列B</th><th>列C</th></tr>
	<tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr>
	<tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr>
	<tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr>
</table>
<table class="tb">
	<caption class="tbcl">表題（CSSで左寄せ）</caption>
	<tr><th>列A</th><th>列B</th><th>列C</th></tr>
	<tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr>
	<tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr>
	<tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr>
</table>
<table class="tb">
	<caption class="tbcc">表題（CSSで中央寄せ）</caption>
	<tr><th>列A</th><th>列B</th><th>列C</th></tr>
	<tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr>
	<tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr>
	<tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr>
</table>
<table class="tb">
	<caption class="tbcr">表題（CSSで右寄せ）</caption>
	<tr><th>列A</th><th>列B</th><th>列C</th></tr>
	<tr><td>行A-1</td><td>行B-1</td><td>行C-1</td></tr>
	<tr><td>行A-2</td><td>行B-2</td><td>行C-2</td></tr>
	<tr><td>行A-3</td><td>行B-3</td><td>行C-3</td></tr>
</table>