今回のポイント
「col」で縦列をまとめて装飾する方法
colに対して有効なCSS指定と無効なCSS指定
colの親に当たるcolgroupの考え方
縦のCSS指定と横のCSS指定はどちらが優先されるのか
縦にも横にも適切な色分けがされた表を作る方法
塗り分ける色味のうまい決め方

　table系のタグには縦列をまとめるタグも存在します。colとcolgroupです。“まとめる”という言い方がなんとも微妙なんですが，うまく使うと，とても見やすい表を作ることができます。実例を見ながら解説していくことにします。

「col」で縦列をまとめて装飾する

　まずはcolから見てみます（リスト1）。

リスト1●colの使用例
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>tableの基本形</title>

<style type="text/css">
.col_a{
  background-color:#ff0000;
}

.col_b{
  color:#ffffff;  /*この指定は効きません！*/
  background-color:#0000ff;
}

</style>
  </head>
  <body>

<table>
<caption>社員名簿</caption>
<col class="col_a" />
<col class="col_b" />

<thead>
<tr>
<th>社員番号</th>
<th>姓</th>
<th>名</th>
<th>性別</th>
<th>年齢</th>
<th>部課名</th>
<th>役職</th>
<th>内線番号</th>
<th>住所</th>
</tr>
</thead>

<tbody>
<tr>
<td>100001</td>
<td>山田</td>
<td>一郎</td>
<td>男</td>
<td>34</td>
<td>営業部営業一課</td>
<td>課長</td>
<td>1011</td>
<td>東京都港区</td>
</tr>

<tr>
<td>100002</td>
<td>高橋</td>
<td>良子</td>
<td>女</td>
<td>27</td>
<td>営業部営業一課</td>
<td> </td>
<td>1012</td>
<td>東京都杉並区</td>
</tr>

<tr>
<td>100003</td>
<td>鈴木</td>
<td>孝</td>
<td>男</td>
<td>52</td>
<td>営業部</td>
<td>部長</td>
<td>1001</td>
<td>東京都新宿区</td>
</tr>

<tr>
<td>100004</td>
<td>原</td>
<td>達彦</td>
<td>男</td>
<td>47</td>
<td>総務部</td>
<td>部長</td>
<td>2001</td>
<td>埼玉県越谷市</td>
</tr>

<tr>
<td>100005</td>
<td>松井</td>
<td>秀子</td>
<td>女</td>
<td>32</td>
<td>総務部経理課</td>
<td>課長代理</td>
<td>2011</td>
<td>神奈川県横浜市</td>
</tr>

<tr>
<td>100006</td>
<td>長嶋</td>
<td>繁太</td>
<td>男</td>
<td>38</td>
<td>総務部経理課</td>
<td> </td>
<td>2012</td>
<td>千葉県松戸市</td>
</tr>

<tr>
<td>100007</td>
<td>田中</td>
<td>公治</td>
<td>男</td>
<td>36</td>
<td>社長室秘書課</td>
<td>社長秘書</td>
<td>9002</td>
<td>東京都渋谷区</td>
</tr>

<tr>
<td>100008</td>
<td>大道</td>
<td>弘美</td>
<td>女</td>
<td>30</td>
<td>営業部営業二課</td>
<td> </td>
<td>1024</td>
<td>千葉県松戸市</td>
</tr>

</tbody>
</table>

  </body>
  </html>

　このサンプルではtableの中にcolタグが2つ出てきます。ふたつのcolにはそれぞれcol_aとcol_bというクラスを指定し，それぞれのクラスに対してCSS指定で背景色を設定しています（図1）。

図1●リスト1のブラウザ表示
図1●リスト1のブラウザ表示
[画像のクリックで拡大表示]

　colはtableの中で，captionの次，thead（あるいは最初のtr）の前に書きます。 

<table>
  <caption>～</caption>
    <col /> <!--位置はcaptionの下-->
    <col />
    
    <thead> <!--あるいは最初の<tr>-->
      : 以下略

　colそのものは，<col>なにがし</col>のようにタグでテキストを囲むといった使い方はしません。リスト1のサンプルのように，<col class="foo" />という書き方をして，閉じタグではなく末尾が“/>”になります。

　captionの直下に書かれたcolは，一番左の縦列から順に1列ずつに対応します。サンプルは2つのcolが出てきますが，それぞれが一番左の縦列，2番目の縦列に対応しています。つまり10列あるtableで10列すべてに対して装飾を施したい場合は10個のcolを書く必要があるというわけです。

　1列目2列目は装飾が不要で，3列目に対してなにがしかの装飾をしたい場合は次のように書きます。 

<table>
  <caption>～</caption>
    <col /><!--指定無し-->
    <col /><!--指定無し-->
    <col class="foo" /><!--3列目に対してclass指定-->
    
    <thead> <!--あるいは最初の<tr>-->
      : 以下略

　この書き方ではクラス指定がないcolが2つあって，3つめのcolでclass指定がされています。最初の2つのcolは意味を持たない空タグですが，これがないと3列目に対して指定ができません。

　空タグがいくつも書くのが面倒だという場合，次のように書くこともできます。 

<table>
  <caption>～</caption>
    <col span="2" /><!--spanで2列を指定-->
    <col class="foo" /><!--3列目に対してclass指定-->
    
    <thead> <!--あるいは最初の<tr>-->
      : 以下略

　spanというプロパティがでてきます。span="n"と書くことでn列をまとめて意味するcolが作れます。上の例は左の2列（span="2"）に対してはクラス指定をせず空タグとしています。次に出てくる<col class="foo" />は左から3列目に対しての指定になります。

　spanはクラス指定する場合にも使えます（id指定でもかまいません）。 

<table>
  <caption>～</caption>
    <col span="2" class="foo" /><!--左2列はクラスfoo-->
    <col span="3" class="bar" /><!--3列目から5列目はクラスbar-->
    
    <thead> <!--あるいは最初の<tr>-->
      : 以下略

　この例は左の2列に対してfoo，その次の3列に対してbarというクラスを指定しています。colは単体ではブラウザ上で何かしら表示上の特徴，すなわち，太字になったり枠が付いたりするといったことはありません。colが指定されていてもCSSによる装飾がなされていなければ外観上は普通のtableでしかないのです。外見をコントロールするタグではなく「縦列」という意味合いを持たせるだけのタグです。

　colにはspanのほかにalignやbgcolorといったプロパティが存在します。古いHTMLのリファレンスなどでは「bgcolor="#ff0000"で縦列の背景色を変えられます」のように書かれていると思いますが，XHTMLの基本理念によって，そうした装飾はすべてCSSの管轄になっていますので，現在は非推奨扱いです。

　colでは，「span」「class」「id」という，3つのプロパティが使えるのだと考えておけばいいでしょう。あとはCSSで装飾していけばOKというわけです。もちろんタグ内で直接CSSを指定するためにstyleプロパティを使うこともできます。