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

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

広告

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

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

HTMLソース

<p>下記の表は、2015年7月時点の支店別従業員数と、同年7月度の販売数を示しています。</p>
<table>
<caption>支店別の従業員数と販売数</caption>
<tr>
<th rowspan="2">支店名</th><th rowspan="2">従業員数</th><th colspan="3">販売数</th>
</tr>
<tr>
<th>A商品</th><th>B商品</th><th>C商品</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>

CSSソース

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

ブラウザ表示

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

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

広告

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

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

HTMLソース

<table>
<caption>
<strong>支店別の従業員数と販売数</strong>
<p>下記の表は、2015年7月時点の支店別従業員数と、同年7月度の販売数を示しています。</p>
</caption>
<tr>
<th rowspan="2">支店名</th><th rowspan="2">従業員数</th><th colspan="3">販売数</th>
</tr>
<tr>
<th>A商品</th><th>B商品</th><th>C商品</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>

CSSソース

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

ブラウザ表示

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

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

支店名従業員数販売数
A商品B商品C商品
函館10人30個20個10個
仙台20人60個40個20個
大阪30人90個60個30個
合計60人180個120個60個

HTML5 に戻る

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

広告

【人材募集情報】
「A8.net」を開発運用するアフィリエイトソリューションプロバイダーの
株式会社ファンコミュニケーションズが業務拡大につき技術者を募集中。