caption要素とは
<caption>要素は、<caption>要素は、<table>要素内の
- 意味・役割
- 表（テーブル）のタイトルを表す要素
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
- コンテンツ・カテゴリ
-
なし
（HTML5より前：なし） - コンテンツ・モデル（梱包できる要素）
-
フロー・コンテンツ。
ただし、子孫に<table>要素は配置できない。
（HTML5より前：インライン要素のみ） - この要素を配置できる親要素
-
<table>要素。
（<table>要素内の最初の子要素として配置。）
caption要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
align属性 XHTML1.1で廃止
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