CSS - caption-side

トップ > CSSリファレンス > caption-side

概要

属性名 caption-side
top | bottom
初期値top
適用可能要素caption要素
継承継承する
メディアVisual / Table?
サポートC2 / e8 / Fx1 / Ch1 / Op4 / Sa1

説明

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

説明
top上部に表示します。
bottom下部に表示します。

使用例

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
キャプション
AAAAAAAAAAAA
AAAAAAAAAAAA
bottom
キャプション
AAAAAAAAAAAA
AAAAAAAAAAAA

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年4月30日
http://www.tohoho-web.com/css/prop/caption-side.htm