Tag HTML <colgroup>

A tag HTML <colgroup> é usada para especificar um grupo de colunas com propriedades comuns dentro de uma tabela. A tag pode conter apenas elementos <col>, que definem as propriedades das colunas.

A tag <colgroup> é aninhada dentro de uma tag <table>, antes de <thead>, <tbody>, <tfoot> e <tr>, e após <caption>, caso seja utilizada (na tag <caption>, o título da tabela é inserido).

Uma única tabela HTML pode incluir várias tags <colgroup>.

Por que usar `<colgroup>`?

As células de uma tabela HTML são escritas linha por linha, portanto não há um lugar natural para aplicar estilos que devem se aplicar a uma coluna inteira. Os elementos <colgroup> e <col> resolvem isso: eles descrevem as colunas da tabela uma vez, antecipadamente, e permitem aplicar propriedades compartilhadas (largura, plano de fundo, bordas) a todas as células dessas colunas ao mesmo tempo.

Dois benefícios práticos:

Estilizar várias colunas de uma vez. Defina uma largura ou plano de fundo em um grupo de colunas e não será necessário repeti-los em cada <td> de cada linha.
Separar estrutura de apresentação. As definições de colunas ficam em um pequeno bloco próximo ao topo da tabela, em vez de ficarem espalhadas pelas células, o que torna a marcação mais fácil de ler e manter.

Sintaxe

A tag <colgroup> vem em pares. O conteúdo é escrito entre as tags de abertura (<colgroup>) e fechamento (</colgroup>).

Exemplo da tag HTML `<colgroup>`:

Tag HTML <colgroup>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Result

Entendendo o atributo `span`

span controla quantas colunas consecutivas um elemento abrange, mas tem significados ligeiramente diferentes dependendo de onde é colocado:

span em <colgroup> declara que o próprio grupo abrange esse número de colunas. Use-o quando quiser tratar várias colunas consecutivas como um bloco estilizado único e não precisar de elementos <col> filhos separados. Por exemplo, <colgroup span="3"> agrupa as três primeiras colunas.
span em um <col> filho declara quantas colunas aquele <col> se aplica. Isso permite que um único <colgroup> descreva várias colunas com regras diferentes, como no exemplo acima em que <col span="2"> cobre as duas primeiras colunas e o próximo <col> cobre a terceira.

Se um <colgroup> contém elementos <col> filhos, os filhos descrevem as colunas e não se deve colocar span também no <colgroup>.

Usando vários elementos `<colgroup>`

Uma tabela pode conter mais de um <colgroup>. Cada grupo reivindica o próximo conjunto de colunas em ordem, o que é útil para separar visualmente seções lógicas de uma tabela:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="background-color:#eee;" />
      </colgroup>
      <colgroup span="2" style="background-color:#cde6a5;"></colgroup>
      <tr>
        <th>Product</th>
        <th>Q1 Sales</th>
        <th>Q2 Sales</th>
      </tr>
      <tr>
        <td>Widgets</td>
        <td>120</td>
        <td>150</td>
      </tr>
      <tr>
        <td>Gadgets</td>
        <td>90</td>
        <td>110</td>
      </tr>
    </table>
  </body>
</html>

Result

O primeiro <colgroup> estiliza a coluna mais à esquerda; o segundo, com span="2", estiliza as duas colunas de vendas como um único grupo.

Estilizando colunas com CSS

A abordagem moderna mais limpa é manter a marcação mínima e mover a apresentação para uma folha de estilos, visando os elementos <col> e <colgroup> com CSS em vez dos atributos obsoletos align, valign e width. Um conjunto limitado, mas útil, de propriedades CSS se aplica por meio desses elementos: background-color, background, border, width e visibility.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 6px;
      }
      .highlight {
        background-color: #8ebf42;
      }
      col.narrow {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="narrow" />
        <col class="highlight" />
      </colgroup>
      <tr>
        <th>Code</th>
        <th>Item</th>
      </tr>
      <tr>
        <td>A1</td>
        <td>Notebook</td>
      </tr>
    </table>
  </body>
</html>

Um detalhe prático importante: o background-color de uma coluna aparece apenas onde as próprias células são transparentes. Se um <td> ou <tr> definir seu próprio plano de fundo, essa cor no nível da célula prevalece sobre a da coluna.

Acessibilidade

<colgroup> e <col> são apenas de apresentação — afetam a aparência, mas não carregam nenhum significado semântico para tecnologias assistivas. Os leitores de tela não anunciam grupos de colunas, e usá-los não associa cabeçalhos a células de dados. Para tornar uma tabela acessível, use células de cabeçalho reais (<th>) com atributos scope apropriados; não confie em <colgroup> para transmitir estrutura.

Atributos

Observação: atributos de apresentação como align, valign e width estão obsoletos no HTML5. Estilize as colunas com CSS (text-align, vertical-align, width) visando os elementos <col> e <colgroup>.

Atributo	Valor	Descrição
`align`	`left` \| `right` \| `center` \| `justify` \| `char`	Define o alinhamento do conteúdo da coluna. Não suportado no HTML5.
`char`	caractere	Alinha o conteúdo da coluna com o caractere especificado. Usado apenas se `align="char"`. Não suportado no HTML5.
`charoff`	número	Desloca o conteúdo da célula em relação ao caractere especificado. Usado apenas se `align="char"`. Não suportado no HTML5.
`span`	número	Define o número de colunas ao qual o elemento `<col>` se aplica. O padrão é 1.
`valign`	`top` \| `middle` \| `bottom` \| `baseline`	Alinha o conteúdo verticalmente. Não suportado no HTML5.
`width`	`%` \| `pixels` \| `relative_length`	Define a largura da coluna. Não suportado no HTML5.

A tag <colgroup> também suporta os Atributos Globais e os Atributos de Evento.

Prática

Qual é a representação correta e o caso de uso da tag HTML colgroup?

A tag <colgroup> define um grupo de uma ou mais colunas em uma tabela para formatação.<colgroup> é uma tag de fechamento automático.Propriedades CSS como background-color e width nunca se aplicam através do <colgroup>.A tag <colgroup> não suporta o atributo span.A tag <colgroup> é usada para agrupar o conteúdo do cabeçalho em uma tabela.

Por que usar <colgroup>?