Cambiar el color de fondo de una tabla HTML
Qué saber
- Más fácil: agregue la propiedad de estilo color de fondo a la etiqueta de tabla, fila o celda.
- Siguiente más fácil: use el atributo bgcolor .
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 anterior usaba el atributo bgcolor para cambiar el color de fondo de una tabla. También se puede usar para cambiar el color de una fila de tabla o de una celda de tabla. Pero el atributo bgcolor ha quedado obsoleto 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 a la
También puede aplicar colores de fondo a las cabeceras de las mesas o al
|_+_|
Cambiar el color de fondo usando hojas de estilo
Sin embargo, es mejor evitar usar el atributo de color de fondo en favor de una hoja de estilo con el formato correcto. Por ejemplo, puede configurar los estilos en una hoja de estilo en el HEAD de su documento HTML o configurarlos 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 manera 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 solo cambio en la elección de color en el CSS que se aplicará de inmediato a todos los casos en que el clase='ColorColor' aparece la sintaxis.
Aunque intercalar CSS en su HTML, o llamar a un archivo CSS separado, agrega un poco de sobrecarga administrativa más allá de simplemente modificar un atributo HTML, descubrirá que confiar en CSS reduce los errores, acelera el desarrollo y mejora la portabilidad de su documento.