HTML | テーブルにfigcaption（説明文）を付ける方法
HTMLでテーブル要素にfigcaption タグで短い説明文、キャプションを付ける方法を紹介しています。
figcaption とは figure caption の略語で図表の説明という意味で、画像の説明では良く使われるHTMLコードです。
現在ではWordPressでブロックで作成するテーブルでも説明文を付ける事が可能となっていますので、WordPressユーザーは馴染みがあると思います。
テーブルにfigcaptionを付けたサンプルコード
テーブルに figcaption で説明文を付けたシンプルなHTMLのサンプルコードです。
figcaptionタグを利用する場合、テーブル要素をfigureタグで囲います。
figcaptionタグを設置する場所は主に、tableタグの開始前か終了後が一般的ではないでしょうか。
tableタグ内に入れるとレイアウトが崩れてしまいますので注意が必要です。
| en | ja |
|---|---|
| Apple | Banana |
| リンゴ | バナナ |
<figure>
<table>
<thead>
<tr>
<th>en</th>
<th>ja</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Banana</td>
</tr>
<tr>
<td>リンゴ</td>
<td>バナナ</td>
</tr>
</tbody>
</table>
<figcaption>説明文</figcaption>
</figure>figcaptionには特に文字数が制限されていないようですが、あまり長くならないようにした方がサイトのデザイン的には良いかと思います。
figcaptionは用途がalt属性と違い、ブラウザに表示して音声読み上げにも対応していますのでaltを指定してあるから不要という訳ではありません。