W3docs
pt
Entrar

Tag HTML <col>

A tag <col> define as propriedades das colunas de uma tabela HTML. Descrição da tag, atributos e exemplos de uso.

A tag <col> define as propriedades de uma ou mais colunas em uma tabela HTML definida pela tag <table>. Ela permite aplicar estilos a colunas inteiras de uma vez, em vez de estilizar individualmente cada célula <td>. A tag <col> é quase sempre usada dentro da tag <colgroup>, que agrupa uma ou mais colunas com propriedades em comum.

A tag <col> é colocada dentro da tag <table>, antes das tags <thead>, <tbody>, <tfoot> e <tr>, e após a tag <caption>, caso ela seja utilizada (na tag <caption> inserimos o nome da tabela).

Por que usar <col>?

Uma célula de tabela é renderizada na interseção de uma linha e uma coluna, mas a estrutura do HTML é baseada em linhas: <tr> agrupa células horizontalmente, e não há elemento linha a linha que agrupe células verticalmente. O elemento <col> preenche essa lacuna. Em vez de adicionar o mesmo width, background-color ou border a cada <td> de uma coluna, você os declara uma única vez no <col>, e o navegador os aplica em toda a coluna.

Isso é mais útil quando você deseja:

  • Dar a uma coluna uma largura fixa ou proporcional (por exemplo, deixar a primeira coluna estreita e a última larga).
  • Destacar uma coluna com uma cor de fundo para atrair a atenção do leitor.
  • Aplicar uma borda a uma coluna para separá-la visualmente.

Tenha em mente uma limitação: um elemento <col> em si não contém conteúdo e não pode ser estilizado livremente. Os navegadores aplicam apenas um conjunto reduzido de propriedades CSS por meio do <col> — background, border, width e visibility. Propriedades como padding, color ou font-size são ignoradas no <col>; para essas, é necessário estilizar as células <td>/<th> diretamente.

Sintaxe

A tag <col> é vazia, o que significa que a tag de fechamento não é necessária. Mas em XHTML, a tag <col> deve ser auto-fechada (<col />). No HTML5 moderno, a barra de fechamento é omitida (<col>).

Exemplo da tag HTML <col>:

Tag HTML <col>

<!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

O atributo span

O atributo span instrui um elemento <col> a abranger várias colunas consecutivas. Isso evita a repetição do mesmo <col> para colunas adjacentes que devem ter aparência idêntica. O valor deve ser um número inteiro positivo; o padrão é 1.

No exemplo abaixo, um único <col span="3"> estiliza as três primeiras colunas de uma vez, enquanto um segundo <col> estiliza a quarta coluna individualmente:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="3" style="background-color: #eee;" />
        <col style="background-color: #8ebf42;" />
      </colgroup>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>120</td>
        <td>98</td>
        <td>143</td>
        <td>361</td>
      </tr>
    </table>
  </body>
</html>

Estilizando colunas com CSS

Os atributos align, valign e width estão obsoletos no HTML5 — foram removidos da especificação e não devem ser utilizados. A abordagem moderna é definir larguras e outras propriedades suportadas com CSS, em vez de atributos de apresentação inline.

Você pode selecionar um <col> diretamente, ou atribuir a ele uma class e estilizá-la. Como width é uma das propriedades que de fato se aplica por meio do <col>, isso funciona bem:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
      /* Style the column directly */
      col.label {
        width: 60%;
      }
      /* Or use the column index */
      col.value {
        width: 40%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="label" />
        <col class="value" />
      </colgroup>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Keyboard</td>
        <td>$29</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$15</td>
      </tr>
    </table>
  </body>
</html>
Aviso

Apenas um conjunto limitado de propriedades CSS tem efeito quando aplicado ao <col>: background, border, width e visibility (por exemplo, visibility: collapse para ocultar uma coluna). Propriedades como padding, color, text-align e font-size são ignoradas na coluna e devem ser definidas nas células <td> ou <th>.

Acessibilidade

Os elementos <col> e <colgroup> são puramente apresentacionais — agrupam colunas visualmente, mas não criam uma relação semântica que os leitores de tela anunciem. Um leitor de tela navega em uma tabela célula por célula usando as associações de linha (<tr>) e cabeçalho (<th>), e não por grupos de colunas.

Para tornar uma tabela de dados compreensível quando lida fora de ordem:

  • Use células de cabeçalho <th> adequadas com o atributo scope (scope="col" para cabeçalhos de coluna), de modo que cada célula de dados esteja vinculada ao seu cabeçalho.
  • Forneça um <caption> para dar um nome à tabela.
  • Não use background-color em um <col> como a única forma de transmitir significado (como colunas "válidas" vs "inválidas"), pois a cor é invisível para usuários de leitores de tela e para pessoas que não conseguem distingui-la. Combine-a com texto ou ícone.

Atributos

AtributoValorDescrição
spannumberDefine a quantidade de colunas cujas propriedades são determinadas pelo elemento <col>. O número deve ser um inteiro positivo. Se o parâmetro não for especificado, o valor padrão é 1.
alignleft, right, center, justify, charDefine o alinhamento horizontal do conteúdo da coluna. Obsoleto no HTML5 — use a propriedade CSS text-align nas células <td>/<th>.
charcharacterAlinha o conteúdo da coluna a um caractere. Usado apenas com align="char". Obsoleto no HTML5.
charoffnumberDesloca o conteúdo em relação ao caractere de alinhamento. Usado apenas com align="char". Obsoleto no HTML5.
valigntop, middle, bottom, baselineAlinha o conteúdo verticalmente. Obsoleto no HTML5 — use a propriedade CSS vertical-align nas células.
width%, pixels, relative_lengthDefine a largura da coluna. Obsoleto no HTML5 — use a propriedade CSS width no <col> (por exemplo, col { width: 40%; }) em vez disso.

span é o único atributo ainda definido para <col> no HTML5. Tudo o que antes era feito com align, valign e width agora é feito com CSS, conforme mostrado na seção "Estilizando colunas com CSS" acima.

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

Prática

Prática
O que a tag HTML col faz em uma tabela?
O que a tag HTML col faz em uma tabela?
Was this page helpful?