テーブル(表)の縦の列を見出し(ヘッダー)にする方法

前のページで説明した「thead要素」によるヘッダー(見出し)の設定は、「行(横方向)」のグループになりますが、ここでは縦の列に対するヘッダー(見出し)設定について説明します。

マークアップ方法・例

縦の列をヘッダー(見出し)に設定する場合は、対象となる個々のセルに対して、「th要素」を設定します。

下記の例では、各支店名や合計の部分を、設定前は「td要素」だったのに対して、「th要素」に入れ替えてますので、文字が太く中央揃えに変化している事をご確認下さい。

HTMLソース

<table>
<caption>
<strong>支店別の従業員数と販売数</strong>
<p>下記の表は、2015年7月時点の支店別従業員数と、同年7月度の販売数を示しています。</p>
</caption>
<thead>
<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>
</thead>
<tbody>
<tr>
<th>函館</th>
<td class="list">10人</td>
<td class="list">30個</td>
<td class="list">20個</td>
<td class="list">10個</td>
</tr>
<tr>
<th>仙台</th>
<td class="list">20人</td>
<td class="list">60個</td>
<td class="list">40個</td>
<td class="list">20個</td>
</tr>
<tr>
<th>大阪</th>
<td class="list">30人</td>
<td class="list">90個</td>
<td class="list">60個</td>
<td class="list">30個</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合計</th>
<td class="list">60人</td>
<td class="list">180個</td>
<td class="list">120個</td>
<td class="list">60個</td>
</tr>
</tfoot>
</table>

CSSソース

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

ブラウザ表示(縦の列に「th要素」設定前)

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

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

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

ブラウザ表示(縦の列に「th要素」設定後)

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

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

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

以上、HTMLのtable(テーブル・表)の縦列を「th」で見出しにするthead要素を説明しました。

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


【ドスパラ】12時までのご注文確定で当日出荷!

公開日:2015年8月4日

制作:落合 正

ホームぺージ作成方法 現在位置

HTML5 に戻る

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

お知らせ

A8.netが技術スタッフを募集中