Skip to main content
Validação HTML

Coluna N da tabela estabelecida pelo elemento “td” não tem células a começar nela.

Sobre este problema HTML

Quando os navegadores constroem a grelha interna de uma tabela, cada célula ocupa uma ou mais posições de coluna. Uma célula com colspan="3" ocupa três posições de coluna, e as colunas são estabelecidas com base no número máximo de posições que qualquer linha utiliza. O validador verifica que cada posição de coluna nesta grelha tem pelo menos uma célula cuja posição inicial esteja nessa coluna. Se uma coluna existe apenas porque outras células se estendem através dela — mas nenhuma célula nunca começa aí — o validador emite este aviso.

Isto é um problema por várias razões:

  • Acessibilidade: Os leitores de ecrã usam o modelo de grelha da tabela para navegar pelas células e anunciar cabeçalhos de coluna. Uma coluna vazia ou órfã confunde esta navegação, tornando a tabela mais difícil de compreender para utilizadores de tecnologia assistiva.
  • Conformidade com padrões: A especificação HTML define um modelo de tabela preciso. Uma coluna sem célula de origem sugere um erro estrutural na marcação da tabela.
  • Inconsistências de renderização: Diferentes navegadores podem lidar com estas colunas órfãs de forma diferente, levando a layouts imprevisíveis.

As causas mais comuns são:

  1. Valores colspan excessivos — uma célula estende-se por mais colunas do que o pretendido, criando colunas extra que outras linhas não preenchem.
  2. Células em falta numa linha — uma linha tem menos células do que o número de colunas da tabela, deixando colunas finais vazias.
  3. Cálculos rowspan incorretos — uma célula estende-se por linhas, mas as linhas subsequentes ainda incluem células para essa posição de coluna, empurrando outras células para colunas não existentes ou deixando lacunas.

Para corrigir o problema, conte o número total de colunas que a sua tabela deve ter, depois verifique que as células de cada linha (considerando colspan e rowspan ativo das linhas anteriores) somam exatamente esse número. Garanta que cada posição de coluna tem pelo menos uma célula a começar nela através de todas as linhas.

Exemplos

Incorreto: colspan cria uma coluna em que nenhuma célula começa

Neste exemplo, a primeira linha estabelece 3 colunas. A segunda linha estende-se pelas 3 com colspan="3". A terceira linha apenas tem 2 células, então a coluna 3 não tem nenhuma célula a começar nela.

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
    <th>Status</th>
  </tr>
  <tr>
    <td colspan="3">Team Alpha</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Developer</td>
<!-- Column 3 has no cell beginning here -->

  </tr>
</table>

Corrigido: cada linha contabiliza todas as colunas

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
    <th>Status</th>
  </tr>
  <tr>
    <td colspan="3">Team Alpha</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Developer</td>
    <td>Active</td>
  </tr>
</table>

Incorreto: colspan excessivo cria colunas extra

Aqui, o colspan="4" da segunda linha estabelece 4 colunas, mas nenhuma outra linha tem uma célula a começar na coluna 4.

<table>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td colspan="4">Full year summary</td>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Corrigido: colspan corresponde ao número real de colunas

<table>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td colspan="3">Full year summary</td>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Incorreto: rowspan causa uma origem de célula em falta

O rowspan="2" em “Alice” significa que a segunda linha já tem a coluna 1 ocupada. Mas a segunda linha apenas fornece uma célula, deixando a coluna 3 sem uma célula inicial em qualquer linha exceto no cabeçalho.

<table>
  <tr>
    <th>Name</th>
    <th>Task</th>
    <th>Hours</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Design</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Code</td>
<!-- Column 1 is occupied by rowspan; column 3 has no cell -->

  </tr>
</table>

Corrigido: a linha expandida inclui o número correto de células

Como rowspan="2" na coluna 1 continua na próxima linha, essa linha apenas precisa de células para as colunas 2 e 3.

<table>
  <tr>
    <th>Name</th>
    <th>Task</th>
    <th>Hours</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Design</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Code</td>
    <td>6</td>
  </tr>
</table>

Uma boa prática é esboçar a grelha da sua tabela no papel ou numa folha de cálculo antes de escrever o HTML. Rotule cada posição de coluna e verifique que cada linha preenche todas as posições — seja com uma célula nova ou com um rowspan transportado de uma linha anterior. Isto torna muito mais fácil detetar valores colspan e rowspan incompatíveis antes de causarem erros de validação.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.