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

<table>
  <colgroup class="col1"></colgroup>
  <colgroup class="col2"></colgroup>
  <colgroup class="col3"></colgroup>
  <colgroup class="col4"></colgroup>
  <colgroup class="col5"></colgroup>
  <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>		

colgroupにbackgroundを指定

table colgroup.col1 {
  background: #FFE6E6;
}

table colgroup.col2 {
  background: #FFF3E5;
}

table colgroup.col3 {
  background: #FFFFE5;
}

table colgroup.col4 {
  background: #F3FFE5;
}

table colgroup.col5 {
  background: #E5FFE6;
}

• backgroundは有効（Firefox2，Opera9，Safari，IE6,7）

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

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

Firefox2，Opera9，Safariでwidthは効くが，paddingは効かない。

IE6,7ではpaddingも有効。

colgroupにtext-alignを指定

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

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

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

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

Firefox2，Opera9，Safariでtext-alignは効かない。

IE6,7ではtext-alignが有効

colgroupにfont-weight，colorを指定

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

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

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

Firefox2，Opera9，Safariでfont-weight，colorは効かない。

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

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

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