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

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

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

マイナビ IT AGENT
※マイナビのプロモーションを含みます。

マークアップ方法・例

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

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

ＨＴＭＬソース

<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>Ａ商品</th><th>Ｂ商品</th><th>Ｃ商品</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>

ＣＳＳソース

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

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

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

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

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

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

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

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

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

公開日：2015年8月4日

制作：

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

BTOパソコンのサイコム

HTMLテーブル「見出し」縦 現在位置

ＨＴＭＬ５ に戻る

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