HTML5タグ虎の巻

captionタグ

captionは、表をのタイトルを指定するタグです。

解説

captionタグは tableタグの子要素として使用し、表にタイトルを付けたい時に使用します。
captionで付けた名称は、表の上部に表示されます。(CSSで表示位置の変更はできます。)
captionタグの指定は、tableタグの直後に指定します。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
なし
コンテキスト
(親カテゴリ)
tableタグ
コンテンツ・モデル
(子カテゴリ)
フロー・コンテンツ

属性

captionタグには以下の属性が指定できます。

【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

テーブルにタイトル「【価格表】」を付ける

<table>
  <caption>【価格表】</caption>
  <tr>
    <td>みかん</td><td>@50</td>
  </tr>
  <tr>
    <td>りんご</td><td>@100</td>
  </tr>
  <tr>
    <td>ぶどう</td><td>@300</td>
  </tr>
</table>
【価格表】
みかん@50
りんご@100
ぶどう@300

備考

  • captionは「表題」という意味です。
  • キャプションの値はテーブルの上に表示されますが、表示位置を変更したい場合はCSS「caption-side」で変更できます。

関連項目

  • table:表を作成する
  • tr:表の行を定義する
  • th:表のヘッダセルを定義する
  • td:表のセルを定義する
  • tbody:テーブルのメイン領域を表す
  • thead:テーブルのヘッダー行領域を表す
  • tfoot:テーブルのフッター行領域を表す
  • caption:表をのタイトルを指定する
  • colgroup:表の列をグループ化する
  • col:表の列を表す