HTML 【 表 】3 ～ tableのグループ化
table内でグループ化をすると、セルの背景色などをCSSで一括指定できるので、<th>や<td>で1つずつ指定する手間が省けてとても便利です。
今回は、そんな表のグループ化について紹介します。
目次
１．colgroupとcolで縦列をグループ化してみよう
１．１ colgroup要素
１．２ CSSの設定
１．３ col要素
２．thead、tbody、tfootで横列をグループ化してみよう
２．１ thead要素、tbody要素、tfoot要素
２．２ CSSの設定
１．colgroupとcolで縦列をグループ化してみよう
まず、tableの縦列をグループ化してみましょう。colgroup要素とcol要素を使います。
１．１ colgroup要素
表の縦列をグループ化すると、次のような表を作ることができます。
この表は、colgroup要素を使って、5列ある縦列を2列と3列に分けています。
このようにcolgroupは「合計5列のうち、2列をグループ化する」というような使い方をします。
colgroupの書き方は下の通りです。
<colgroup>は、tableの最初の方にまとめて書きます。
span属性を使って、最初は「2列」をグループ化し、次は「3列」をグループ化する、と指定しています。
１．２ CSSの設定でCSSの設定をしたいので、それぞれにid名（ itemとcost ）を付けています。
<table class="sample1">
<caption>出金管理</caption>
<colgroup span="2" id="item"></colgroup>
<colgroup span="3" id="cost"></colgroup>
<tr>
<th colspan="2">科目</th>
<th>当月料金</th>
<th>先月料金</th>
<th>昨年同月料金</th>
</tr>
・
・
<colgroup>を書く場所は必ず<caption>の下（<tr>の前）です。
<caption>が無い場合は、<table>の直後に書きます。
１．３ col要素でcol要素を使いますが、<colgroup>にspan属性を使ったら、その中に<col>は入れられません。
<col>は<colgroup>の中に入れて、<colgroup>をさらに縦割りするのに使いますが、<col>を入れる場合は、<colgroup>にspan属性を使用せず、代わりに<col>の中でspan属性を使ってグループ分けします。
▲目次へ戻る
１．２ CSSの設定
さきほどの表では、グループ化した縦列を色分けしています（背景色が、水色と薄ピンクの部分です）。
このような指定は、CSSで行います。
CSSの書き方は次の通りです。
table.sample1 colgroup#item {
background: #B0E0E6;
}
table.sample1 colgroup#cost {
background: #FFE4E1;
}
最初の2列のグループ（#item）は背景色に#B0E0E6（水色）を、次の3列のグループ（#cost）には#FFE4E1（薄ピンク）を指定していいます。
▲目次へ戻る
１．３ col要素
colgroupの指定の仕方がわかったところで、次にcol要素の使い方を紹介します。
<col>は、<colgroup>内の縦列をグループ化します。
<colgroup> ～ </colgroup>内に<col>を入れて、さらに縦列を分けてみましょう。
このように、さきほどの表の縦列を、さらに小分けにグループ化して色分けします。
colの書き方は次の通りです。
<table class="sample1">
<caption>出金管理</caption>
<colgroup><col id="subject"><col id="detail"></colgroup>
<colgroup><col id="current"><col span="2" id="compare"></colgroup>
<tr>
<th colspan="2">科目</th>
<th>当月料金</th>
<th>先月料金</th>
<th>昨年同月料金</th>
</tr>
・
・
最初のcolgroup内に2つのcolが入ってます。そして、それぞれ「subject」「detail」というid名を付けています。
2番目のcolgroup内には、1つのcolと、span属性で1つにしたcolが入ってます。そして、それぞれに「current」「compare」というid名を付けています。
このように<colgroup>内に<col>を入れたら、<colgroup>にspan属性は使えません。
<col>を使う時は、「合計5列のうち、2列をグループ化する」という指示を、<col>が担当して、<colgroup>は、<col>のまとめ役をするというイメージです。
次に、CSSで背景色を色分けしましょう。
table.sample1 colgroup col#subject {
background: #FFECEC;
}
table.sample1 colgroup col#detail {
background: #EACFFA;
}
table.sample1 colgroup col#current {
background: #FFC;
}
table.sample1 colgroup col#compare {
background: #EEFFCD;
}
このように、id名をつけた<col>に、それぞれ背景色を指定しました。
ちなみに、下のように、span属性無しで<col>を入れた<colgroup>と、span属性ありで<col>なしの<colgroup>を、混合して書くこともできます。
<colgroup><col><col></colgroup>
<colgroup span="3"></colgroup>
▲目次へ戻る
２．thead、tbody、tfootで横列をグループ化してみよう
今度は、tableの横列をグループ化してみましょう。
tableの横列（tr要素）をグループ化する場合は、thead要素、tbody要素、tfoot要素の3つの要素を使います。
「ヘッダ」「本体」「フッタ」に分けられているので、CSSの指定もわかりやすいです。
２．１ thead要素、tbody要素、tfoot要素
表の横列をグループ化すると、次のような表を作ることができます。
thead、tbody、tfootの書き方は下の通りです。
<table class="sample1">
<caption>出金管理</caption>
<thead>
<tr>
<td colspan="2">科目</td>
<td>当月料金</td>
<td>先月料金</td>
<td>昨年同月料金</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">光熱費</td>
<td>電気</td>
<td>￥8,500</td>
<td>￥8,000</td>
<td>￥9,500</td>
</tr>
<tr>
<td>ガス</td>
<td>￥5,500</td>
<td>￥5,000</td>
<td>￥5,700</td>
</tr>
<tr>
<td>水道</td>
<td>￥4,000</td>
<td>￥3,500</td>
<td>￥4,300</td>
</tr>
<tr>
<td rowspan="2">通信費</td>
<td>携帯電話</td>
<td>￥15,000</td>
<td>￥13,000</td>
<td>￥9,000</td>
</tr>
<tr>
<td>インターネット</td>
<td>￥3,000</td>
<td>￥3,000</td>
<td>￥3,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合計</td>
<td>￥36,000</td>
<td>￥32,500</td>
<td>￥31,500</td>
</tr>
</tfoot>
</table>
<thead> ～ </thead>、<tbody> ～ </tbody>、<tfoot> ～ </tfoot>いずれも、<tr> ～ </tr>を囲むように書きます。
●<thead>
1つのtableの中に1つしか入れられません。
そして、他の<tbody><tfoot>よりも前に入ってなければなりません。
この中に<tr>要素はいくつでも入れられます。
●<tbody>
1つのtableの中に複数入れられます。
この中に<tr>要素はいくつでも入れられます。
●<tfoot>
1つのtableの中に1つしか入れられません。
この中に<tr>要素はいくつでも入れられます。
▲目次へ戻る
２．２ CSSの設定
さきほどの表では、グループ化した横列をCSSで色分け指定しています。
CSSの書き方は次の通りです。
table.sample1 thead tr {
background: #B0E0E6;
}
table.sample1 tfoot tr {
background: #EEFFCD;
}
table.sample1 tbody tr {
background: #FFE4E1;
}
▲目次へ戻る
