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;
}

▲目次へ戻る