captionタグ -table（表）にタイトルや説明を追加する｜HTML辞典

<caption>タグとは？

<caption> タグは、HTML の <table>（表）にタイトルや説明を追加するためのタグです。
表の内容を明確にし、可読性やアクセシビリティを向上させるために使用されます。

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<caption> は 開始タグ（<caption>）と閉じタグ（</caption>）の両方が必要 です。

基本的な記述方法

<table>
    <caption>売上データ（2024年1月）</caption>
    <tr>
        <th>商品名</th>
        <th>売上</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>100個</td>
    </tr>
</table>

この記述により、表の上部に「売上データ（2024年1月）」というタイトルが表示 されます。

使用できる主な属性

<caption> タグには特別な属性はありません。

CSSを使ったデザイン変更

<caption> のデフォルトのスタイルは 中央揃えの太字 ですが、カスタマイズ可能です。

caption {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
    text-align: left;
}

適切な使用例

✅ 表のタイトルを記述する

<table>
    <caption>2024年の売上データ</caption>
    <tr>
        <th>商品</th>
        <th>個数</th>
    </tr>
    <tr>
        <td>バナナ</td>
        <td>150</td>
    </tr>
</table>

✅ <caption> のスタイルを変更する

<style>
    caption {
        font-weight: bold;
        font-size: 1.2em;
        color: blue;
    }
</style>
<table>
    <caption>2024年度 売上データ</caption>
    <tr>
        <th>月</th>
        <th>売上</th>
    </tr>
    <tr>
        <td>1月</td>
        <td>500,000円</td>
    </tr>
</table>

適切でない使用例（誤った使い方）

❌ <caption> を <table>の外に記述する

<!-- NG: <table> の外に <caption> を記述 -->
<caption>売上データ</caption>
<table>
    <tr>
        <th>商品名</th>
        <th>売上</th>
    </tr>
</table>

✅ 正しい書き方（<table>の中に記述）

<table>
    <caption>売上データ</caption>
    <tr>
        <th>商品名</th>
        <th>売上</th>
    </tr>
</table>

❌ <caption> を複数指定する（1つの<table> に1つだけ記述可能）

<!-- NG: <caption> を複数記述 -->
<table>
    <caption>売上データ</caption>
    <caption>2024年1月</caption>
</table>

✅ 正しい書き方（1つのみ記述）

<table>
    <caption>売上データ（2024年1月）</caption>
</table>

<caption>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<caption>	表のタイトルを示す	<table>の最初に配置する	表の概要を記述
<th>	表の見出しを示す	行や列のラベルを指定	各列の名称を定義
<thead>	表のヘッダー部分をグループ化	<tr> と組み合わせて使用	表のタイトル行をグループ化

使用上の注意点

✅ <caption> は <table>内の最初の要素として記述する

• <thead> や <tbody> より前に配置する。

✅ 1つの <table>に <caption> は1つだけ

• 複数指定すると無効になる可能性がある。

✅ <caption> を使うと、アクセシビリティが向上する

• 画面リーダーで表の内容が明確になり、SEO の観点でも有利。

関連タグ

• <table>– 表を作成
• <th> – 見出しセル
• <tr> – 行を作成
• <td> – データセル

まとめ

<caption> タグは、HTML の <table>にタイトルや説明を追加するためのタグ です。
表の内容を分かりやすくするために、適切なタイトルを設定すると可読性やアクセシビリティが向上します。