ITコラム

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

ITコラム

2016.12.06

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

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要素

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

この表は、colgroup要素を使って、5列ある縦列を2列と3列に分けています。

このようにcolgroupは「合計5列のうち、2列をグループ化する」というような使い方をします。

colgroupの書き方は下の通りです。

<colgroup>は、tableの最初の方にまとめて書きます。

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

1.3 col要素で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>を入れて、さらに縦列を分けてみましょう。

このように、さきほどの表の縦列を、さらに小分けにグループ化して色分けします。

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要素

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

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

▲目次へ戻る

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.