[16-6] table縦列グループ化（ colgroup, col ）

今回は、テーブルのセルの縦列をグループ化する <colgroup>要素と <col>要素を使います。

セルの縦列をグループ化することで、テーブルの構造を操作しやすくなります。
CSSの指定にも役立ちます。

使用する要素	<colgroup> 〜 </colgroup> <col>（終了タグはありません）

使用する属性	span属性

● 2017年10月、サンプルは本文内に記載し、それに伴い本文も書き直しました。

<colgroup>を使って縦に分けてみよう

サンプルでは、<tbody>を縦に2分割して色分けしました。

来店者数

エリア	店舗名	来店総数	新規来店	リピート
A	渋谷店	100	80	20
	神宮前店	150	100	50
	青山店	200	120	80
B	三軒茶屋店	100	80	20
	二子玉川店	150	100	50
合計		700	480	220

このテーブルは「5列ある縦列を、2列と3列に」分けています。
<colgroup>要素はこのように 合計何列のうち、○列をグループ化する という指定の仕方をします。

<colgroup>要素は、span属性を使ってグループ化したい縦列の列数を指定します。
サンプルのHTMLを見てみましょう。

<table class="sample1">
<caption>来店者数</caption>
<colgroup id="shop" span="2"></colgroup>
<colgroup id="count" span="3"></colgroup>
<thead>
  <tr>
    <th>エリア</th>
    <th>店舗名</th>
    <th>来店総数</th>
    <th>新規来店</th>
    <th>リピート</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th rowspan="3">A</th>
    <td>渋谷店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
  <tr>
    <td>神宮前店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
  <tr>
    <td>青山店</td>
    <td>200</td>
    <td>120</td>
    <td>80</td>
  </tr>
  <tr>
    <th rowspan="2">B</th>
    <td>三軒茶屋店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
  <tr>
    <td>二子玉川店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th colspan="2">合計</th>
    <td>700</td>
    <td>480</td>
    <td>220</td>
  </tr>
</tfoot>
</table>

ハイライト部分が <colgroup> の指定です。
<colgroup>要素を書く場所は、必ず<caption>の直後（ <thead> <tbody> <tfoot> <tr> より前）です。
<caption>要素が無い場合は、<table>開始タグの直後と決まっています。

span属性を使って、最初のグループは「2列」次のは「3列」をまとめると指定しています。ここではCSSの指定をしたいので、それぞれにid名をつけてます。

CSSで縦列の色分けしてみよう

上のサンプルのCSSを見てみましょう。

table.sample1 {
	width: 100%;
	margin:1em 0 3em;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-spacing:0px;
	}
table.sample1 caption {
	font-size: 90%;
	font-weight: bold;
	width: 100%;
	border-bottom: 1px dotted #6f87ff;
	margin-bottom: 10px;
	text-align: center;
	color: #6f87ff;
	}
table.sample1 tr th, table.sample1 tr td {
	text-align: center;
	font-size: 12px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 3px;
	}
table.sample1 thead tr {
	background: #c7ebc9;
	}
table.sample1 tfoot tr {
	background: #86bd7e;
	color:#fff;
	}
table.sample1 colgroup#shop {
	background: #fc6;
	}
table.sample1 colgroup#count {
	background: #ffc;
	}

ハイライト部分が <colgroup>要素 への指定です。
最初の2列のグループ（#shop）は背景色をオレンジ色（#fc6）に、
次の3列のグループ（#count）には黄色（#ffc）を指定していしています。

CSS指定では、<colgroup>より、<thead><tbody><tfoot>が優先されます。
例えば今回のサンプルで、<tbody>に背景色などを指定していたら、<colgroup> 用に指定した背景色は反映されませんので、<tbody>への指定は削除しておかなくてはなりません。

<col>でさらに縦列を分けよう

<col>要素は、<colgroup>内の縦列をさらにグループ化できます。
<col>要素は <colgroup>要素の子要素。
<colgroup>要素内に入れられる要素は <col>だけです。

<colgroup>要素内に <col>を入れて、さらに縦列を分けてみましょう。

来店者数

エリア	店舗名	来店総数	新規来店	リピート
A	渋谷店	100	80	20
	神宮前店	150	100	50
	青山店	200	120	80
B	三軒茶屋店	100	80	20
	二子玉川店	150	100	50
合計		700	480	220

サンプルのHTMLソースを見てみましょう。

<table class="sample2">
<caption>来店者数</caption>
<colgroup><col id="area"><col id="shop"></colgroup>
<colgroup><col id="count"><col span="2" id="count2"></colgroup>

<!--以下略（以下は先ほどのソースと全く同じです）-->

ハイライト部分が <col>要素を加えた指定です。

最初の <colgroup>内に 2つの <col>要素を入れて、それぞれ「area」「shop」という id名を付けています。
2番目の <colgroup>内には、1つの <col>要素と、span属性で 2コをひとまとめにした<col>要素を入れ、それぞれに「count」「count2」というid名を付けています。

上記のように<colgroup>内に<col>を入れたら、<colgroup>にspan属性はつかえません。

また逆に、<colgroup>にspan属性を使ったら<col>は入れられません。

<col>要素を入れるなら、<colgroup>要素に span属性を使用せず、代わりに <col>要素で span属性を使ってグループ分けするルールになっています。

なんかややこしいけど、まあ単純なことです。
<colgroup>要素にとって「 <col>要素」と「span属性」は同じ「分け方の指定をするモノ」なので同時に使えない。
ややこしいのは <col>要素も「span属性」を使うこと。

CSSで背景色を色分けするソースです。
このように、id名をつけた <col>要素に、それぞれ背景色を指定してみました。

table.sample2 colgroup col#area {
	background: #ffecec;
	}
table.sample2 colgroup col#shop {
	background: #fc6;
	}
table.sample2 colgroup col#count {
	background: #ffc;
	}
table.sample2 colgroup col#count2 {
	background: #eeffcd;
	}

<colgroup>は、<col>なし<col>あり混合でもOK！

span属性無しで<col>を入れた<colgroup>と、
span属性ありで<col>なしの<colgroup>を、混合で指定する事もできます。
こんなふうに↓

<colgroup><col><col></colgroup>
<colgroup span="3"></colgroup>

サンプルです。

来店者数

エリア	店舗名	来店総数	新規来店	リピート
A	渋谷店	100	80	20
	神宮前店	150	100	50
	青山店	200	120	80
B	三軒茶屋店	100	80	20
	二子玉川店	150	100	50
合計		700	480	220

サンプルのHTMLソースです。

<table class="sample2">
<caption>来店者数</caption>
<colgroup><col id="area"><col id="shop"></colgroup>
<colgroup span="3" id="count"></colgroup>

<!--以下略（以下は先ほどのソースと全く同じです）-->

CSSはこちら。

table.sample3 colgroup col#area {
	background: #ffecec;
	}
table.sample3 colgroup col#shop {
	background: #fc6;
	}
table.sample3 colgroup#count {
	background: #e2edfa;
	}

次回予告

次回は、音声ブラウザ（音声読み上げソフト）で、テーブルの情報をゲットしやすくするための属性について触れておきます。
<th>要素 と <td>要素に使える headers属性 と、<th> だけで使える scope属性があります。