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

Set of vector templates for multipurpose presentation slides. Modern business design with graph and charts.

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

目次

1.colgroupとcolで縦列をグループ化してみよう
 1.1 colgroup要素
 1.2 CSSの設定
 1.3 col要素
2.thead、tbody、tfootで横列をグループ化してみよう
 2.1 thead要素、tbody要素、tfoot要素
 2.2 CSSの設定

1.colgroupとcolで縦列をグループ化してみよう

まず、tableの縦列をグループ化してみましょう。colgroup要素とcol要素を使います。

1.1 colgroup要素

表の縦列をグループ化すると、次のような表を作ることができます。
colmun_image1575_01
この表は、colgroup要素を使って、5列ある縦列を2列と3列に分けています。
このようにcolgroupは「合計5列のうち、2列をグループ化する」というような使い方をします。

colgroupの書き方は下の通りです。
<colgroup>は、tableの最初の方にまとめて書きます。
span属性を使って、最初は「2列」をグループ化し、次は「3列」をグループ化する、と指定しています。
1.2で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>の直後に書きます。

1.3でcol要素を使いますが、<colgroup>にspan属性を使ったら、その中に<col>は入れられません。
<col>は<colgroup>の中に入れて、<colgroup>をさらに縦割りするのに使いますが、<col>を入れる場合は、<colgroup>にspan属性を使用せず、代わりに<col>の中でspan属性を使ってグループ分けします。

▲目次へ戻る

1.2 CSSの設定

さきほどの表では、グループ化した縦列を色分けしています(背景色が、水色と薄ピンクの部分です)。
このような指定は、CSSで行います。
CSSの書き方は次の通りです。

table.sample1 colgroup#item {
background: #B0E0E6;
}
table.sample1 colgroup#cost {
background: #FFE4E1;
}

最初の2列のグループ(#item)は背景色に#B0E0E6(水色)を、次の3列のグループ(#cost)には#FFE4E1(薄ピンク)を指定していいます。

▲目次へ戻る

1.3 col要素

colgroupの指定の仕方がわかったところで、次にcol要素の使い方を紹介します。
<col>は、<colgroup>内の縦列をグループ化します。
<colgroup>~</colgroup>内に<col>を入れて、さらに縦列を分けてみましょう。
colmun_image1575_02
このように、さきほどの表の縦列を、さらに小分けにグループ化して色分けします。

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>

▲目次へ戻る

2.thead、tbody、tfootで横列をグループ化してみよう

今度は、tableの横列をグループ化してみましょう。
tableの横列(tr要素)をグループ化する場合は、thead要素、tbody要素、tfoot要素の3つの要素を使います。
「ヘッダ」「本体」「フッタ」に分けられているので、CSSの指定もわかりやすいです。

2.1 thead要素、tbody要素、tfoot要素

表の横列をグループ化すると、次のような表を作ることができます。
colmun_image1575_03

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>要素はいくつでも入れられます。

▲目次へ戻る

2.2 CSSの設定

さきほどの表では、グループ化した横列をCSSで色分け指定しています。
CSSの書き方は次の通りです。

table.sample1 thead tr {
background: #B0E0E6;
}
table.sample1 tfoot tr {
background: #EEFFCD;
}
table.sample1 tbody tr {
background: #FFE4E1;
}

▲目次へ戻る