caption-sideプロパティ

プロパティcaption-sideは、 タグ<caption>で作成された 表のキャプションの位置を設定します。 このプロパティの値は2つあります: top （表の上部、デフォルト）またはbottom （表の下部）。

構文

cssセレクタ {
  caption-side: top | bottom;
}

例

キャプションを表の上に配置してみましょう:

html<table border="1" width="300">
  <caption>表</caption>
  <tr>
    <th>ヘッダー</th>
    <th>説明</th>
  </tr>
  <tr>
    <td>テキスト1</td>
    <td>テキスト2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

例

では、キャプションを表の下に移動させてみましょう:

html<table border="1" width="300">
  <caption>表</caption>
  <tr>
    <th>ヘッダー</th>
    <th>説明</th>
  </tr>
  <tr>
    <td>テキスト1</td>
    <td>テキスト2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

関連項目