テーブル（表）の行グループ記述方法

「行（横方向）」のグループは、「thead要素」「tbody要素」「tfoot要素」で囲みます。これらの要素は、スタイルに影響しない事を、下記「ブラウザ表示」の例でご確認下さい。

コーディング方法・表示例

「thead要素」（table head）は、テーブル（表）のヘッダーとなる行のブロックを表します。

「tbody要素」（table body）は、テーブル（表）のデータを記載している行のブロックを表します。

「tfoot要素」（table foot）は、テーブル（表）のフッター行のブロックを表します。下記の例では「合計」に使用しました。

又、下記ブラウザ表示例で、行グループ設定前と後の両方を表示させました。グループ設定を行っても、視覚的には影響しない点をご確認願います。

ＨＴＭＬソース

<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>
<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>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<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;
}

ブラウザ表示（行グループ前の表示）

ブラウザ表示（行グループ後の表示）

ＨＴＭＬ５ に戻る

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

公開日：2015年8日5日

最終更新日：2017年10月3日