CSS caption-side

スタイルシート属性caption-sideは、表（テーブル）の見出しの位置を指定します。

なお、「JISX4051 日本語文書の組版方法」において、表のキャプションは表の上に配置するよう決められている。

11.6 表のキャプション及び注記処理

11.6.1 表のキャプション及び注記の配置位置及び組方向 表のキャプション及び注記の配置位置及び組方向は，次による。

a) キャプション及び注記の組方向は，表の全体の組方向と同一とする。

b) 表の全体が横書きのキャプションの配置位置は，表の全体の上側とし，表の全体の左右中央にそろえるか，又はキャプションの先頭を表の全体の左端からの指定された位置に配置する。表の全体が縦書きのキャプションの配置位置は，表の全体の右側とし，キャプションの先頭を表の全体の上端からの指定された位置に配置する。

書式

caption-side: align

属性値

align

表の見出しの位置を指定します。

値	意味
top	上
bottom	下
inherit	継承

初期値

top

適用対象

caption 要素に対して caption-side プロパティを適用できる。

継承

親要素の caption-side プロパティの値が子要素へ継承される。

使用例

表の上にキャプションを配置する例を次に示す。

<table style="border: 1px solid gray;">
  <caption style="caption-side: top;">金融機関コード</caption>
  <thead>
    <tr>
      <th>コード<th>
      <th>金融機関<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001<td>
      <td>みずほ銀行<td>
    </tr>
    <tr>
      <td>9900<td>
      <td>ゆうちょ銀行<td>
    </tr>
  </tbody>
</table>

表の下にキャプションを配置する例を次に示す。

<table style="border: 1px solid gray;">
  <caption style="caption-side: bottom;">金融機関コード</caption>
  <thead>
    <tr>
      <th>コード<th>
      <th>金融機関<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001<td>
      <td>みずほ銀行<td>
    </tr>
    <tr>
      <td>9900<td>
      <td>ゆうちょ銀行<td>
    </tr>
  </tbody>
</table>

関連記事

• border-collapse
• border-spacing
• empty-cells
• table-layout

参考文献

World Wide Web Consortium (2022) Cascading Style Sheets (CSS) Level 2

日本産業標準調査会 (2022) 日本産業規格