HTMLのcaption要素で、テーブルのタイトルを指定するサンプルです。
目次
| サンプル | caption要素 |
| 表にタイトルを表示する | |
| 表のタイトルを左寄せにする |
caption要素
| < table> <caption>見出し</caption> |
- テーブルのタイトルを指定します。
- tableの最初の子要素に指定します。
- CSSのtext-alignプロパティでcaptionを左や右に寄せることができます。
表にタイトルを表示する
captionで表のタイトルを表示しています。
上記サンプルのコードです。
<style>
table{width:200px;border-collapse:collapse;}
table td{border: 1px solid #000;}
</style>
<table>
<caption>テーブル１</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要素を指定しています。
関連の記事