HTML caption テーブルのタイトルを指定する

HTMLのcaption要素で、テーブルのタイトルを指定するサンプルです。

目次

仕様 caption要素
サンプル 表にタイトルを表示する
  表のタイトルを左寄せにする

caption要素

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

表にタイトルを表示する

captionで表のタイトルを表示しています。

コード

上記サンプルのコードです。

<style>
table{width:200px;border-collapse:collapse;}
table td{border: 1px solid #000;}
</style>

<table>
<caption>テーブル1</caption>
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>

7行目は、caption要素を指定しています。

表のタイトルを左寄せにする

captionの表のタイトルを左寄せにしています。

コード

上記サンプルのコードです。

<style>
caption{text-align:left;}
table{width:200px;border-collapse:collapse;}
table td{border: 1px solid #000;}
</style>

<table>
<caption>captionを使用</caption>
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>

2行目は、CSSのtext-alignでleft(左寄せ)を指定しています。
8行目は、caption要素を指定しています。

関連の記事

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

△上に戻る