Cambiar el color de fondo de una tabla en la Web

Cambiar el color de fondo de una tabla en la Web

Cambiar el color de fondo de una tabla en la Web

VALORACIÓN DEL ARTÍCULO:
5/5


El método para cambiar los colores de fondo de las partes de una tabla en un sitio web ha cambiado con los años, siendo más fácil y menos intensivo en mano de obra con la introducción de hojas de estilo.

El método anterior usaba el atributo bgcolor para cambiar el color de fondo de una tabla. También se puede utilizar para cambiar el color de una fila de tabla o de una celda de tabla. Pero el atributo bgcolor ha sido desaprobado en favor de las hojas de estilo, por lo que no es la forma óptima de manipular el color de fondo de una tabla.

La mejor manera de cambiar el color de fondo es añadir la propiedad style background-color a la etiqueta de tabla, fila o celda.

Este ejemplo cambia el color de fondo de toda una tabla:

Para cambiar el color de una sola fila, inserte la propiedad de color de fondo en la etiqueta :

Puede cambiar el color de una sola celda añadiendo el atributo a la etiqueta :

También puede aplicar colores de fondo a los cabezales de las tablas, o a la etiqueta de la misma manera:

Cambiar el color de fondo usando hojas de estilo

Es mejor, sin embargo, evitar usar el atributo del color de fondo en favor de una hoja de estilo correctamente formateada. Por ejemplo, puede definir los estilos en una hoja de estilo en el ENCABEZAMIENTO de su documento HTML o en una hoja de estilo externa. Cambios como estos en el HEAD o en una hoja de estilo externa pueden aparecer como estos para tablas, filas y celdas:

table { color de fondo: #ff0000; }
tr { color de fondo: amarillo; }
td { color de fondo: #000; }

Configuración del color de fondo de la columna

La mejor manera de establecer el color de fondo para una columna es crear una clase de estilo y luego asignar esa clase a las celdas de esa columna. Crear una clase le permite asignar esa clase a las celdas de una columna específica utilizando un atributo.

El CSS :

El HTML :

celda 1, celda 2, celda 3, celda 3, celda 4, celda 4, celda 4, celda 5, celda 5, celda 5, celda 5, celda 5.celda 1, celda 2, celda 3, celda 3, celda 4, celda 4, celda 4, celda 5, celda 5, celda 5, celda 5, celda 5.  

Una ventaja significativa de controlar los colores de fondo a través de una hoja de estilo es que usted puede cambiar su elección de color en un momento posterior. En lugar de tener que pasar por el documento HTML y hacer el cambio a cada una de las celdas, puede hacer un solo cambio en la elección de color en el CSS que se aplicará inmediatamente a cada instancia en la que aparezca la sintaxis.

Aunque intercalar CSS en su HTML, o llamar a un archivo CSS separado, añade un poco de carga administrativa más allá de simplemente modificar un atributo HTML, encontrará que confiar en CSS reduce los errores, acelera el desarrollo y mejora la portabilidad de su documento.

TAMBIÉN TE INTERESA

marca vivo

La marca vivo atisba un futuro con robots en nuestras casas

La industria tecnológica avanza a pasos agigantados, y en este escenario, la marca vivo se está postulando desde China como uno de los actores clave en la innovación digital. Durante la Conferencia Anual Boao Forum 2025 for Asia, celebrada en Boao, Hainan, la compañía ha presentado su nueva visión del futuro, marcada por la convergencia

SPC Care

Así funciona SPC Care, la primera app de cuidado de personas mayores en remoto

Presentada en 2024, SPC Care es la primera app en España de cuidado a distancia de los mayores. La solución, exclusiva de la marca para dispositivos SPC, permite a cuidadores y familiares de personas mayores controlar de forma remota el teléfono móvil del usuario sénior mediante la gestión de la completa totalidad de los parámetros del dispositivo para facilitar

Peugeot-ChatGPT

Ok Peugeot: un año de idilio entre Peugeot-ChatGPT

Para quien aún no lo sepa, ChatGPT no solo está presente en el móvil y en el ordenador, sino también en los coches. Desde el matrimonio Peugeot-ChatGPT, la firma francesa cumple su primer aniversario con esta herramienta con resultados muy satisfactorios. La marca fue una de las primeras del sector en integrar la Inteligencia Artificial