O método para alterar as cores de fundo de partes de uma tabela em um site mudou ao longo dos anos, tornando-se mais fácil e menos trabalhoso com a introdução de folhas de estilo.
O método mais antigo usava o atributo bgcolor para alterar a cor de fundo de uma tabela. Também pode ser usado para alterar a cor de uma linha da tabela ou de uma célula da tabela. Mas o atributo bgcolor foi preterido em favor de folhas de estilo, por isso não é a melhor maneira de manipular a cor de fundo de uma tabela.
A melhor maneira de alterar a cor do plano de fundo é adicionar a cor de plano de fundo da propriedade de estilo à marca de tabela, linha ou célula.
Isso mudará a cor de fundo de uma tabela inteira:
Para alterar a cor de uma única linha, insira a propriedade background-color na
tag:
Você pode alterar a cor de uma única célula adicionando o atributo ao
tag:
|
Você também pode aplicar cores de plano de fundo às cabeças de tabela ou | tag, da mesma forma: | Alterar cor do plano de fundo usando folhas de estilo
Se você não quiser adicionar a cor de fundo da propriedade de estilo à tabela, existem maneiras alternativas de definir a cor do plano de fundo. Por exemplo, você pode definir os estilos em uma folha de estilos no HEAD do seu documento HTML ou defini-los em uma folha de estilos externa. As alterações no HEAD ou em uma folha de estilos externa podem aparecer como estas para tabelas, linhas e células:
tabela {background-color: # ff0000; } tr {cor de fundo: amarelo; } td {background-color: # 000; } Definindo a cor do plano de fundo da coluna
A melhor maneira de definir a cor do plano de fundo de uma coluna é criar uma classe de estilo e, em seguida, atribuir essa classe às células dessa coluna. Criar uma classe permite atribuir essa classe às células de uma coluna específica usando um atributo.
O CSS:
td.ColColor {background-color: blue; } O HTML:
| célula 1 | célula 2 | | célula 1 | célula 2 |
Uma vantagem significativa do controle de cores de fundo por meio de uma folha de estilo é a capacidade de alterar sua escolha de cores posteriormente. Em vez de ter que passar pelo documento HTML e fazer a alteração em cada célula, você pode fazer uma única alteração na opção de cor no CSS e ela será imediatamente aplicada a todas as instâncias em que a classe = "ColColor" é usada. Isso economiza uma quantidade enorme de tempo e reduz consideravelmente as chances de erros, como a falta de uma mudança de cor da célula.
Mesmo que você nunca tenha alterado as cores de plano de fundo de uma tabela em um documento da Web, copie os exemplos acima e experimente esse método sozinho. Você descobrirá rapidamente como é fácil fazer alterações de cores usando tags de estilo, especialmente folhas de estilo, se estiver trabalhando com sites grandes. Experimente as diferentes opções apresentadas e escolha a que é mais confortável para você.
|
