Dé a sus mesas franjas de cebra para que sean legibles con CSS

Dé a sus mesas franjas de cebra para que sean legibles con CSS

Dé a sus mesas franjas de cebra para que sean legibles con CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Para que las tablas sean más fáciles de leer, a menudo es útil modelar las filas con colores de fondo alternantes. Una de las formas más comunes de crear tablas de estilo es establecer el color de fondo de cada una de las otras filas. A esto se le llama a menudo «rayas de cebra».

Esto se puede lograr configurando cada una de las otras filas con una clase CSS y luego definiendo el estilo para esa clase. Esto funciona, pero no es la mejor o más eficiente manera de hacerlo. Al usar este método, cada vez que necesite editar esa tabla, puede que tenga que editar cada fila de 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 otras filas que hay debajo necesita que se modifique la clase.

CSS facilita la creación de tablas con rayas de cebra. No necesita añadir ningún atributo HTML o clase CSS adicional, sólo tiene que utilizar el selector CSS :nth-of-type(n).

El selector :nth-of-type(n) es una pseudo-clase estructural en CSS que le permite modelar elementos basándose en sus relaciones con los elementos padre y hermano. Puede utilizarlo para seleccionar uno o más elementos en función de su orden de origen. En otras palabras, puede coincidir con cada elemento que es el enésimo 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 cambiar el estilo de cada etiqueta de párrafo con un color de fondo amarillo, su documento CSS incluiría:

p:nth-of-type(odd) {
fondo: amarillo;

Índice de contenidos

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(odd) {
color de fondo:#ccc;

Esto le dará estilo a cada una de las otras filas con un color de fondo gris comenzando con la primera fila.

Alternar Columnas de Estilo de la Misma Manera

Puede hacer el mismo tipo de estilo con las columnas de sus tablas. Para ello, simplemente cambie la tr en su clase CSS a td. Por ejemplo:

td:nth-of-type(odd) {
color de fondo:#ccc;

Uso de Fórmulas en un selector de nth-of-type(n)

La sintaxis de una fórmula utilizada en el selector es an+b.

  • a es un número que representa el tamaño del ciclo o í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 desplazamiento; por ejemplo, cuántas filas hacia abajo debe 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:nth-of-type(3n+0) {
fondo: slategray;

Herramientas útiles para el uso del selector de nth-of-type

Si se siente un poco intimidado por el aspecto de la fórmula de usar el selector de pseudo-clase nth-of-type, pruebe el sitio :nth Tester como una herramienta útil que le puede ayudar a definir la sintaxis para lograr la apariencia que desea. Utilice el menú desplegable para seleccionar el nth-of-type (también puede experimentar con otras pseudo-clases aquí, como nth-child).

TAMBIÉN TE INTERESA

ThinkBook Plus Gen 6 Rollable

ThinkBook Plus Gen 6 Rollable: un portátil que no habíamos visto hasta ahora

El ThinkBook Plus Gen 6 Rollable podría ubicarse en una categoría que se llamara algo así como “Disrupciones”, ya que este portátil ofrece un cambio que hasta ahora no habíamos visto. Su innovación le ha valido uno de los galardones más importantes del mundo en cuestiones de diseño en 2025: es un reddot winner. Y

estafa suplantación del CEO

Suplantación del CEO: un ciberfraude que va a más en las empresas

Una factura falsa, un correo urgente y un remitente que parece ser el líder de una compañía. Así comienza una suplantación del CEO, uno de los ciberataques más sofisticados y efectivos que afectan actualmente a empresas de todo el mundo. Las hackers pueden acceder por diferentes vías con este tipo de ciberfraude, pero la ventana

Nuevos Chromebook Acer

Conoce los 7 nuevos Chromebook Acer, uno de ellos es una tableta desmontable

Nuevos Chromebook Acer llegan al mercado. La diferencia es que ahora estos pequeños grandes portátiles están dominados por la inteligencia artificial, lo cual les hace tener un punto más de interés además de la movilidad. Así que Acer, ahora en rebajas de verano hasta el 1 de agosto, sube el listón en este segmento de

Samsung Galaxy Z Fold7

El Galaxy Z Fold7 apunta a ser el plegable del año

La moda de los teléfonos plegables no ha terminado, ni mucho menos. Tras el Flip7, Samsung lo ha vuelto a hacer. La compañía surcoreana presenta el nuevo Galaxy Z Fold7, su dispositivo plegable más delgado, potente e inteligente hasta la fecha, diseñado para quienes buscan lo último en tecnología móvil sin renunciar a la versatilidad.

venta flash Huawei

Aprovecha la venta flash Huawei con descuentos de hasta el 50%

Días calientes para las compras de tecnología. Además del Amazon Prime Day 2025, también destacan las venta flash Huawei. La firma ha diseñado la que será la mayor campaña de ofertas del año desde el 8 al 31 de julio, con descuentos de hasta un 50% en una amplia gama de productos, y venta flash cada