Cómo cambiar el color de fondo de una tabla HTML

Este artículo explica los métodos para cambiar los colores de fondo de partes de una tabla en un sitio web.

El método más antiguo 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 o celda de una tabla. Pero el atributo bgcolor se ha 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 agregar la propiedad de estilo color de fondo a la etiqueta de tabla, fila o celda.

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

Para cambiar el color de una sola fila, inserte la propiedad background-color en el.

Puede cambiar el color de una sola celda agregando el atributo al.

También puede aplicar colores de fondo a los encabezados de las mesas, o

Cambiar el color de fondo mediante hojas de estilo

Sin embargo, es mejor evitar el uso del atributo de color de fondo en favor de una hoja de estilo con el formato correcto. Por ejemplo, puede establecer los estilos en una hoja de estilo en el HEAD de su documento HTML o establecerlos en un hoja de estilo externa. Los cambios como estos en HEAD o en una hoja de estilo externa pueden aparecer como estos para tablas, filas y celdas:

tabla {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 forma de establecer el color de fondo de una columna es crear un clase de estilo y luego asignarlo a las celdas de la columna. Crear una clase le permite asignar esa clase a las celdas en una columna específica usando un atributo.

El CSS:

td. ColColor {color de fondo: azul; }

El HTML:

celda 1 celda 2 celda 1 celda 2

Una ventaja significativa de controlar los colores de fondo a través de una hoja de estilo es que puede cambiar su elección de color más adelante. En lugar de revisar el documento HTML y realizar el cambio en cada celda, puede realizar un único cambio en la elección de color en el CSS que se aplicará inmediatamente a todas las instancias donde el class = "ColColor" aparece la sintaxis.