Que son las tablas cebra? son esas tablas que alternan el color de fondo de las filas o columnas. Como esta:

Les voy a dar tres métodos para lograr esto: uno con CSS3, otro con PHP y CSS, y el último con jQuery y CSS.

Método 1: CSS3

Hace uso de los selectores de CSS3. Tienen dos opciones (al menos esas les voy a dar ): :nth-child o :nth-of-type. A ver, supongamos que tienen la siguiente tabla:

<table>
	<tr>
		<td>Cliente</td>
		<td>Deuda</td>
		<td>Fecha</td>
	</tr>
	<tr>
		<td>Luke Skywalker</td>
		<td>$60</td>
		<td>01/07/2010</td>
	</tr>
	<tr>
		<td>Darth Vader</td>
		<td>$0</td>
		<td>05/07/2010</td>
	</tr>
	<tr>
		<td>Cthulhu</td>
		<td>$200</td>
		<td>25/06/2010</td>
	</tr>
	<tr>
		<td>Padme</td>
		<td>$143</td>
		<td>14/07/2010</td>
	</tr>
</table>

(Pueden verla por acá)

Hermosa tabla, no? . Ahora, vamos a colorear las filas pares:

tr:nth-of-type(even) {
	background: #eee;
}

Para colorear filas pares: (even) o (2n), para las impares: (odd) o (2n+1). Podemos reemplazar :nth-of-type por :nth-child… y va a funcionar . Pasen y vean el ejemplo terminado.

Para aprender más sobre selectores, vean el documento en el sitio de la W3C.

Método 2: PHP y CSS

Esto sirve si lo usamos en un loop (en este caso, voy a usar for):

<table>
	<tr>
		<td>Primer columna</td>
		<td>Segunda columna</td>
		<td>Tercer columna</td>
	</tr>
<?php
	for ($i = 1; $i <= 5; $i++) {
		echo '	<tr class="class-'.($x++%2).'">'."\n";
		echo "		<td>qwerty</td>\n";
		echo "		<td>asdfgh</td>\n";
		echo "		<td>zxcvbn</td>\n";
		echo "	</tr>\n";
	}
?>
</table>

La salida HTML de éste código será:

<table>
	<tr>
		<td>Primer columna</td>
		<td>Segunda columna</td>
		<td>Tercer columna</td>
	</tr>
	<tr class="class-0">
		<td>qwerty</td>
		<td>asdfgh</td>
		<td>zxcvbn</td>
	</tr>
	<tr class="class-1">
		<td>qwerty</td>
		<td>asdfgh</td>
		<td>zxcvbn</td>
	</tr>
	<tr class="class-0">
		<td>qwerty</td>
		<td>asdfgh</td>
		<td>zxcvbn</td>
	</tr>
	<tr class="class-1">
		<td>qwerty</td>
		<td>asdfgh</td>
		<td>zxcvbn</td>
	</tr>
	<tr class="class-0">
		<td>qwerty</td>
		<td>asdfgh</td>
		<td>zxcvbn</td>
	</tr>
</table>

Y si además le pongo este CSS:

	.class-0 {
		background: #eee;
	}

El resultado será este: hagan click acá para ir a la demo .

Como pueden ver, niños y niñas, lo que hace ($x++%2) es alternar entre 0 y 1. Como me salte la fila de títulos, se empezará a aplicar en la primer fila del loop, poniéndole la clase class-0 y alternándola con class-1.

Esto es muy útil si usan mucho PHP y tienen que desarrollar para navegadores que no soporten los selectores CSS3 que mencioné antes.

Método 3: jQuery y CSS

Oooobviamente, para hacerlo de esta forma, necesitan tener jQuery. Una vez que lo bajaron (recomiendo la versión comprimida -minified-), deben insertarlo en su página:

<script type='text/javascript' src='jquery-1.4.2.min.js'></script>

Una vez hecho esto (léase con la voz de Maru Botana), deben utilizar el siguiente código para que jQuery “encuentre” las filas pares, adose el selector :nth-child(even) a sus propiedades y le aplique la clase even:

	$(function() {
		$("table tr:nth-child(even)").addClass("even");
	});

Siendo la tabla la misma que usé en el primer método y el CSS el siguiente:

	.even {
		background: #eee;
	}

Éste es el ejemplo terminado!

Vale aclarar que IE no soporta el primer método (usando directamente el selector de CSS3)… pero eso se arregla usando el último! jQuery le da el soporte! .

Espero que les sirva ^^ y si no… bueno… me chupa un huevo .