MENU
  1. ホーム
  2. CSS
  3. caption-side

caption-side

CSS
2023.12.31

caption-sideプロパティは、表のキャプション位置を指定するプロパティになります。

caption-sideの説明図
caption-sideプロパティ
記法

.クラス名　{
　caption-side : 表示位置;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>caption-sideプロパティ</title>
  </head>

  <body>
    <p>caption-side：top</p>
    <table>
      <caption class="caption-side-top">
        表のキャプション
      </caption>
      <thead>
        <tr>
          <th>見出し</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>セルの内容</td>
        </tr>
      </tbody>
    </table>
    <hr />
    <p>caption-side：bottom</p>
    <table>
      <caption class="caption-side-bottom">
        表のキャプション
      </caption>
      <thead>
        <tr>
          <th>見出し</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>セルの内容</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
.caption-side-top {
  caption-side: top;
}
.caption-side-bottom {
  caption-side: bottom;
}
td,
th {
  border: 1px solid black;
  padding: 8px;
}
出力結果

caption-side：top

表のキャプション
見出し
セルの内容

caption-side：bottom

表のキャプション
見出し
セルの内容
CSS