概要へ移動

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

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