HTML【 表 】3～tableのグループ化

table内でグループ化をすると、セルの背景色などをCSSで一括指定できるので、<th>や<td>で1つずつ指定する手間が省けてとても便利です。
今回は、そんな表のグループ化について紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

▲目次へ戻る