<caption> 表(テーブル)にタイトルを付ける
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <table> |
子にできる要素 | なし |
対応ブラウザ | caniuseで確認 |
<caption>タグの説明
<caption>
は、表(テーブル)にタイトルを付ける場合に使用します。このタグの記述個所は、<table>
要素の開始直後です。
<caption>タグの特徴
- この要素は
<table>
の直後にのみ配置できます。 - レイアウトの初期値は、マークアップの順序通り表の上部に配置されます。キャプションの位置を変えたい場合は、CSS(スタイルシート)の
caption-side
プロパティを適用して下さい。 - 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
<caption>に指定できる主な属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
- align(非推奨)
- 横軸の表示位置を指定します。
- valign(非推奨)
- 縦軸の表示位置を指定。
<caption>の使い方とサンプル
テーブルにキャプションを追加する場合、以下のようなマークアップになります。
HTML
<table>
<caption>キャプションを配置</caption>
<tr>
<th colspan="2">表(テーブル)の見出し</th>
</tr>
<tr>
<td>セルA-1</td>
<td>セルB-1</td>
</tr>
<tr>
<td>セルA-2</td>
<td>セルB-2</td>
</tr>
<tr>
<td>セルA-3</td>
<td>セルB-3</td>
</tr>
</table>
表示確認
表(テーブル)の見出し | |
---|---|
セルA-1 | セルB-1 |
セルA-2 | セルB-2 |
セルA-3 | セルB-3 |
この表は見やすくするためにCSSで装飾しています。キャプション自体に装飾を施したり、表示位置を変更することも可能です。
HTML
<table>
<caption style="caption-side:bottom; background:#FF9900;">キャプションを下に配置</caption>
<tr>
<th colspan="2">表(テーブル)の見出し</th>
</tr>
<tr>
<td>セルA-1</td>
<td>セルB-1</td>
</tr>
<tr>
<td>セルA-2</td>
<td>セルB-2</td>
</tr>
<tr>
<td>セルA-3</td>
<td>セルB-3</td>
</tr>
</table>
表示確認
表(テーブル)の見出し | |
---|---|
セルA-1 | セルB-1 |
セルA-2 | セルB-2 |
セルA-3 | セルB-3 |
<caption>に関連するHTMLタグ
表(テーブル)を作成する要素 | |
---|---|
<table> | 表(テーブル)を作成する |
<caption> | 表(テーブル)にキャプションを付ける |
<col> | 表(テーブル)の縦列の属性をまとめて指定する |
<colgroup> | 表(テーブル)の縦列をグループ化する |
<tr> | 表(テーブル)の横一行を定義する |
<th> | 表(テーブル)の見出しとなるセルを作成する |
<td> | 表(テーブル)のセルを作成する |
<thead> | 表(テーブル)のヘッダー行を定義する |
<tbody> | 表(テーブル)の本体部分を定義する |
<tfoot> | 表(テーブル)のフッター行を定義する |