Estado

Advertencia: al momento de escribir esto (febrero de 2003), los principales navegadores todavía no admiten el selector 'nth-child' (introducido en noviembre de 2001) y muy pocos admiten el elemento COL.

Reglas pares e impares

Una forma de mejorar la legibilidad de tablas de gran tamaño es pintar las filas de colores alternados. Por ejemplo, en la tabla que aparece a continuación, las filas pares tienen fondo gris claro y las filas impares, fondo blanco. Las reglas para hacerlo son extremadamente sencillas:

tr:nth-child(even) {background: #CCC }
tr:nth-child(odd) {background: #FFF}

Mes	1994	1995	1996	1997	1998	1999	2000	2001	2002
ene	14	13	14	13	14	11	11	11	11
feb	13	15	12	15	15	12	14	13	13
mar	16	15	14	17	16	15	14	15	15
abr	17	16	17	17	17	15	15	16	16
may	21	20	20	21	22	20	21	20	19
jun	24	23	25	24	25	23	25	23	24
jul	29	28	26	26	27	26	25	26	25
ago	29	28	27	28	28	27	26	28	26
sep	24	23	23	26	24	24	24	22	21
oct	20	22	20	22	20	19	20	22
nov	18	17	16	17	16	15	14	15
dic	15	13	13	14	13	10	13	11

De hecho, CSS no sólo permite alternar entre pares e impares, sino también según intervalos arbitrarios. Las palabras claves "even" y "odd" no son más que abreviaturas de conveniencia. Por ejemplo, con una lista larga podríamos hacer esto:

li:nth-child(5n+3) {font-weight: bold}

Lo que quiere decir que cada quinto elemento contando a partir del tercero aparecerá en negrita. Dicho de otro modo, estarán en negrita los elementos con la numeración 3, 8, 13, 18, 23, etc.

Columnas pares e impares

Lo mismo vale para columnas de tablas, pero entonces debe haber un elemento del documento que se corresponda con la columna. A tal fin existe en HTML el elemento COL. La tabla debe tener un COL al principio de cada columna:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Mes<th>1994<th>1995<th>1996...

(El elemento COL sirve para otros usos además de la aplicación de estilos, pero en este caso lo único que necesitamos es que haya elementos COL). Las siguientes reglas ponen fondo amarillo a la primera columna y luego fondo gris a las columnas impares a partir de la número 3:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Mes	1994	1995	1996	1997	1998	1999	2000	2001	2002
ene	14	13	14	13	14	11	11	11	11
feb	13	15	12	15	15	12	14	13	13
mar	16	15	14	17	16	15	14	15	15
abr	17	16	17	17	17	15	15	16	16
may	21	20	20	21	22	20	21	20	19
jun	24	23	25	24	25	23	25	23	24
jul	29	28	26	26	27	26	25	26	25
ago	29	28	27	28	28	27	26	28	26
sep	24	23	23	26	24	24	24	22	21
oct	20	22	20	22	20	19	20	22
nov	18	17	16	17	16	15	14	15
dic	15	13	13	14	13	10	13	11

El fondo de las filas (TR) se dibuja enfrente del fondo de las columnas (COL), de modo que no hay que ponerle fondo a las filas, o el fondo de las columnas no será visible.