captionタグ 👉 表(table)のキャプション

HTMLの<caption>キャプションタグは、表にキャプション(注釈やタイトル)をつけるために使います。単体で使うことはなく、<table>タグと合わせて使います。

✍️このページでは以降「表」のことを「テーブル」と記載します。

captionタグの使い方

<caption>は、以下のようにテーブル(<table>)の中で使います。

<table>
  <!-- 👇キャプション -->
  <caption>人気の果物</caption>
  <tr>
    <th>果物</th> <th></th>
  </tr>
  <tr>
    <td>いちご</td> <td>甘い</td>
  </tr>
  <tr>
    <td>もも</td> <td>超甘い</td>
  </tr>
</table>

👆このように、テーブルにタイトルをつけるようなイメージで使うことができます。テーブル(<table>)の基本的な使い方は、下記ページをご覧ください。

tableの最初の子要素として配置する

<caption>は、<table>の最初の子要素として配置しなければいけません。つまり<table>タグのすぐ下に<caption>を書く必要があります。

<table>
  <caption>○○</caption> <!-- 😺最初に配置する -->
  ...
</table>

<table>の子要素であっても、最初に配置されていないならNGです。

🙅間違った例
<table>
  <tr>...</tr>
  <caption>○○</caption> <!-- 😿最初に配置されていない -->
</table>

キャプションの位置を変える

CSSのcaption-sideで下に配置

では、キャプションをテーブルの下側に表示したいときには、どうすれば良いのでしょうか。下に配置したくても<caption>は先頭に書かなければいけません。

キャプションの表示位置を変えるには、CSSのcaption-sideプロパティを使います。

CSS caption-side
caption {
  caption-side: 方向;
}

/* 下に表示するなら… */
caption {
  caption-side: bottom;
}

このようにcaptionに対して{ caption-side: 方向 }を指定します。方向にはtopbottomleftrightを入れます。下に表示するならcaption-side: bottomと書きます。

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 5px 15px;
  border: solid 1px #959b9e;
}
caption {
  font-weight: bold;
  caption-side: bottom; /* 下 */
}

👆caption-side: bottomにより、キャプションの位置が下になりました。

text-alignで左右の位置を変える

主要ブラウザでは、キャプションの文字列はデフォルトで中央寄せになります。CSSでcaptionに対してtext-alignプロパティを指定すれば、左右の位置も簡単に変えることができます。

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 5px 15px;
  border: solid 1px #959b9e;
}
caption {
  font-weight: bold;
  caption-side: bottom; /* 下 */
  text-align: left; /* 左 */
}

👆キャプションを左寄せしたいときには、text-align: leftを指定します。

CSSでキャプションのデザインを変える

キャプションの見た目を整えるサンプルCSSをいくつか紹介します。

タイトルらしくする

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 15px;
  border: solid 1px #305aa7;/* 線の色 */
}
caption {
  padding: 0.5em; /* 文字周りの余白 */
  color: #FFF; /* 文字色 */
  font-weight: bold; /* 太字に */
  background: #305aa7; /* 背景色 */
}

👆captionはテーブル部分と近接しているため「キャプションの背景色」を「セルの罫線の色」と同じにすると、一体感が出ます。

下に配置してキャプションらしい見た目に

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 15px;
  border: solid 1px #333;
}
caption {
  caption-side: bottom; /* 下に */
  margin-top: 0.5em; /* 上の隙間 */
  color: gray; /* 文字色 */
  font-size: 0.9em;
}

👆テーブルに注釈や説明を入れる目的で使うなら、テーブル下に配置して、控えめな見た目にするのが良いかと思います。

複数のスタイルを使い分けたい場合

上のサンプルでは、captionに対して直接スタイルを指定しています。そのため、ページ内の全てのテーブルのキャプションの見た目が変わります。

もし「タイトルとして使うとき」と「注釈として使うとき」でスタイルを分けたい場合は、以下のようにCSSで複数のバリエーションのclass指定を作っておくと良いでしょう。

CSS スタイルのバリエーションを作る
/* タイトル用スタイル */
.cap-title {
  padding: 0.5em;
  color: #FFF;
  font-weight: bold;
  background: #305aa7;
}

/* 注釈用スタイル */
.cap-description {
  caption-side: bottom;
  margin-top: 0.5em;
  color: gray;
  font-size: 0.9em;
}

あとは、HTMLの<caption>タグに適用したいスタイルのclassを指定します。

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
th, td {
  padding: 5px 15px;
  border: solid 1px #305aa7;
}
/* タイトル用スタイル */
.cap-title {
  padding: 0.5em;
  color: #FFF;
  font-weight: bold;
  background: #305aa7;
}

/* 注釈用スタイル */
.cap-description {
  caption-side: bottom;
  margin-top: 0.5em;
  color: gray;
  font-size: 0.9em;
}

👆「このテーブルのキャプションは、タイトル用スタイル(.cap-title)に」というように使い分けができるようになります。