Skip to main content
Validação HTML

A coluna N da tabela estabelecida pelo elemento “th” não tem células que começem nela.

Sobre este problema HTML

A especificação HTML requer que as estruturas de tabela sejam coerentes — cada coluna numa tabela deve ser “utilizada” por pelo menos uma célula que comece nela. Quando você declara um <th> com colspan="2", está a dizer ao navegador que a tabela tem (pelo menos) duas colunas. Se as linhas do corpo não fornecerem células para preencher essas colunas, a estrutura da tabela torna-se inconsistente.

Isto é importante por várias razões. Leitores de ecrã e outras tecnologias assistivas dependem de uma grelha de tabela bem formada para navegar e anunciar o conteúdo das células. Uma estrutura de colunas inconsistente pode confundir estas ferramentas, levando a uma experiência pobre para utilizadores que dependem delas. Os navegadores também podem renderizar tais tabelas de forma imprevisível, uma vez que têm de adivinhar como lidar com a incompatibilidade.

Causas comuns deste erro incluem:

  • Um valor colspan numa célula de cabeçalho que excede o número real de células nas linhas do corpo.
  • Secções <tbody>, <thead>, ou <tfoot> vazias que deixam colunas declaradas sem quaisquer células.
  • Linhas com menos células do que outras linhas definem, deixando algumas colunas desocupadas.
  • Erros de copiar-colar ou problemas de template onde linhas foram eliminadas mas os cabeçalhos foram deixados inalterados.

Para corrigir isto, examine a estrutura de colunas da sua tabela. Conte o número total de colunas implícitas por cada linha (considerando os atributos colspan e rowspan) e certifique-se de que todas as linhas concordam com a contagem total de colunas. Cada coluna deve ter pelo menos uma célula que comece nela algures na tabela.

Exemplos

Incorreto: colspan cria colunas sem células correspondentes no corpo

Aqui, o cabeçalho declara duas colunas, mas o corpo está vazio, então a coluna 2 não tem células que comecem nela:

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Incorreto: As linhas do corpo têm menos células do que o cabeçalho define

O cabeçalho estende-se por três colunas, mas as linhas do corpo têm apenas duas células cada. A coluna 3 não tem células que comecem nela:

<table>
  <thead>
    <tr>
      <th colspan="3">Wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

Correto: As células do corpo correspondem às colunas definidas pelo cabeçalho

O cabeçalho estende-se por duas colunas, e a linha do corpo fornece exatamente duas células:

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
      <td>with two columns</td>
    </tr>
  </tbody>
</table>

Correto: Cabeçalho de três colunas com células correspondentes no corpo

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Developer</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Correto: Usando colspan nas linhas do corpo para preencher todas as colunas

Se precisar de menos células visíveis numa linha do corpo, use colspan para estender pelas colunas restantes em vez de as deixar vazias:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td colspan="2">Info unavailable</td>
    </tr>
  </tbody>
</table>

Correto: Reduzir colspan para corresponder ao conteúdo real

Se o cabeçalho não precisa verdadeiramente de se estender por múltiplas colunas, simplesmente remova o colspan:

<table>
  <thead>
    <tr>
      <th>The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
    </tr>
  </tbody>
</table>

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.