La tècnica per estilar columnes per navegadors moderns és emprant la pseudo-classe :first-child de tal manera que es pugui seleccionar la cel·la de posició x de cada fila, al combinar-ho amb els selector de germans adjacents.

És a dir, suposant una taula:

<table>
   <tr>
      <td>cel·la 1,1</td>
      <td>cel·la 1,2</td>
      <td>cel·la 1,3</td>
   </tr>
   <tr>
      <td>cel·la 2,1</td>
      <td>cel·la 2,2</td>
      <td>cel·la 2,3</td>
   </tr>
   <tr>
      <td>cel·la 3,1</td>
      <td>cel·la 3,2</td>
      <td>cel·la 3,3</td>
   </tr>
</table>

Per seleccionar la tercera columna i posar el text amb negreta el selector seria:

td:first-child + td + td {
   font-weight: bold;
}

Un cas que donaria problemes amb aquesta rega seria si alguna cel·la tingués un colspan:

<table>
   <tr>
      <td>cel·la 1,1</td>
      <td colspan="2">cel·la 1,2 - 1,3</td>
      <td>cel·la 1,4</td>
   </tr>
   <tr>
      <td>cel·la 2,1</td>
      <td>cel·la 2,2</td>
      <td>cel·la 2,3</td>
      <td>cel·la 2,4</td>
   </tr>
   <tr>
      <td>cel·la 3,1</td>
      <td>cel·la 3,2</td>
      <td>cel·la 3,3</td>
      <td>cel·la 3,4</td>
   </tr>
</table>

Com que la primera cel·la de la segona fila ocupa dos llocs la tercera cel·la pertany a la quarta columna i per tant el selector que hem emprat no servirà. S'haurà de fer un segon selector per contemplar el cas concret:

td:first-child[colspan="2"]+td {
   font-weight: bold;
}

I una altre regla per fer un reset de la tercera cel·la ubicada a la quarta columna:

td:first-child[colspan="2"] + td + td {
   font-weight: bold;
}

Evidentment s'ha de coneixer la taula a priori. Sempre que la taula sigui dinàmica i no coneguem el resultat una opció serà generar aquestes regles també dinamicament.

El cas concret d'estilar la darrera columna de la taula, l'ideal seria usar un simple td:last-child però desgraciadament ni Opera ni Safari l'implementen correctament.

Aquesta solució té el següent suport:

Suport dels navegadors

Navegador	Windows	Mac	Linux
Si ho proveu en algun navegador que no estigui aquí llistat us agrairia que m'informessiu del resultat
Mozilla Firefox 1.5	Sí	Sí	Sí
Opera 8.5	Sí	Sí	Sí
Safari 2.0	-	Sí	-
Camino 1.0	-	Sí	-
OmniWeb 5.1	-	Sí	-
Konqueror 3.4	-	-	Sí
Internet Explorer 7b2	Sí	-	-
Internet Explorer 6	No	-	-
Internet Explorer:mac 5.2	-	No	-

Solució per l'Internet Explorer 6

Per l'Internet Explorer 6 la solució és que la taula tingui la declaració de les columnes mitjançant els elements col i aplicar una classe al col corresponent.

Des que en Federico va donar una solució i la vem polir als comentaris he estat mirant una manera de solucionar el tema per Internet Explorer 6 que no demani afegir aquest extra. Al final m'he decantat per modificar l'arbre DOM.

La idea és senzilla, cal localitzar la taula a modificar i inserir-hi els nous elements.

Em vaig trobar que l'Internet Explorer no aplicava l'estil tot i haver inserit els elements col. Consultant a la llista de javascript en Choan va detectar que l'Internet explorer necessita que els elements col estiguin encapsulats per un element colgroup per poder estilar-los. (Quan es troba l'arbre original amb col el modifica afegint el colgroup).

Una vegada solucionat aquest tema va apareixer un altre bug que es va solucionar afegint la classe a l'element col de la següent manera:

setTimeout(
function() {
   for(i=0;i<columnes;i++) {	
      for(j=0;j<columnes;j++) {
         if (colDestacada[j] == i) {
            col[i].className = "destacat";
         }
      }
   }
}, 0);

Aquest truc també de la mà d'en Choan. Val la pena llegir el seu correu sobre el tema.

Podeu veure l'exemple funcionant o descarregar els arxius comprimits en zip