HTML - Agrupamento de Colunas em Tabelas

Sintaxe e Uso

O elemento <colgroup> em HTML agrupa colunas dentro de uma tabela e aplica estilos ou formatação a essas colunas. Ele é colocado dentro do elemento <table>, geralmente após o <caption> (se presente) e antes de qualquer elemento <thead>, <tbody> ou <tfoot>.

<table>
  <colgroup>
    <col>
    <col>
    ...
  </colgroup>
  ...
</table>

Dentro do elemento <colgroup>, você pode usar um ou mais elementos <col> para representar cada coluna ou um grupo de colunas. Os elementos <col> são vazios e não têm nenhum conteúdo. Eles servem como referência para aplicar estilos ou atributos às colunas correspondentes.

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  </colgroup>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
    <th>Coluna 4</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
    <td>Dado 3</td>
    <td>Dado 4</td>
  </tr>
</table>

O elemento <colgroup> contém quatro elementos <col>. O primeiro e o quarto elementos <col> representam colunas únicas, enquanto o segundo elemento <col> tem um atributo span definido como "2", indicando que ele abrange duas colunas (Coluna 2 e Coluna 3).

Ao usar os elementos <colgroup> e <col>, você pode aplicar estilos ou atributos a colunas específicas ou grupos de colunas dentro de uma tabela. Isso é útil quando você deseja definir formatação ou estilização consistente para certas colunas sem precisar repetir os estilos para cada célula nessas colunas.

Atributos

O elemento <colgroup> suporta diversos atributos que permitem controlar o estilo e o comportamento dos grupos de colunas dentro de uma tabela.

<table>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col style="width: 200px;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col class="destaque">
    <col class="dados">
  </colgroup>
  ...
</table>

.destaque {
  background-color: yellow;
}

.dados {
  text-align: center;
}

Estilizando Colunas

O elemento <colgroup> em HTML oferece várias maneiras de estilizar colunas dentro de uma tabela. Você pode definir cores de fundo, ajustar larguras de colunas e aplicar bordas e preenchimento a grupos de colunas.

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col span="2" style="background-color: #e6e6e6;">
    <col style="background-color: #d9d9d9;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 50%;">
    <col style="width: 20%;">
  </colgroup>
  ...
</table>

<table>
  <colgroup>
    <col style="border-right: 1px solid #ccc; padding: 5px;">
    <col style="border-right: 1px solid #ccc; padding: 5px;">
    <col style="padding: 5px;">
  </colgroup>
  ...
</table>

Considerações de Acessibilidade

Ao usar o elemento <colgroup> em tabelas HTML, é importante considerar a acessibilidade para usuários que dependem de tecnologias assistivas, como leitores de tela. O uso adequado do <colgroup> pode ajudar a melhorar a acessibilidade das suas tabelas.

Uma forma de usar o <colgroup> para acessibilidade é associar grupos de colunas aos cabeçalhos da tabela. Isso ajuda a estabelecer uma relação clara entre os cabeçalhos e as células de dados correspondentes. Você pode fazer isso usando o atributo scope nos elementos <th> para indicar se são cabeçalhos para linhas ou colunas.

<table>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Cabeçalho 1</th>
      <th scope="colgroup" colspan="2">Cabeçalho 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dados 1</td>
      <td>Dados 2</td>
      <td>Dados 3</td>
    </tr>
  </tbody>
</table>

O primeiro elemento <th> tem um atributo scope definido como "col", indicando que é um cabeçalho para a primeira coluna. O segundo elemento <th> tem um atributo scope definido como "colgroup" e um atributo colspan definido como "2", indicando que é um cabeçalho para a segunda e terceira colunas, que estão agrupadas usando <colgroup>.

Ao associar corretamente os cabeçalhos aos grupos de colunas, os leitores de tela podem fornecer informações mais significativas e contextuais aos usuários. Isso permite que os usuários entendam a relação entre os cabeçalhos e as células de dados dentro de cada grupo de colunas.

Outra consideração de acessibilidade é evitar o uso de <colgroup> apenas para fins visuais. Embora o <colgroup> possa ser usado para aplicar estilos e formatação às colunas, é importante usá-lo de uma maneira que não dependa apenas de elementos visuais. Por exemplo, se você usar cores de fundo para transmitir significado ou agrupamento, certifique-se de fornecer texto alternativo ou rótulos que descrevam o propósito dos grupos de colunas para usuários que podem não ser capazes de perceber cores.

<table>
  <colgroup>
    <col class="categoria">
    <col span="2" class="valores">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Categoria</th>
      <th scope="colgroup" colspan="2">Valores</th>
    </tr>
  </thead>
  ...
</table>

.categoria::before {
  content: "Categoria: ";
}

.valores::before {
  content: "Valores: ";
}

Os elementos <colgroup> têm nomes de classe "categoria" e "valores". As regras CSS correspondentes usam o pseudo-elemento ::before para fornecer texto alternativo para cada grupo de colunas. Esse texto alternativo é acessível aos leitores de tela e ajuda a transmitir o propósito dos grupos de colunas para usuários que podem não ser capazes de perceber visualmente o estilo.

Ao considerar a acessibilidade ao usar <colgroup>, você pode criar tabelas que são mais inclusivas e utilizáveis para uma variedade maior de usuários. A associação adequada de grupos de colunas com cabeçalhos e o fornecimento de texto alternativo para elementos visuais melhoram a acessibilidade das suas tabelas.

Suporte do Navegador

O elemento <colgroup> é compatível com navegadores modernos, incluindo Chrome, Firefox, Safari, Opera e Internet Explorer. A maioria dos navegadores suporta o <colgroup> há muito tempo, e você pode usá-lo em suas tabelas HTML sem se preocupar com problemas de compatibilidade.

No entanto, se você precisa dar suporte a navegadores mais antigos ou lidar com casos específicos, existem algumas estratégias alternativas que você pode considerar.

Uma abordagem é usar CSS para estilizar as colunas da tabela diretamente, sem depender do <colgroup>. Você pode direcionar colunas específicas usando seletores CSS como :nth-child() ou :nth-of-type() e aplicar estilos de acordo.

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
    <th>Cabeçalho 3</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
    <td>Dado 3</td>
  </tr>
</table>

table th:nth-child(1),
table td:nth-child(1) {
  background-color: #f2f2f2;
}

table th:nth-child(2),
table td:nth-child(2) {
  background-color: #e6e6e6;
}

table th:nth-child(3),
table td:nth-child(3) {
  background-color: #d9d9d9;
}

Outra estratégia alternativa é usar estilos inline em células individuais da tabela. Em vez de aplicar estilos aos elementos <colgroup> ou <col>, você pode adicionar o atributo style a cada elemento <th> ou <td> nas colunas que deseja estilizar.

<table>
  <tr>
    <th style="background-color: #f2f2f2;">Cabeçalho 1</th>
    <th style="background-color: #e6e6e6;">Cabeçalho 2</th>
    <th style="background-color: #d9d9d9;">Cabeçalho 3</th>
  </tr>
  <tr>
    <td style="background-color: #f2f2f2;">Dado 1</td>
    <td style="background-color: #e6e6e6;">Dado 2</td>
    <td style="background-color: #d9d9d9;">Dado 3</td>
  </tr>
</table>

Embora essa abordagem funcione, ela pode ser menos eficiente e mais difícil de manter em comparação com o uso de <colgroup> ou CSS externo. No entanto, pode servir como uma alternativa para navegadores que não suportam <colgroup>.

Essas estratégias alternativas podem não ser necessárias na maioria dos casos, já que o <colgroup> tem excelente suporte dos navegadores. A menos que você tenha requisitos específicos para suportar navegadores muito antigos, você pode usar <colgroup> em suas tabelas HTML.

Se você encontrar problemas com o suporte do navegador, você pode consultar recursos online como Can I Use (https://caniuse.com/) ou MDN Web Docs (https://developer.mozilla.org/) para verificar a compatibilidade do <colgroup> com diferentes versões de navegadores e tomar decisões com base no seu público-alvo e requisitos de suporte do navegador.

Exemplos

Nesta seção, veremos exemplos de uso do elemento <colgroup> em tabelas HTML. Começaremos com um exemplo básico e depois passaremos para estilização mais avançada e design responsivo de tabelas.

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col span="2" style="background-color: #e6e6e6;">
  </colgroup>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
    <th>Cabeçalho 3</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
    <td>Dado 3</td>
  </tr>
  <tr>
    <td>Dado 4</td>
    <td>Dado 5</td>
    <td>Dado 6</td>
  </tr>
</table>

<table>
  <colgroup>
    <col class="destaque">
    <col class="dados" span="2">
  </colgroup>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
    <th>Cabeçalho 3</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
    <td>Dado 3</td>
  </tr>
  <tr>
    <td>Dado 4</td>
    <td>Dado 5</td>
    <td>Dado 6</td>
  </tr>
</table>

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
}

.destaque {
  background-color: #f2f2f2;
  font-weight: bold;
}

.dados {
  background-color: #e6e6e6;
}

<table>
  <colgroup>
    <col class="coluna1">
    <col class="coluna2">
    <col class="coluna3">
  </colgroup>
  <thead>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
      <th>Cabeçalho 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dado 1</td>
      <td>Dado 2</td>
      <td>Dado 3</td>
    </tr>
    <tr>
      <td>Dado 4</td>
      <td>Dado 5</td>
      <td>Dado 6</td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
}

.coluna1 {
  width: 30%;
}

.coluna2 {
  width: 40%;
}

.coluna3 {
  width: 30%;
}

@media screen and (max-width: 600px) {
  .coluna1,
  .coluna2,
  .coluna3 {
    width: 100%;
  }
}