CSS | caption-side | <caption>要素の上下位置

caption-sideは表のタイトルの上下位置を指定するためのCSSプロパティです。

`caption-side`の設定値
設定値	表名の場所	デフォルト
`top`	上
`bottom`	下

<table>(テーブル、表)を準備して、<caption>(表のタイトル)を「価格表」と指定します。

HTML


<table>
    <caption>価格表</caption>
    <tr>
        <td>りんご 🍎</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>みかん 🍊</td>
        <td>80円</td>
    </tr>
</table>

CSS


td {
    border:  1px solid gray; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

caption {
    background-color: #ecc6c6; /* 背景 */
}

実行結果初期状態

価格表
りんご 🍎	100円
みかん 🍊	80円

デフォルトでは<caption>は表の「上」に表示されます。

<caption>要素に対してcaption-sideにbottomを指定すると、表の「下」に移動します。 topに変更すると、表の「上」に表示されます。(デフォルト値)

HTML


<table>
    <caption>価格表</caption>
    <tr>
        <td>りんご 🍎</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>みかん 🍊</td>
        <td>80円</td>
    </tr>
</table>

CSS


td {
    border:  1px solid gray; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

caption {
    background-color: #ecc6c6; /* 背景 */
}

CSS


caption {
    caption-side: bottom;
}

実行結果bottom

価格表
りんご 🍎	100円
みかん 🍊	80円

HTML


<table>
    <caption>価格表</caption>
    <tr>
        <td>りんご 🍎</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>みかん 🍊</td>
        <td>80円</td>
    </tr>
</table>

CSS


td {
    border:  1px solid gray; /* 境界線 */
    padding: 10px;           /* 内側の余白 */
}

caption {
    background-color: #ecc6c6; /* 背景 */
}

CSS


caption {
    caption-side: top;
}

実行結果top

価格表
りんご 🍎	100円
みかん 🍊	80円