captionタグは、テーブル(表)にキャプションと呼ばれる、タイトルや説明を入れたいときに使うタグです。今回は、HTML5におけるcaptionタグの使い方をご紹介します。
HTML5におけるcaptionタグの使い方
captionタグは、テーブル(表)にキャプションをつけたいときに使用し、<table>〜</table>の子要素として設置します。一般的なブラウザでは、デフォルトでは、テーブルの上部に表示されます。表示位置は、CSSのcaption-sideで変更可能です。
基本的な使い方は次の通りです。
|
1 2 3 |
<caption> タイトルや説明を書く </caption> |
以下のサンプルコードのように記述したcaptionタグを<table>〜</table>内に配置します。
captionタグは、tableタグ内のtable要素の直後に、1つのみ配置することができます。2つ以上はつけることができないので、<caption>内で段落などをつけてマークアップしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <caption> <h1>〇〇の統計</h1> <p>これは〇〇のデータの説明です。</p> </caption> <tbody> <tr> <th>見出しセル</th> <td>データセル</td> </tr> </tbody> </table> |
figure要素内に<table>要素が配置される場合
figure要素内にtable要素のみの場合、キャプションはcaptionタグではなく、figcaptionタグを使用することが推奨されているので、気をつけてください。
まとめ
captionタグはテーブルにタイトルや説明を入れたい場合に使うものです。図表を表すfigureタグの説明をつけたい場合は<figcaption>を使いましょう。
