<caption>タグの解説
<caption>は、親要素に<table>がある場合に表のタイトルを表します。このタグは<table>要素の開始直後に最初の子要素として配置しなければなりません。
HTMLで表を作成する方法は、<table>を参照して下さい。
<caption>タグの特徴
- この要素は
<table>の開始直後にのみ配置できます。 - レイアウトの初期値は、マークアップの順序通り表の上部に配置されます。キャプションの位置を変えたい場合は、CSS（スタイルシート）の
caption-sideプロパティを指定して下さい。 - 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
<caption>要素に指定できる属性
align（非推奨）- 横軸の表示位置を指定します。
valign（非推奨）- 縦軸の表示位置を指定。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<caption>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<table>で作成した表に見出しをつけたい場合、最初の子要素に配置し内容を指定します。
<table>
<caption>Caption text.</caption>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
表にある程度の意味を持たせて、キャプションを表示した時の見栄えを確認します。既定値では、キャンプションは表の上部に配置され、特に装飾は加わりません。
CSSでキャプションの表示位置を変える
キャプションの表示位置を変えたい場合は、CSSのcaption-sideプロパティを使います。HTMLのソースコードを変更する必要はありません。この方法で指定できる場所は表の上か下かの二箇所です。
caption {
/* 表の上部に配置 */
caption-side: top;
/* 表の下部に配置 */
caption-side: bottom;
}
キャプションの中に子要素を配置する
<caption>はフロー・コンテンツを受け入れるので、段落などの子要素を配置できます。表を理解するために助けになる文章などであれば、ある程度長くとも問題ありません。
<table>
<caption>
<p>表に関する説明や概要を示す内容。</p>
<p>表に関する説明や概要を示す内容。</p>
</caption>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>