Tablas estilo cebra con CSS

07/Jun/2015 CSS 2 Comentarios

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:

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. </thead>
  7. <td>España</td>
  8. <td>Madrid</td>
  9. <td>504.645 km<sup>2</sup></td>
  10. <td>46,6 M</td>
  11. </tr>
  12. ...
  13. </tbody>
  14. </table>

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

  1. table tr {
  2. background-color: #eee;
  3. }

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.

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

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)

  1. table tr:nth-child(even) {
  2. background-color: #eee;
  3. }
  4.  
  5. table tr:nth-child(odd) {
  6. background-color: #fff;
  7. }

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


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

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

*

*