Tablas con Estilo de Zebra con CSS3 (A Fondo)

Es normal ver en algunos sitios como las filas de algunas tablas tienen un color diferente a la otra. Esto se hace para facilitar la lectura de la información que está tabulada, además que visualmente es agradable a la vista del visitante o usuario. Ahora, como desarrolladores o diseñadores, es necesario que sepamos como se logra ese efecto. Y eso es lo que pretendo explicarles con este post.

Para lograr tal efecto necesitaremos hacer uso de la pseudo selector que viene con la versión tres de las hojas estilo en cascada (CSS3), :nth-child.

Antes

Hay dos formas de lograr tal efecto. Uno es a lo feo y otro es a lo bien (usando CSS3).

A lo feo es crear una clase y asignarla a las filas (pares o impares) de la tabla. Si bien es totalmente funcional, se hace difícil de mantener cuando la tabla crece mucho o cuando se genera dinámicamente.

A lo bien es usando el pseudo selector :nth-child con la siguiente formula.

:nth-child(an+b)

La cual explicaré en breve. No sin antes aclara que la versión original donde aprendí a usar este elemento está en la web de desarrolladores (en Inglés) de Opera.

Funcionamiento

Este selector trabaja así.

Español:

La n en la formula es un contador que inicia en cero y avanza —incrementalmente— hasta que se le agoten los elementos hijos. La variable b representa el punto de partida del contador, es decir, la posición del primer elemento desde el cual se inicia el conteo. La variable a indica la posición de los elementos que deben afectarse luego de b.

Original:

That n is basically a counter: it begins with zero, then it moves up incrementally until it runs out of children elements. Then the b variable represents the counter’s starting place—in other words, the position of first element we begin counting from. Finally, the a variable represents the positions of the elements we match after that.

Usaré el ejemplo que colocan en esa web.

:nth-child(5n+2)

Esto quiere decir que una asignación de estilo, por ejemplo,

tr:nth-child(5n+2){
background-color: #99ff99;
}

dará un color de fondo (#99ff99) a las filas de una tabla arrancando desde la segunda posición (variable b), y a cada fila cada cinco posiciones (variable a) después de la inicial. La imagen siguiente explica un poco la formula.

tabla estilo zebra
Fíjense en la tercera columna

Logrando la Tabla Estilo Zebra

Para obtener el efecto de zebra, nos valemos del selector ya presentado. Si entendimos bien como funciona (y si expliqué bien), comprenderemos que  es muy fácil lograr el efecto deseado. La formula sería la siguiente:

tr:nth-child(2n+1)

La cual nos indica que iniciando desde la posición uno dentro de la tabla, estilizaremos, partiendo de ahí, esa fila y las siguientes cada dos posiciones. Para mejor detalle, una imagen.

tabla estilo zebra
Tercera columna

Es así como podemos conseguir una tabla visualmente agradable para el visitante y que además hace buen uso de los elementos que nos da la tercera versión de las hojas de estilo en cascada.

Si quieres leer la fuente original, en inglés, puedes visitar la web de desarrolladores de Opera.

Tablas con estilo zebra.

Anuncios

Autor: cesc1989

Ingeniero de Sistemas que le gusta escribir y compartir sobre recursos que considera útiles, además que le gusta leer manga y ver anime.

1 comentario en “Tablas con Estilo de Zebra con CSS3 (A Fondo)”

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s