caption-side
は、表 (<table>
) の <caption>
の配置位置を指定する CSS プロパティです。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
初期値 | top |
---|---|
適用対象 | table-caption 要素 |
継承 | あり |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
構文
/* 方向を示す値 */
caption-side: top;
caption-side: bottom;
/* 警告: 非標準の値 */
caption-side: left;
caption-side: right;
caption-side: top-outside;
caption-side: bottom-outside;
/* グローバル値 */
caption-side: inherit;
caption-side: initial;
caption-side: unset;
このプロパティの値は、表の writing-mode
に対して相対的です。
値
top
- キャプションボックスを表の上に配置することを示すキーワードです。
bottom
- キャプションボックスを表の下に配置することを示すキーワードです。
left
- キャプションボックスを表の左に配置することを示すキーワードです。
- 註: この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。
right
- キャプションボックスを表の右に配置することを示すキーワードです。
- 註: この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。
top-outside
- キャプションボックスを表の上に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
註: CSS 2.1 仕様では、CSS 2 仕様で値top
について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。 bottom-outside
- キャプションボックスを表の下に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。
註: CSS 2.1 仕様では、CSS 2 仕様で値bottom
について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。
形式構文
例
HTML
<table class="top">
<caption>Caption ABOVE the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
<br>
<table class="bottom">
<caption>Caption BELOW the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
CSS
.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
出力
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Logical Properties and Values Level 1 caption-side の定義 |
編集者草案 | 値 top および bottom は、writing-mode の値に対して相対的であることを定義 |
CSS Level 2 (Revision 1) caption-side の定義 |
勧告 | 最初の定義 |
ブラウザ実装状況
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.