Para facilitar la lectura de las tablas, a menudo es útil diseñar filas con colores de fondo alternos. Una de las formas más comunes de diseñar tablas es establecer el color de fondo de cada fila. Esto a menudo se conoce como "rayas de cebra".
Puede lograr esto configurando cada fila con una clase CSS y luego definiendo el estilo para esa clase. Esto funciona, pero no es la mejor manera ni la más eficiente de hacerlo. Al usar este método, cada vez que necesite editar esa tabla, tendrá que editar cada fila en la tabla para asegurarse de que cada fila sea consistente con los cambios. Por ejemplo, si inserta una nueva fila en su tabla, cada una de las demás filas debajo de esta necesita cambiar la clase.
CSS facilita el estilo de tablas con rayas de cebra. No es necesario que agregue ningún atributo HTML adicional o clases de CSS, simplemente use el selector de CSS: nth-of-type (n).
El selector: nth-of-type (n) es una pseudo-clase estructural en CSS que le permite diseñar elementos en función de sus relaciones con los elementos principales y hermanos. Puede usarlo para seleccionar uno o más elementos según su orden de origen. En otras palabras, puede coincidir con cada elemento que sea el n º hijo de un tipo particular de su padre.
La letra n puede ser una palabra clave (como impar o par), un número o una fórmula.
Por ejemplo, para aplicar un estilo a cada etiqueta de otro párrafo con un color de fondo amarillo, su documento CSS incluiría:
p: nth-of-type (impar) { fondo: amarillo;}
Comience con su tabla HTML
Primero, cree su tabla como lo haría normalmente en HTML. No agregue ninguna clase especial a las filas o columnas.
En su hoja de estilo, agregue el siguiente CSS:
tr: nth-of-type (impar) { color de fondo: #ccc;}
Esto dará estilo a todas las demás filas con un color de fondo gris que comienza con la primera fila.
Estilo alternando columnas de la misma manera
Puedes hacer el mismo tipo de estilo a las columnas en tus tablas. Para hacerlo, simplemente cambia el tr en tu clase CSS a td. Por ejemplo:
td: nth-of-type (impar) { color de fondo: #ccc;}
Uso de fórmulas en un selector de enésimo de tipo (n)
La sintaxis de una fórmula utilizada en el selector es un + b.
- a es un número que representa el ciclo o el tamaño del índice.
- n es en realidad la letra "n" y representa un contador, que se marca en 0.
- + es un operador, que también puede ser "-"
- b es un número entero y representa el valor de desplazamiento, por ejemplo, cuántas filas más abajo debe el selector comenzar a aplicar el color de fondo. Esto es obligatorio si se incluye un operador en la fórmula.
Por ejemplo, si desea establecer un color de fondo para cada tercera fila, su fórmula sería 3n + 0. Tu CSS podría tener este aspecto:
tr: nth-of-type (3n + 0) { fondo: slategray;}
Herramientas útiles para usar el selector nth-of-type
Si se siente un poco intimidado por el aspecto de la fórmula de usar el selector de enésima clase pseudo-clase, pruebe el: nth Tester site como una herramienta útil que puede ayudarlo a definir la sintaxis para lograr el aspecto que desea. Use el menú desplegable para seleccionar nth-of-type (también puede experimentar con otras pseudo-clases aquí, como nth-child).
