CSS - caption-side

概要

属性名	caption-side
値	top \| bottom \| right \| left
初期値	top
適用可能要素	caption要素
継承	継承する
メディア	visual

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS2	8	1	1	4	1

説明

テーブルのキャプションをテーブルの上部に表示するか、下部に表示するかを指定します。

値	説明
top	上部に表示します。
bottom	下部に表示します。
right	右側に表示します。CSS2 で定義されましたが、CSS2.1 では削除されました。
left	左側に表示します。CSS2 で定義されましたが、CSS2.1 では削除されました。

使用例

CSS

.sample-table {
  border: 1px solid gray;
  border-collapse: collapse;
  margin: 1em;
}
.sample-table td {
  border: 1px solid gray;
}
.sample-top {
  caption-side: top;
}
.sample-bottom {
  caption-side: bottom;
}

HTML

<h5>top</h5>
<table class="sample-table">
  <caption class="sample-top">キャプション</caption>
  <tr><td>AAAAAA</td><td>AAAAAA</td></tr>
  <tr><td>AAAAAA</td><td>AAAAAA</td></tr>
</table>

<h5>bottom</h5>
<table class="sample-table">
  <caption class="sample-bottom">キャプション</caption>
  <tr><td>AAAAAA</td><td>AAAAAA</td></tr>
  <tr><td>AAAAAA</td><td>AAAAAA</td></tr>
</table>

表示

top

キャプション
AAAAAA	AAAAAA
AAAAAA	AAAAAA

bottom

キャプション
AAAAAA	AAAAAA
AAAAAA	AAAAAA

リンク

初版：1997年7月27日、最終更新：2016年5月8日

https://www.tohoho-web.com/css/prop/caption-side.htm