Queremos dedicar una sección independiente a mostrarte cómo implementar rayas de cebra, alternando filas de color que facilitan el análisis y la legibilidad de las diversas filas de datos de la tabla. Añade el CSS siguiente al final de tu archivo style.css:
.png "carbon(316).png")
- Ya has visto el selector :nthchild, que se usa para seleccionar elementos hijo específicos. También se le puede dar una fórmula como parámetro, de modo que seleccione una secuencia de elementos. La fórmula 2n1 seleccionaría todos los elementos hijo impares (1, 3, 5, etc.), y la fórmula 2n, todos los elementos hijo pares (2, 4, 6, etc.) Nosotros hemos utilizado las palabras clave odd y even en nuestro código, que hacen exactamente lo mismo que las fórmulas mencionadas. En este caso, damos a las filas pares y a las impares (espeluznantes) colores diferentes.
- También hemos añadido un mosaico de fondo repetitivo a todas las filas del cuerpo de la tabla, que es solo un poco de ruido (un .png semitransparente con un poco de distorsión visual) para proporcionar algo de textura.
- Por último, le hemos dado a toda la tabla un color de fondo sólido para que los navegadores que no admiten el selector :nthchild todavía dispongan de un fondo para las filas del cuerpo de la tabla.
Esta explosión de colores da como resultado el aspecto siguiente:
Esto puede quedar un poco exagerado y no ser de tu agrado, pero el punto que tratamos de explicar es que las tablas no tienen por qué ser aburridas ni académicas.