概要へ移動

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

テーブルの上部に表示
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円
テーブルの下部に表示
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円
中央揃え
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円
デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS
caption {

    background-color: antiquewhite;  /*  背景色  */

}



table {

    min-width:  20em;               /*  最小幅  */

}



td {

    border:     2px solid blue;     /*  境界線  */

    padding:    10px;               /*  内側の余白  */

}
HTML : 適用するHTML
<table>

    <caption class="sample">【表】くだもの</caption>

    <tr>

        <td>りんご 🍎</td>

        <td>100円</td>

    </tr>

    <tr>

        <td>みかん 🍊</td>

        <td>80円</td>

    </tr>

</table>
実行結果
【表】くだもの
りんご 🍎 100円
みかん 🍊 80円

caption-sideの概要

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

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

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

top

表の上部に表示する。

CSS : top に設定
.sample  {

    caption-side:    top;

}
実行結果
【表】くだもの
りんご 🍎 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;