Verificação HTML: Uma linha da tabela tinha X colunas de largura, que é menos do que o número de colunas estabelecido pela primeira linha (Y).

Sobre este problema HTML

As tabelas HTML estabelecem o seu número de colunas com base na primeira linha. Quando as linhas subsequentes têm menos células <td> ou <th> do que essa linha inicial define, a estrutura da tabela torna-se inválida. Os navegadores normalmente renderizam estas tabelas deixando espaço em branco onde as células em falta deveriam estar, mas a marcação subjacente está malformada.

Isto é importante por várias razões. Os leitores de ecrã e outras tecnologias de apoio dependem de uma estrutura de tabela consistente para navegar entre células e associar dados aos cabeçalhos corretos. Quando faltam células, os utilizadores que dependem destas ferramentas podem receber informações confusas ou incorretas. Além disso, larguras de linha inconsistentes podem levar a comportamento de layout imprevisível em diferentes navegadores e tornar a marcação da sua tabela mais difícil de manter.

Ao contar colunas, lembre-se de que o atributo colspan contribui para o total. Um único <td colspan="3"> conta como três colunas, não uma. Portanto, se a sua primeira linha tem dois elementos <td> e um deles tem colspan="2", a tabela tem três colunas de largura, e todas as outras linhas também devem ter em conta três colunas.

Como corrigir

Existem várias abordagens dependendo da sua intenção:

Adicionar as células em falta — Se os dados foram acidentalmente omitidos, adicione os elementos <td> ou <th> apropriados para completar a linha.
Usar colspan — Se uma célula deve intencionalmente abranger várias colunas, use o atributo colspan para que o número total de colunas coincida.
Adicionar células vazias — Se uma célula simplesmente não tem conteúdo, inclua um <td></td> vazio para manter a estrutura.

Exemplos

❌ Linha com menos colunas do que a primeira linha

A primeira linha estabelece uma tabela de 3 colunas, mas a segunda linha só tem 2 células:

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
  </tr>
</table>

✅ Corrigir adicionando a célula em falta

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
    <td>Product</td>
  </tr>
</table>

✅ Corrigir usando `colspan` para abranger as colunas restantes

Se a segunda linha tem intencionalmente menos células lógicas, use colspan para que o total ainda coincida:

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td colspan="2">Engineer — General</td>
  </tr>
</table>

✅ Corrigir adicionando uma célula vazia

Se simplesmente não há dados para essa coluna, inclua uma célula vazia:

<table>
  <tr>
    <td>Name</td>
    <td>Role</td>
    <td>Department</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
    <td></td>
  </tr>
</table>

❌ Incompatibilidade causada por `colspan` na primeira linha

Tenha cuidado quando a primeira linha usa colspan, pois aumenta o número efetivo de colunas:

<table>
  <tr>
    <td colspan="2">Full Name</td>
    <td>Role</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Engineer</td>
  </tr>
</table>

Aqui a primeira linha abrange 3 colunas (2 + 1), mas a segunda linha só tem 2 células.

✅ Corrigir fazendo coincidir o número total de colunas

<table>
  <tr>
    <td colspan="2">Full Name</td>
    <td>Role</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Smith</td>
    <td>Engineer</td>
  </tr>
</table>