Artículos
CSS

Tablas estilo cebra con CSS

07/Jun/2015

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ís Capital Superficie Habitantes
España Madrid 504.645 km2 46,6 M
Italia Roma 301.338 km2 60,7 M
Francia París 675.417 km2 66 M
Grecia Atenas 131.990 km2 10,7 M
Alemania Berlin 357.168 km2 81,2 M

Código Fuente

Descárgate el código fuente de Tablas estilo cebra con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
2 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios