CSS - caption-side

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

概要

サポート (説明)

説明

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

使用例

.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;
}

<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>

リンク

• https://www.w3.org/TR/CSS2/tables.html#caption-position
• http://www.y-adagio.com/public/standards/tr_css2/tables.html#propdef-caption-side
• https://developer.mozilla.org/ja/docs/Web/CSS/caption-side