Tablas estilo cebra con CSS

Las tablas estilo cebra son aquellas que tiene una alternancia en los colores de las líneas, suelen presentan las líneas impares de un color y las líneas pares de otro. En este artículo vamos a ver cómo podemos crear tablas estilo cebra con CSS.

Lo primero será crear una tabla con datos:

...



	
País
	
Capital
	
Superficie
	
Habitantes




	
España
	
Madrid
	
504.645 km2
	
46,6 M

Ahora vamos a trabajar con los estilos CSS. Pero vayamos por parte. Lo primero que aprenderemos será a poner el color de fondo de una fila

table tr {
    background-color: #eee;
}

Hemos utilizado el atributo background-color para dar el color a una fila. Lo que sucede es que este código pone el color de fondo a todas las filas de la tabla.

Si queremos poner el color a una fila en concreto tenemos que utilizar el selector nth-child. El selector nth-child recibe como parámetro el número de la lista de elementos a la cual aplicar el estilo.

table tr:nth-child(2) {
    background-color: #eee;
}

En este caso hemos aplicado el estilo a la segunda fila. Pero claro no vamos a escribir tantas veces esta línea por cada línea que tenga la tabla. Es por ello que nos vamos a apoyar en los modificadores even y odd (lo que viene a ser par e impar)

table tr:nth-child(even) {
    background-color: #eee;
}

table tr:nth-child(odd) {
    background-color: #fff;
}

Así el primer estilo se aplicará a todas las filas que sean pares y el segundo se aplicará a todas las filas que sean impares.

De esta forma conseguimos tener tablas estilo cebra con CSS o también conocidas como «striped tables». El efecto sería similar al siguiente:

Publicaciones relacionadas:

Color de una celda en HTML Color de una fila HTML Alto y ancho de una tabla en HTML Espaciar bordes de una tabla con CSS Color a las columnas de una tabla con CSS