まず，tableのマークアップは次の通り

<table>
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />
  <col class="col4" />
  <col class="col5" />
  <tr>
    <th>項目1</th>
    <th>項目2</th>
    <th>項目3</th>
    <th>項目4</th>
    <th>項目5</th>
  </tr>
  <tr>
    <td>data11</td>
    <td>data21</td>
    <td>data31</td>
    <td>data41</td>
    <td>data51</td>
  </tr>
  ......
</table>		

colにbackgroundを指定

table col.col1 {
  background: #FFE6E6;
}

table col.col2 {
  background: #FFF3E5;
}

table col.col3 {
  background: #FFFFE5;
}

table col.col4 {
  background: #F3FFE5;
}

table col.col5 {
  background: #E5FFE6;
}

• backgroundは有効（Firefox2，Opera9，Safari，IE6,7）
• NN7.1では効かない。

colにwidthと横方向のpaddingを指定

table col {
  width: 100px;
  padding-left: 10px;
  padding-right: 10px;
}

Firefox2，Opera9，Safari，MacIE5，NN7.1でwidthは効くが，paddingは効かない。

IE6,7ではpaddingも有効。

colにtext-alignを指定

table col {
  width: 100px;
  padding-left: 10px;
  padding-right: 10px;
}

table col.col1 {
  text-align: left;
}

table col.col2,
table col.col3,
table col.col4 {
  text-align: center;
}

table col.col5 {
  ext-align: right;
}

Firefox2，Opera9，Safari，MacIE5，NN7.1でtext-alignは効かない。

IE6,7ではtext-alignが有効

colにfont-weight，colorを指定

table col.col1 {
  font-weight: bold;
  color: #363;
}

table col.col2,
table col.col3,
table col.col4 {
  color: #999;
}

table col.col5 {
  font-weight: bold;
  color: #903;
}

Firefox2，Opera9，Safari，MacIE5，NN7.1でfont-weight，colorは効かない。

IE6,7ではfont-weight，colorが有効

th，tdはcolの子孫要素ではない

• th，tdはcolの子孫要素ではないので，colに指定したtext-align，font-weight，colorなどの値はth，tdに継承されないはず。
• colは内容を持たないただの領域。これが列として並んだ複数のセルと重なっているだけ。
• th，tdを子孫要素のように扱うIE6,7の挙動が正しくない。

では，colgroupはどうだろう。colgroupはcolを子要素として持つことができる。