「figure要素」でテーブル（表）の説明を入れる方法

「figure（フィギア）」は「像」「図形」などの意味があり「figure要素」は「テーブル（表）」「図形」「写真」などと説明を結びつける場合に使用します。

▼ 【広告】税理士と科目合格者 ▼

税理士専門の人材紹介サービス「マイナビ税理士」
※マイナビのプロモーションを含みます。

マークアップ方法・例

「テーブル（表）」の場合のマークアップ方法は、「table要素」全体を「figure要素」で囲み、要約を「figcaption要素」で示してから、説明文を記述します。

ＨＴＭＬソース

<table>
<figure>
<figcaption>実績
<p>従業員数と販売数</p>
</figure>
<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>
</figcaption>
</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個

以上、「figure要素」でテーブル（表）の説明を入れる方法について説明しました。

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

公開日：2015年8月4日

制作：

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

A8.net無料会員募集！

HTML「figure要素」 現在位置

ＨＴＭＬ５ に戻る

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