caption要素とは
<caption>
要素は、<caption>
要素は、<table>
要素内の
- 意味・役割
- 表(テーブル)のタイトルを表す要素
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
-
なし
(HTML5より前:なし) - コンテンツ・モデル(梱包できる要素)
-
フロー・コンテンツ。
ただし、子孫に<table>
要素は配置できない。
(HTML5より前:インライン要素のみ) - この要素を配置できる親要素
-
<table>
要素。
(<table>
要素内の最初の子要素として配置。)
caption要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
align属性 XHTML1.1で廃止
属性は、キャプションの表示位置を指定する属性です。この属性を使用しない時は、"top" となり表の上部に表示されます。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSのcaption-side
プロパティや、text-align
プロパティで行うようにしましょう。
<caption align="キャプションの表示位置">
- 属性値
-
- "top": 表の上部
- "bottom": 表の下部
- "left": 表の左側 (一部のブラウザは、表の上部でテキストを左揃えで表示)
- "right": 表の右側 (一部のブラウザは、表の上部でテキストを右揃えで表示)
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
<caption align="bottom">
caption要素のサンプル
<table border="1">
<caption>商品一覧表<caption>
<thead>
<tr>
<th>商品コード</th>
<th>商品名</th>
<th>数量</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>D001</td>
<td>製品A</td>
<td>2</td>
<td>5,000</td>
</tr>
<tr>
<td>D002</td>
<td>製品B</td>
<td>1</td>
<td>8,000</td>
</tr>
<tr>
<td>D003</td>
<td>製品C</td>
<td>2</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3" scope="rowgroup">合計</th>
<td>38,000</td>
</tr>
<tfoot>
</table>
RERUN
caption要素の注意点
もし、<table>
要素が、<figure>
要素内の唯一のコンテンツの場合は、表見出しに<caption>
要素ではなく、
<figcaption>
要素を使いましょう。
<figure>
<figcaption>情報通信機器別インターネットの利用状況</figcaption>
<table border="1">
<tr>
<th scope="row">自宅のパソコン</th>
<td>53.5%</td>
</tr>
<tr>
<th scope="row">自宅以外のパソコン</th>
<td>21.8%</td>
</tr>
<tr>
<th scope="row">従来型の携帯電話</th>
<td>17.8%</td>
</tr>
<tr>
<th scope="row">スマートフォン</th>
<td>47.1%</td>
</tr>
<tr>
<th scope="row">タブレット端末</th>
<td>14.8%</td>
</tr>
<tr>
<th scope="row">インターネット利用率</th>
<td>82.8%</td>
</tr>
<table>
</figure>
RERUN
仕様
- HTML5.1
- 4.9.2. The caption element