Tablas estilo cebra con CSS

07/Jun/2015 CSS 2 Comentarios
Ejemplos Programación 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:

PaísCapitalSuperficieHabitantes
EspañaMadrid504.645 km246,6 M
ItaliaRoma301.338 km260,7 M
FranciaParís675.417 km266 M
GreciaAtenas131.990 km210,7 M
AlemaniaBerlin357.168 km281,2 M

Vídeos sobre CSS


2 comentarios en “Tablas estilo cebra con CSS”

Víctor Cuervo

oswaldo

Gracias ppor el aporte

Víctor Cuervo

Víctor Cuervo

Oswaldo nos alegra saber que te ha gustado.

Saludos.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*