Para facilitar la lectura de las tablas, a menudo resulta útil aplicar estilos a las filas con colores de fondo alternos. Una de las formas más comunes de aplicar estilo a las tablas es establecer el color de fondo de cada fila. Esto a menudo se conoce como "rayas de cebra".
Puede lograr esto configurando cada dos filas con una clase CSS y luego definiendo el estilo para esa clase. Esto funciona, pero no es la mejor ni la más eficaz forma de hacerlo. Al utilizar este método, cada vez que necesite editar esa tabla, es posible que deba editar cada fila de la tabla para asegurarse de que cada fila sea coherente con los cambios. Por ejemplo, si inserta una nueva fila en su tabla, cada dos filas a continuación deben cambiar la clase.
CSS facilita el estilo de las mesas con rayas de cebra. No es necesario agregar ningún extra HTML atributos o clases CSS, solo usa el: nth-of-type (n) Selector de CSS.
El selector: nth-of-type (n) es una pseudoclase 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 enésimo hijo de un tipo particular de su padre.
La letra n puede ser una palabra clave (como par o impar), un número o una fórmula.
Por ejemplo, para diseñar cada etiqueta de párrafo con un color de fondo amarillo, su documento CSS incluiría:
p: n-ésimo de tipo (impar) {
fondo: amarillo;
}
Comience con su tabla HTML
Primero, cree su tabla como lo haría normalmente en HTML. No agregue clases especiales a las filas o columnas.
En su hoja de estilo, agregue el siguiente CSS:
tr: n-ésimo de tipo (impar) {
color de fondo: #ccc;
}
Esto aplicará estilo a cada dos filas con un color de fondo gris comenzando con la primera fila.
Aplicar estilo a las columnas alternas de la misma manera
Puede aplicar el mismo estilo a las columnas de sus tablas. Para hacerlo, simplemente cambie el tr en su clase CSS a td. Por ejemplo:
td: n-ésimo de tipo (impar) {
color de fondo: #ccc;
}
Usar fórmulas en un selector de enésimo tipo (n)
La sintaxis de una fórmula utilizada en el selector es + 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 comienza en 0.
- + es un operador, que también puede ser "-"
- b es un número entero y representa el valor de compensación; por ejemplo, cuántas filas hacia abajo debería el selector comenzar a aplicar el color de fondo. Esto es necesario 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. Su CSS podría verse así:
tr: n-ésimo de tipo (3n + 0) {
fondo: gris pizarra;
}
Herramientas útiles para usar el selector de enésimo tipo
Si se siente un poco intimidado por el aspecto de la fórmula de usar el selector de tipo n-ésimo de pseudo-clase, prueba el: nth Tester sitio 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 pseudoclases aquí, como nth-child).