CSS: table の caption(タイトル）の位置を指定する

CSS で table（テーブル）の caption（表タイトル）の位置を指定する場合は、 caption-side プロパティを使用します。

値として「top」を指定した場合は表の上にタイトルを表示し、 「bottom」を指定した場合は表の下にタイトルを表示します。初期値は「top」です。

使用例


caption {
    caption-side: bottom;
}

caption-side プロパティのサンプル

２つのテーブルを作成しています。 １つめのテーブルは表タイトルを上に表示し、２つめは表タイトルを下に表示しています。

caption 要素はデフォルトで中央に表示されるようになっています。 左側に表示したければ「text-align: left」を、 右側に表示したければ「text-align: right」を追加します。

■「caption-side: top;」を指定

表タイトル
サンプルセルサンプルセルサンプルセル
サンプルセルサンプルセルサンプルセル

■「caption-side: bottom;」を指定

表タイトル
サンプルセルサンプルセルサンプルセル
サンプルセルサンプルセルサンプルセル

<p><b>■「caption-side: top;」を指定</b></p>

<table>
<caption class="top">表タイトル</caption>
<tr><td>サンプルセル</td><td>サンプルセル</td><td>サンプルセル</td></tr>
<tr><td>サンプルセル</td><td>サンプルセル</td><td>サンプルセル</td></tr>
</table>

<p><b>■「caption-side: bottom;」を指定</b></p>

<table>
<caption class="bottom">表タイトル</caption>
<tr><td>サンプルセル</td><td>サンプルセル</td><td>サンプルセル</td></tr>
<tr><td>サンプルセル</td><td>サンプルセル</td><td>サンプルセル</td></tr>
</table>

<style>
    caption.top {
        caption-side: top;
    }
    caption.bottom {
        caption-side: bottom;
    }
</style>
HTML・CSS入門