テーブル（表）のタイトル・説明文「caption要素」

「caption（キャプション）」の意味は、「説明文」「見出し」「字幕」が挙げられます。「caption要素」は、テーブル（表）の「タイトル」を表し、「説明文」を加える事もできます。

▼ 【広告】無料転職支援に登録 ▼

マイナビエージェントの女性のための人材紹介サービス
※マイナビのプロモーションを含みます。

「説明文」は本文で示し「タイトル」は「テーブル（表）」の中に示す場合

説明文は「table要素」の外に記述しますので、視覚的に独立したテーブル（表）になります。

ＨＴＭＬソース

<p>実績</p>
<table>
<caption>
従業員数と販売数</caption>
<tr>
<th rowspan="2">
支店名</th>
<th rowspan="2">
従業員数</th>
<th colspan="3">
販売数</th>
</tr>
<tr>
<th>Ａ商品</th>
<th>Ｂ商品</th>
<th>Ｃ商品</th>
</tr>
<tr>
<td>函館</td>
<td class="list">
10人</td>
<td class="list">
30個</td>
<td class="list">
20個</td>
<td class="list">
10個</td>
</tr>
<tr>
<td>仙台</td>
<td class="list">
20人</td>
<td class="list">
60個</td>
<td class="list">
40個</td>
<td class="list">
20個</td>
</tr>
<tr>
<td>大阪</td>
<td class="list">
30人</td>
<td class="list">
90個</td>
<td class="list">
60個</td>
<td class="list">
30個</td>
</tr>
<tr>
<td>合計</td>
<td class="list">
60人</td>
<td class="list">
180個</td>
<td class="list">
120個</td>
<td class="list">
60個</td>
</tr>
</table>

ＣＳＳソース

table,th,td {
border:solid 1px black;
}
td.list {
border:solid 1px black;
text-align: right;
}

ブラウザ表示

下記の表は、2015年7月時点の支店別従業員数と、同年7月度の販売数を示しています。

支店別の従業員数と販売数
支店名従業員数販売数
Ａ商品Ｂ商品Ｃ商品
函館10人30個20個10個
仙台20人60個40個20個
大阪30人90個60個30個
合計60人180個120個60個

▼ 【広告】ＰＣカスタマイズ ▼

BTOパソコンのサイコム

「タイトル」と「説明文」を「テーブル（表）」の中に示す場合

説明文は「table要素」の中に記述しますので、視覚的にテーブル（表）と一体感が出ます。

ＨＴＭＬソース

<table>
<caption>
<strong>実績</strong>
<p>従業員数と販売数</p>
</caption>
<tr>
<th rowspan="2">
支店名</th>
<th rowspan="2">
従業員数</th>
<th colspan="3">
販売数</th>
</tr>
<tr>
<th>Ａ商品</th>
<th>Ｂ商品</th>
<th>Ｃ商品</th>
</tr>
<tr>
<td>函館</td>
<td class="list">
10人</td>
<td class="list">
30個</td>
<td class="list">
20個</td>
<td class="list">
10個</td>
</tr>
<tr>
<td>仙台</td>
<td class="list">
20人</td>
<td class="list">
60個</td>
<td class="list">
40個</td>
<td class="list">
20個</td>
</tr>
<tr>
<td>大阪</td>
<td class="list">
30人</td>
<td class="list">
90個</td>
<td class="list">
60個</td>
<td class="list">
30個</td>
</tr>
<tr>
<td>合計</td>
<td class="list">
60人</td>
<td class="list">
180個</td>
<td class="list">
120個</td>
<td class="list">
60個</td>
</tr>
</table>

ＣＳＳソース

table,th,td {
border:solid 1px black;
}
td.list {
border:solid 1px black;
text-align: right;
}

ブラウザ表示

支店別の従業員数と販売数

下記の表は、2015年7月時点の支店別従業員数と、同年7月度の販売数を示しています。
支店名従業員数販売数
Ａ商品Ｂ商品Ｃ商品
函館10人30個20個10個
仙台20人60個40個20個
大阪30人90個60個30個
合計60人180個120個60個

以上、HTMLのテーブル（表）のタイトル・説明文「caption要素」について説明しました。

ご覧頂き、ありがとうございます。

公開日：2015年8月2日

制作：

▼ 【広告】サイト･SNSを収益化 ▼

A8.net無料会員募集！

HTMLテーブルのタイトル 現在位置

ＨＴＭＬ５ に戻る

ホームページ作成方法 に戻る