caption-sideプロパティ

値

次の値を指定することができます。

• top - キャプションをテーブルの上に表示。初期値
• bottom - キャプションをテーブルの下に表示。
• inherit - 親要素の設定を継承。

パターン1

値に「top」(初期値)を指定している例です。
キャプションはテーブルの上に表示されます。

CSS コード例

<style>
.table1 {
  caption-side: top;
}

HTML コード例

<table class="table1">
  <caption>商品在庫表</caption>
  <tr>
    <th class="product_name">商品名</th>
    <th class="product_num">在庫数</th>
    <th class="product_price">価格</th>
  </tr>
  <tr>
    <td>ミネラルウォーター</td>
    <td>150本</td>
    <td>100円（税抜）</td>
  </tr>
  <tr>
    <td>コーラ</td>
    <td>100本</td>
    <td>140円（税抜）</td>
  </tr>
  <tr>
    <td>お茶</td>
    <td>200本</td>
    <td>130円（税抜）</td>
  </tr>
</table>

パターン2

値に「bottom」を指定している例です。
キャプションをテーブルの下に表示します。

CSS コード例

.table2 {
  caption-side: bottom;
}

HTML コード例

<table class="table2">
  <caption>商品在庫表</caption>
  <tr>
    <th class="product_name">商品名</th>
    <th class="product_num">在庫数</th>
    <th class="product_price">価格</th>
  </tr>
  <tr>
    <td>ミネラルウォーター</td>
    <td>150本</td>
    <td>100円（税抜）</td>
  </tr>
  <tr>
    <td>コーラ</td>
    <td>100本</td>
    <td>140円（税抜）</td>
  </tr>
  <tr>
    <td>お茶</td>
    <td>200本</td>
    <td>130円（税抜）</td>
  </tr>
</table>