Tablas con estilo cebra
Una tabla con estilo cebra es una tabla en la que se va alternando el color de fondo de las filas en función de su posición. Normalmente se emplea una alternancia par/impar, aunque también se podría realizar en base a otra numeración:
En el artículo Zebra Tables y en su mejora Better Zebra Tables se explican varias formas clásicas de lograrlo, mediante una combinación de CSS y JavaScript. Sin embargo, estas soluciones son un poco laboriosas y dependientes de la programación.
Desde hace bastantes años (podemos verlo en el artículo CSS: Even and odd rules) existe el selector nth-child() (W3C Selectors Level 3 6.6.5.2. :nth-child() pseudo-class) que permite lograr ese efecto con sólo utilizar CSS. Sin embargo, no es hasta hace poco que se puede usar con seguridad, ya que funciona en casi todos los navegadores (en Internet Explorer no, pero en el artículo How nth-child Works se explica cómo solucionarlo).
Un ejemplo sencillo de uso de este selector es:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Y para terminar, CSS-Based Tables: Modern Solutions ofrece 30 ejemplos de tablas diseñadas con CSS.
Profesor del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante (España). Interesado en el desarrollo y la accesibilidad web.
Excelente y breve. Gracias 🙂
Estimado:
Quisiera ver si me puedes ayudar con un problema que tengo. Estoy usando una tabla con estilo zebra, pero algunas filas las tengo subdivididas, por lo cual el estilo se me repite dentro de la celda subdividida en filas, aún cuando en la practica pertenecen a la misma fila. Cómo puedo solucionar esto?