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

最終更新日:2017年10月31日  (初回投稿日:2011年07月04日)

今回は、テーブルのセルの縦列をグループ化する <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属性があります。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.