＜caption要素＞ - テーブルのキャプション
公開日:
caption要素は、テーブルのキャプションを表す要素です。キャプションは、見出しや説明を表します。
概要
- 名前
- caption
- カテゴリー
- なし。
- 配置できる場所
- table要素の最初の子要素として配置すること。
- コンテンツモデル
- Flow content。ただし、table要素の祖先になってはいけない。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLTableCaptionElement
- デフォルトのスタイル
caption { display: table-caption; text-align: -webkit-center; }- 仕様書
- https://html.spec.whatwg.org/multipage/tables.html#the-caption-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
caption要素は、table要素で作成するテーブル表のキャプションを表す要素です。テーブルに見出しや説明があれば指定しましょう。上部に表示されます。この要素は必要なければ省略可能です。指定する場合は最初の子要素でなければいけません。
HTML
<table>
<!-- 最初の子要素でなければいけない -->
<caption>
<strong>見出し</strong>
<p>テーブルの説明文をいろいろ。</p>
</caption>
<!-- 他の要素 -->
<thead>...</thead>
<tbody>...</tbody>
</table>caption要素には、見出しだけを指定してもいいし、見出しと説明文をマークアップしても大丈夫です。table要素を子要素に持つことはできません。
HTML
<!-- 見出しだけ -->
<caption>見出し</caption>
<!-- 見出しと説明 -->
<caption>
<strong>見出し</strong>
<p>テーブルの説明文。</p>
</caption>サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜caption要素＞ - テーブルのキャプション</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/caption/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>caption要素は、テーブルのキャプションを表す要素です。テーブルの見出しや説明があれば指定しましょう。</p>
<table>
<caption>
<strong>成績表</strong>
<p>〜月〜日に行われた架空のテストの成績を表にしています。</p>
</caption>
<thead>
<tr>
<th>名前</th>
<th>点数</th>
<th>ランク</th>
</tr>
</thead>
<tbody>
<tr>
<td>鈴木</td>
<td>86</td>
<td>B</td>
</tr>
<tr>
<td>田中</td>
<td>97</td>
<td>A</td>
</tr>
<tr>
<td>佐藤</td>
<td>77</td>
<td>C</td>
</tr>
<tr>
<td>山田</td>
<td>57</td>
<td>D</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>あいうえお順</td>
<td>100点満点中</td>
<td>Aを最高をした5段階評価</td>
</tr>
</tfoot>
</table>
</body>
</html>