22.02.2025

Colorindo Colunas de Tabela com CSS Sem Contagem Individual de Células

Resposta Rápida

Sim, você pode mudar a cor das colunas de uma tabela usando os elementos <colgroup> e <col> em HTML combinados com a pseudo-classe :nth-child em CSS.

/* A primeira coluna é colorida de amarelo */
col:nth-child(1) {
  background-color: yellow;
}

/* A segunda coluna será azul */
col:nth-child(2) {
  background-color: blue;
}

<table>
  <colgroup>
    <!-- Adicione o número necessário de tags <col> -->
    <col><col>
  </colgroup>
  <!-- O conteúdo da tabela irá aqui -->
</table>

Essa abordagem permite que você colore todas as células de uma única coluna uniformemente, dispensando a necessidade de especificar o estilo para cada célula individualmente.

Usando colgroup e col

Com os elementos <colgroup> e <col>, você pode atribuir classes e usar o atributo span para estilizar colunas de forma flexível.

Usando Seletores de Classe

Atribuir classes aos elementos <col> simplifica a estilização das colunas de acordo com um tema específico.

<table>
  <colgroup>
    <!-- Classes para estilizar as colunas com temas específicos -->
    <col class="ensolarado"><col class="oceano">
  </colgroup>
  <!-- O conteúdo da tabela irá aqui -->
</table>

/* Estilizando as colunas inspiradas no sol e no oceano */
.ensolarado { background-color: #FFDA00; }
.oceano { background-color: #0077BE; }

Usando o Atributo Span para Agrupamento de Colunas

Usar o atributo span permite definir estilos comuns para várias colunas adjacentes.

<colgroup>
  <!-- Um grupo de duas colunas com o estilo group-style -->
  <col span="2" class="group-style">
</colgroup>

Estruturas de Tabela Complexas com colgroup

Para estilizar estruturas de tabela complexas, o <colgroup> é perfeito, pois permite uma segmentação clara e visual de diferentes seções.

<table>
  <colgroup class="primeiro-par">
    <!-- Estilizando um par de colunas -->
    <col class="agua"><col class="coral">
  </colgroup>
  <colgroup class="segundo-par">
    <col class="hortelã"><col class="pêssego">
  </colgroup>
  <!-- O conteúdo da tabela irá aqui -->
</table>

Finalizando as Cores Usando o Seletor nth-child

A pseudo-classe :nth-child é uma ferramenta ideal para atribuir cores a colunas específicas devido à sua flexibilidade e eficiência.

Sintaxe e Execução

/* Colunas ímpares serão verdes */
col:nth-child(odd) {
  background-color: green;
}

/* Cada terceira coluna, começando pela primeira, será azul escuro */
col:nth-child(3n+1) {
  background-color: navy;
}

Combinação de Estilos de Cabeçalho e Células

Para unificar o estilo de cabeçalhos e células nas colunas, utilize :nth-child.

/* Cor azul clara para a segunda coluna */
th:nth-child(2), td:nth-child(2) {
  background-color: lightblue;
}

Transparência Usando rgba

A propriedade rgba permite que você defina transparência para colunas, melhorando a legibilidade do texto.

/* A quarta coluna com um pouco de transparência, colorida como fogo */
col:nth-child(4) {
  background-color: rgba(255, 0, 0, 0.2);
}

Visualização

Imagine cada coluna como uma faixa em uma estrada, com cada faixa pintada de uma cor única.

Faixas de trânsito: | 🚗 | 🚕 | 🚙 | 🚌 |

/* Definindo cor para cada faixa */
colgroup > col:first-child { background-color: #FFD700; }
colgroup > col:nth-child(2) { background-color: silver; }
colgroup > col:nth-child(3) { background-color: #FF4500; }
colgroup > col:last-child { background-color: #32CD32; }

🎨🛣️ Agora, com o CSS aplicado, nossa estrada parece brilhante e colorida 🚗💛 🚕🥈 🚙🔶 🚌🍏

O elemento <col> colore toda a "estrada", ou seja, a coluna, em vez de "carros" individuais — as células.

Design Responsivo – Nossa Prioridade

Na era da internet móvel, adaptar os tamanhos das colunas às dimensões da tela é uma tarefa crítica.

Media Queries

Utilize media queries para ajustar as cores das colunas com base no tamanho da tela.

@media (max-width: 768px) {
  /* Mudar a cor da primeira coluna para telas pequenas */
  col:nth-child(1) { background-color: plum; }
}

Flexibilidade de Tabelas Colapsáveis

Adapte-se e ajuste as estruturas das tabelas para manter a coerência visual mesmo em telas pequenas.

Usando Propriedades Personalizadas de CSS

As variáveis CSS simplificam a gestão do esquema de cores:

:root {
  /* Definindo a cor primária */
  --cor-primaria: #ff4500;
}

col:nth-child(1) {
  /* Usando a cor primária */
  background-color: var(--cor-primaria);
}

Compatibilidade com Navegadores

A pseudo-classe :nth-child e os estilos CSS em elementos <col> podem não ser suportados em alguns navegadores. Utilize as seguintes abordagens e recursos para se manter informado.

Cores de Fallback

Defina uma opção de cor padrão para os usuários que podem enfrentar suporte CSS limitado:

/* Cor cinza segura em caso de incompatibilidade */
col { background-color: #c0c0c0; }

Usando @supports

Determine quais propriedades CSS são suportadas pelos navegadores e ative os estilos de acordo:

@supports (background-color: rgba(0, 0, 0, 0.5)) {
  /* Para navegadores que suportam transparência */
  /* Defina a cor verde com um pouco de transparência */
  col:nth-child(2) { background-color: rgba(0, 128, 0, 0.3); }
}

Teste Cruzado em Navegadores

Use várias ferramentas para testar em diferentes dispositivos e minimizar os riscos de compatibilidade.

Recursos Úteis

1. nth-of-type | CSS-Tricks - CSS-Tricks — análise detalhada do seletor nth-of-type.
2. column-count - CSS: Cascading Style Sheets | MDN — guia oficial do MDN sobre a propriedade CSS column-count.
3. nth-child() - CSS: Cascading Style Sheets | MDN — detalhamento passo a passo da pseudo-classe :nth-child(), ajudando você a dominar a estilização de colunas.
4. A Complete Guide to the Table Element | CSS-Tricks - CSS-Tricks — um guia completo sobre tabelas HTML, incluindo coloração de colunas.
5. Top 10 CSS Table Designs — Smashing Magazine — um conjunto inspirador de designs de tabelas discutindo e mostrando a coloração de colunas.
6. Can I use... Support tables for HTML5, CSS3, etc — verifique o suporte a seletores CSS em vários navegadores.

Video

Navigation