HTML & CSS - caption タグ

基本的な使い方

caption タグは、表題をつけるために使われます。そのため caption タグは単体で使われることはなく、table タグとセットで使用します。

<table>
    <caption>表題</caption>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>
caption タグの基本的な書き方
表題
見出し1見出し2
内容1内容2
ブラウザ表示

使用上の注意

caption タグは table タグの最初の子要素として配置しなければなりません。

<table>
    <!-- table タグの最初の子要素として配置する -->
    <caption>表題</caption>
    ...
</table>
caption タグは table タグの最初の子要素として配置する

表題の位置を変更する

caption タグで指定した表題は、テーブルの上側に表示されます。表題を下側に表示したい場合でも caption タグは table タグの最初の子要素として配置しなければなりません。そのため、表題の位置を変更する場合は、CSS の caption-side プロパティを使用します。

caption {
    caption-side: bottom;
}
表題の位置を変更する(CSS)
<table>
    <caption>表題</caption>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>
表題の位置を変更する(HTML)
表題
見出し1見出し2
内容1内容2
ブラウザ表示

外部リンク