Como alterar a cor de fundo de uma tabela HTML

Este artigo explica os métodos para alterar as cores de fundo de partes de uma tabela em um site.

O método mais antigo usava o atributo bgcolor para alterar a cor de fundo de uma mesa. Também pode ser usado para alterar a cor de uma linha ou célula da tabela. Mas o atributo bgcolor se tornou obsoleto em favor das folhas de estilo, portanto, não é a maneira ideal de manipular a cor de fundo de uma tabela.

A melhor maneira de mudar a cor de fundo é adicionar a propriedade de estilo cor de fundo à tabela, linha ou tag de célula.

Este exemplo muda a cor de fundo de uma tabela inteira:

Para alterar a cor de uma única linha, insira a propriedade background-color no.

Você pode alterar a cor de uma única célula adicionando o atributo ao.

Você também pode aplicar cores de fundo às cabeças das mesas, ou

Alterar a cor do plano de fundo usando folhas de estilo

No entanto, é melhor evitar o uso do atributo background-color em favor de uma folha de estilo formatada corretamente. Por exemplo, você pode definir os estilos em uma folha de estilo no HEAD do seu documento HTML ou defini-los em um folha de estilo externa. Alterações como essas no HEAD ou em uma folha de estilo externa podem aparecer assim para tabelas, linhas e células:

tabela {cor de fundo: # ff0000; }
tr {cor de fundo: amarelo; }
td {cor de fundo: # 000; }

Definir a cor de fundo da coluna

A melhor maneira de definir a cor de fundo de uma coluna é criar um aula de estilo e, em seguida, atribua-o às células da coluna. Criar uma classe permite que você atribua essa classe às células em uma coluna específica usando um atributo.

O CSS:

td. ColColor {cor de fundo: azul; }

O HTML:

célula 1 célula 2 célula 1 célula 2

Uma vantagem significativa de controlar as cores de fundo por meio de uma folha de estilo é que você pode alterar sua escolha de cor posteriormente. Em vez de percorrer o documento HTML e fazer a alteração em cada célula, você pode fazer uma única alteração na escolha da cor no CSS que será imediatamente aplicado a todas as instâncias onde o class = "ColColor" a sintaxe aparece.