現在htmlｻｲﾄを作成しています <HTML><HEAD><STYLE type=text/css>col.a { background-color: green; }col.a { color: red; }</STYLE><BODY> <TABLE><col class="a" span…

現在htmlｻｲﾄを作成しています
<HTML><HEAD><STYLE type=text/css>col.a { background-color: green; }col.a { color: red; }</STYLE><BODY>
<TABLE><col class="a" span="2" />
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</TABLE></HEAD></HTML>
をgoogle chromeで表示させた場合左2列の背景色は緑色に変わるのですが文字色は黒色のまま変わりません｡
どうすれば文字色を赤色に変えることができるのでしょうか？
行数がたくさんあるｻｲﾄで左2列の背景色と文字色を変えたいので教えて下さい｡

colおよびcolgroupでは､ﾌｫﾝﾄ関連の装飾に関するﾌﾟﾛﾊﾟﾃｨは無効のようです｡

･CSS - col要素に有効なﾌﾟﾛﾊﾟﾃｨ
http://www.d-spica.com/try/col.html

･col／colgroup 要素で有効なｽﾀｲﾙと無効なｽﾀｲﾙ｡
http://blog.btmup.com/xhtml/col-colgroup-css.html

※上記記事のﾘﾝｸ先｢第25回 tableをもっと見やすくﾃﾞｻﾞｲﾝする｣(http://itpro.nikkeibp.co.jp/article/COLUMN/20080730/311764/)の説明が詳しいです｡(※該当箇所は2ﾍﾟｰｼﾞ目にありますが､閲覧するにはﾛｸﾞｲﾝが必要です｡)

IE9以降およびﾓﾀﾞﾝﾌﾞﾗｳｻﾞに対応していればいいのでしたら､次のようにnth-child(n)を使って指定してみてください｡

td:nth-child(1), td:nth-child(2) { background-color: green; color: red; }

･<colgroup> - ﾃｰﾌﾞﾙのｶﾗﾑ設定
http://www.tohoho-web.com/html/colgroup.htm

※古いﾌﾞﾗｳｻﾞにも適用させたい場合は､個別にｸﾗｽを割り当てて指定するしかないと思います｡

(IE8以下の対応も要る場合)
CSSの｢隣接ｾﾚｸﾀ｣を利用すれば左2列だけに色を付けることができます｡
隣接ｾﾚｸﾀの説明は外部ｻｲﾄを参照してください｡

隣接ｾﾚｸﾀ - CSS | MDN

今回の場合は以下のように2ｽﾃｯﾌﾟで期待通りの表示ができます｡

td全ての背景色､文字色を変える
3列目以降の背景色､文字色を元に戻す

td{
 background: green;
 color: red;
}
td + td + td {
 background: none;
 color: black;
}

ﾃﾞﾓ
http://jsbin.com/gist/6419948

それから他の方法で対処するとしても､HTMLで以下の点を直す必要があります｡

HEADの閉じ位置を直す
BODYの閉じﾀｸﾞを書く
DOCTYPE宣言を書く