HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<caption>
テーブル（表）のキャプション（表題）を定義する要素です。
info
概要
<caption> 要素は、その親要素である <table> の表題や説明を提供します。
テーブルの内容を短く要約し、ユーザー（特にスクリーンリーダー利用者）が表の目的を素早く理解できるようにするために非常に重要です。
<table> 要素の直下に、**1つだけ**配置することができます。
play_circle
デモ (静的表示)
HTML (Source)
<table>
<caption>主要都市の平均気温 (2025年)</caption>
<thead>
<tr>
<th>都市</th>
<th>1月</th>
<th>7月</th>
</tr>
</thead>
<tbody>
<tr>
<td>東京</td>
<td>6.1°C</td>
<td>26.4°C</td>
</tr>
</tbody>
</table>
Preview (Result)
| 都市 | 1月 | 7月 |
|---|---|---|
| 東京 | 6.1°C | 26.4°C |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| （グローバル属性のみ） | <caption> 要素固有の属性はありません。すべてのグローバル属性が使用可能です。 |
| align (非推奨) | HTML5では非推奨です。キャプションの配置（top, bottom, left, right）を指定しましたが、代わりにCSSの caption-side プロパティを使用してください。 |
code
実用例
1. 基本的な使用法
<table>
<caption>
各部署の年間売上高（単位: 百万円）
</caption>
<tr>...</tr>
</table>
2. CSSによるキャプションの配置（下部に配置）
<!-- HTML -->
<table class="sales-table">
<caption>2024年四半期売上データ</caption>
<tr>...</tr>
</table>
<!-- CSS -->
.sales-table caption {
caption-side: bottom; /* 表の下に配置 */
text-align: right;
}
3. キャプション内にリンクや強調を入れる
<caption>
<!-- インライン要素を含めることができます -->
製品の<strong>月別出荷量</strong> (<a href="/data-source">データ出典</a>)
</caption>
lightbulb
知っておくべき重要事項
priority_high
配置のルール
また、一つのテーブルにつきキャプションは**一つだけ**許可されます。
<caption> 要素は、<table> 要素の開始タグの**直後**に配置しなければなりません。また、一つのテーブルにつきキャプションは**一つだけ**許可されます。
accessibility_new
アクセシビリティの向上
テーブルには必ず
これは、スクリーンリーダーを利用しているユーザーに対して、表全体の内容を最初に伝える重要な役割を果たします。
テーブルには必ず
<caption> を使用して、表の内容を簡潔に説明することを強く推奨します。これは、スクリーンリーダーを利用しているユーザーに対して、表全体の内容を最初に伝える重要な役割を果たします。