Uma linha de tabela tinha X colunas de largura e excedeu a contagem de colunas estabelecida pela primeira linha (Y).

Em HTML, a estrutura de uma <table> é implicitamente definida pelas suas linhas e colunas. O primeiro <tr> numa tabela (ou secção de tabela como <thead>, <tbody>, ou <tfoot>) estabelece a contagem de colunas esperada para toda a tabela. Quando uma linha subsequente contém mais células do que a primeira linha, o validador gera este erro porque a grelha de colunas da tabela torna-se inconsistente.

Os navegadores tentarão ainda renderizar tabelas desajustadas, mas os resultados podem ser imprevisíveis e problemáticos. Os leitores de ecrã e outras tecnologias assistivas dependem de uma grelha de tabela bem formada para associar corretamente as células de dados aos seus cabeçalhos. Uma contagem de colunas inconsistente pode causar com que essas ferramentas leiam mal ou ignorem conteúdo, tornando a tabela inacessível aos utilizadores que dependem delas. Além disso, as tabelas inconsistentes são mais difíceis de estilizar com CSS e podem levar a mudanças de layout inesperadas.

Existem várias causas comuns para este problema:

• Células em falta na primeira linha — A primeira linha tem menos elementos <td> ou <th> do que as linhas subsequentes.
• colspan esquecido — Uma célula na primeira linha deveria abranger múltiplas colunas mas está sem um atributo colspan.
• Células extra em linhas posteriores — Uma linha mais abaixo na tabela tem mais células do que o pretendido.
• Aritmética de colspan desajustada — A soma de células e os seus valores colspan não soma consistentemente entre linhas.

Para corrigir isto, reveja cada linha da tabela e certifique-se de que a contagem total de colunas (tendo em conta os atributos colspan e rowspan) é a mesma para cada linha.

Exemplos

Incorreto: segunda linha tem mais colunas que a primeira

A primeira linha define 1 coluna, mas a segunda linha tem 2 colunas.

<table>
  <tr>
    <td>Liza</td>
  </tr>
  <tr>
    <td>Jimmy</td>
    <td>14</td>
  </tr>
</table>

Corrigido: adicionar células em falta à primeira linha

Faça com que ambas as linhas tenham 2 colunas adicionando um cabeçalho ou célula de dados à primeira linha.

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Jimmy</td>
    <td>14</td>
  </tr>
</table>

Corrigido: usar colspan se a primeira linha intencionalmente abranja toda a largura

Se a primeira linha for destinada a ser um único cabeçalho abrangente, use colspan para igualar a contagem total de colunas.

<table>
  <tr>
    <th colspan="2">Informação do Estudante</th>
  </tr>
  <tr>
    <td>Jimmy</td>
    <td>14</td>
  </tr>
</table>

Incorreto: linha posterior excede contagem de colunas com células extra

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>12</td>
    <td>Célula extra</td>
  </tr>
</table>

Corrigido: remover a célula extra ou expandir a linha do cabeçalho

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
    <th>Notas</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>12</td>
    <td>Célula extra</td>
  </tr>
</table>

Incorreto: desajuste de colspan causa totais inconsistentes

A primeira linha abrange 3 colunas no total (1 + colspan="2"), mas a segunda linha tem 4 células.

<table>
  <tr>
    <th>Nome</th>
    <th colspan="2">Contacto</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>liza@example.com</td>
    <td>555-0100</td>
    <td>Sala 4</td>
  </tr>
</table>

Corrigido: ajustar colspan ou contagem de células para que todas as linhas coincidam

<table>
  <tr>
    <th>Nome</th>
    <th colspan="3">Contacto &amp; Localização</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>liza@example.com</td>
    <td>555-0100</td>
    <td>Sala 4</td>
  </tr>
</table>

Ao fazer debug deste problema, conte as colunas efetivas para cada linha somando o número de células mais quaisquer colunas adicionais contribuídas pelos valores colspan (uma célula colspan="3" conta como 3 colunas). Cada linha na tabela deve produzir o mesmo total.

Saiba mais:

MDN Reference

MDN: HTML table basics

→