このページで解説するコードの実行結果。

テーブルの上部に表示 : caption-side: top;
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円
テーブルの下部に表示 : caption-side: bottom;
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円
中央揃え : text-align: center;
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。(<caption>要素には背景色をつけている)

CSS : デフォルトCSS
caption {
    background-color: antiquewhite;  /*  背景色  */
}
table {
    min-width:  20em;               /*  最小幅  */
}
td {
    border:     2px solid blue;     /*  境界線  */
    padding:    10px;               /*  内側の余白  */
}

caption-sideの概要

<caption>要素をテーブル(表)の「上部」に表示するか、「下部」に表示するかを指定する。

(表) caption-sideの設定値
設定値表示場所デフォルト
top表の上部
bottom表の下部

<table>要素ではなく、<caption>要素に指定することに注意。

top

表の上部に表示する。

CSS : top に設定
.sample  {
    caption-side:    top;
}
HTML : 適用するHTML
<table>
    <caption class="sample">【表】くだもの</caption>
    <tr>
        <td>りんご 🍎</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>みかん 🍊</td>
        <td>80円</td>
    </tr>
</table>
実行結果
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円

bottom

表の下部に表示する。

CSS : bottom に設定
.sample  {
    caption-side:    bottom;
}
実行結果
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円

デフォルト値はbottomである。(無指定の場合は、下部に表示されている)

CSS : 無指定
.sample  {
                             
}
実行結果
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円

併用するCSSプロパティ

text-alignプロパティ

文字列の左揃え/中央揃え/右揃えを指定したい場合、 text-alignを使う。

CSS : 下部で中央揃え(center)
.sample  {
    text-align:     center;
}
実行結果
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円
CSS : 上部で中央揃え(center)
.sample  {
    caption-side:   top;
    text-align:     center;
}
実行結果
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円
CSS : 上部で右揃え(right)
.sample  {
    caption-side:    top;
    text-align:      right;
}
実行結果
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円

Emmet : cps

記述Visual Studio Code
cpscaption-side: top;