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 タグは table タグの最初の子要素として配置しなければなりません。

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

表題の位置を変更する

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

caption {
    caption-side: bottom;
}

<table>
    <caption>表題</caption>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

外部リンク