ウェブランサー

<caption> テーブル(表)にタイトルを付ける

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
タイプ -
取り扱い 標準

<caption>タグは、テーブル(表)にタイトルを付ける場合に使用します。このタグの記述個所は、<table>タグの直後です。

テーブル作成の基本的な流れは以下の通り。
【1】まず<table>タグで表の作成を開始します。
【2】次に<tr>タグで表の横一列を定義します。
【3】そして<td>タグで表の縦のセルを定義します。

<caption>タグに指定できる属性

align="値(left, center, right)"
表示位置を指定します。
valign="値(top, middle, bottom, baseline)"
縦軸に対する表示位置を指定。
style="プロパティ:値;"
スタイルを指定します。
id="", class=""
idやclass付けが出来ます。

<caption>の使用サンプル

HTML
<table border="1" bordercolor="#AAAAAA" bgcolor="#FFFFFF" cellpadding="3">
<caption>CAPTION(キャプション)</caption>
<tr>
<th align="center" colspan="3">テーブルの作成</th>
</tr>
<tr>
<td>1</td>
<td>TABLE</td>
<td>テーブル全体の開始</td>
</tr>
<tr>
<td>2</td>
<td>TR</td>
<td>横一列を定義する</td>
</tr>
<tr>
<td>3</td>
<td>TD</td>
<td>TRの中にセルを作成</td>
</tr>
<tr>
<td>4</td>
<td>/TD</td>
<td>セル内の内容を記述してセルを閉じる</td>
</tr>
<tr>
<td>5</td>
<td>TD~/TD</td>
<td>複数セルを表示させる場合には繰り返しTDを記述</td>
</tr>
<tr>
<td>6</td>
<td>/TR</td>
<td>一行分の記述が終わったらTRを閉じる</td>
</tr>
<tr>
<td>7</td>
<td>TR, TD, /TD, /TR</td>
<td>必要回数繰り返す</td>
</tr>
<tr>
<td>8</td>
<td>/TABLE</td>
<td>テーブル全体を終了させる</td>
</tr>
</table>
表示確認
CAPTION(キャプション)
テーブルの作成
1 TABLE テーブル全体の開始
2 TR 横一列を定義する
3 TD TRの中にセルを作成
4 /TD セル内の内容を記述してセルを閉じる
5 TD~/TD 複数セルを表示させる場合には繰り返しTDを記述
6 /TR 一行分の記述が終わったらTRを閉じる
7 TR, TD, /TD, /TR 必要回数繰り返す
8 /TABLE テーブル全体を終了させる

※見やすくするためにCSSで装飾しています

<caption>に関連するHTMLタグ

テーブル(表)に関連する要素
<caption> テーブル(表)にタイトルを付ける
<col> テーブル(表)の縦列の属性をまとめて指定する
<colgroup> テーブル(表)の縦列をグループ化する
<table> テーブル(表)を作成する
<tbody> テーブル(表)のボディ部分を定義する
<td> テーブル(表)のセルを作成する
<tfoot> テーブル(表)のフッタ行を定義する
<th> テーブル(表)の見出しとなるセルを作成する
<thead> テーブル(表)のヘッダ行を定義する
<tr> テーブル(表)の横一行を定義する