Skip to content

Alterar a cor de fundo de uma tabela HTML

5 de abril de 2021

O que saber

  • Mais fácil: adicione a propriedade de estilo cor de fundo à tabela, linha ou tag de célula.
  • Próximo mais fácil: use o atributo bgcolor.

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

marcação:

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

marcação:

Você também pode aplicar cores de fundo às cabeças das mesas, ou tag, da mesma forma:

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 uma 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: table {background-color: # ff0000; }
tr {cor de fundo: amarelo; }
td {cor de fundo: # 000; }

class = “ql-syntax”>

Definir a cor de fundo da coluna

A melhor maneira de definir a cor de fundo de uma coluna é criar uma classe de estilo e atribuí-la às células da coluna. A criação de 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; }

class = “ql-syntax”>

O HTML:

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

class = “ql-syntax”> 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 aplicada a cada instância onde o class = “ColColor” a sintaxe aparece. Embora intercalar CSS em seu HTML, ou chamar um arquivo CSS separado, acrescente um pouco de sobrecarga administrativa além de apenas modificar um atributo HTML, você descobrirá que confiar em CSS reduz erros, acelera o desenvolvimento e melhora a portabilidade de seu documento. Mais da Lifewire

  • Ilustração de uma pessoa usando CSS para alterar as cores do site

    Como alterar as cores da fonte do site com CSS

  • Homem de óculos no telefone usando um laptop

    Como inserir linhas em HTML com a tag HR

  • Imagem de arte vetorial de um navegador renderizando uma página da web em dois estilos diferentes, separados por uma barra no meio da página

    Como alterar a cor do texto em HTML

  • Ilustração animada da alteração das cores das células do Excel

    Como aplicar cores de fundo a tabelas no Word

  • Ilustração de uma mesa em um laptop

    Como fazer uma mesa no Google Docs

  • Ilustração de programação

    Como usar CSS para centralizar imagens e outros objetos HTML

  • Web designer trabalhando em seu estúdio.

    Como centralizar texto em uma célula de tabela

  • Ilustração de uma pessoa usando CSS para gerenciar uma mesa na web

    Como adicionar linhas internas (bordas) em uma tabela com CSS

  • Usar a função ROUNDUP no Excel economiza tempo.

    Como criar um banco de dados no Excel

  • Dois homens codificando em computadores

    Como definir o estilo de IFrames com CSS

  • Ilustração de uma pessoa alterando fontes com o código css em uma tela de computador

    Como usar CSS para alterar fontes em páginas da web

  • Uma ilustração de um laptop com CSS exibido na tela

    Compreendendo os 3 tipos de estilos CSS

  • Vista lateral do homem trabalhando no escritório

    Usando atributos do elemento HTML TABLE

  • Trabalhador de escritório na estação de trabalho, vista por cima do ombro

    Agrupando vários seletores CSS

  • Como alterar o sublinhado do link em uma página da web

  • Empresários discutindo dados em um laptop

    Como classificar seus dados relacionados no Excel com tabelas

Lifewire

Siga-nos

  • Facebook

  • Sobre nós
  • Anunciar
  • Política de Privacidade
  • Política de Cookies
  • Carreiras
  • Diretrizes editoriais
  • Contato
  • Termos de uso
  • Privacidade da UE
  • Aviso de privacidade da Califórnia



Seus direitos de privacidade

A Lifewire e nossos parceiros terceirizados usam cookies e processam dados pessoais como identificadores exclusivos com base em seu consentimento para armazenar e / ou acessar informações em um dispositivo, exibir anúncios personalizados e para medição de conteúdo, percepção do público e desenvolvimento de produtos. Para alterar ou retirar suas opções de consentimento para Lifewire.com, incluindo seu direito de contestar quando um interesse legítimo é usado, clique abaixo. A qualquer momento, você pode atualizar suas configurações por meio do link “Privacidade da UE” na parte inferior de qualquer página. Essas escolhas serão sinalizadas globalmente para nossos parceiros e não afetarão os dados de navegação. Lista de parceiros (fornecedores)

Nós e nossos parceiros processamos dados para:

Digitalize ativamente as características do dispositivo para identificação. Use dados precisos de geolocalização. Armazene e / ou acesse informações em um dispositivo. Selecione o conteúdo personalizado. Crie um perfil de conteúdo personalizado. Avalie o desempenho do anúncio. Selecione anúncios básicos. Crie um perfil de anúncios personalizados. Selecione anúncios personalizados. Aplique pesquisas de mercado para gerar insights do público. Avalie o desempenho do conteúdo. Desenvolva e melhore produtos. Lista de parceiros (fornecedores)