Sobre este problema HTML
Quando uma célula de tabela usa colspan para abranger múltiplas colunas, a especificação HTML exige que as colunas que estão a ser abrangidas existam realmente e sejam contabilizadas na estrutura de colunas da tabela. Se o colspan de uma célula criar colunas em que nenhuma outra linha tem células a começar, o validador sinaliza essas colunas vazias. Por exemplo, se a sua linha mais larga tem 3 colunas mas outra linha contém uma célula com colspan="6", as colunas 4 a 6 são estabelecidas por essa célula mas são essencialmente colunas fantasma — nenhuma célula em qualquer outra linha começa nelas.
Isto é importante por várias razões. Os leitores de ecrã e tecnologias assistivas dependem de uma estrutura de tabela coerente para navegar pelas células e anunciar as relações coluna/linha. Uma contagem de colunas inconsistente pode confundir estas ferramentas, levando a uma experiência deficiente para utilizadores que dependem delas. Os navegadores podem renderizar a tabela sem erros visíveis, mas a estrutura subjacente é inválida, o que pode causar comportamento de layout imprevisível em diferentes motores de renderização.
Como corrigir
-
Identifique a linha problemática. Procure elementos
<td>ou<th>cujo valor decolspancrie mais colunas do que o resto da tabela define. -
Reduza o valor de
colspanpara que corresponda ao número real de colunas na tabela. - Alternativamente, adicione células a outras linhas se realmente precisar de mais colunas — certifique-se de que cada coluna tem pelo menos uma célula que comece nela.
Uma boa regra prática: o colspan de qualquer célula, combinado com a sua posição de coluna inicial, nunca deve exceder a contagem total de colunas da tabela.
Exemplos
Incorreto: colspan excede a contagem de colunas da tabela
Esta tabela tem 2 colunas (estabelecidas pela primeira linha), mas o colspan="5" da segunda linha tenta abranger 5 colunas. As colunas 3 a 5 não têm células a começar nelas em nenhuma linha.
<table>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td colspan="5">Spans too many columns</td>
</tr>
</table>
Correto: colspan corresponde à contagem de colunas da tabela
Defina o colspan como 2 para que a célula abranja exatamente as colunas que existem.
<table>
<tr>
<td>First</td>
<td>Second</td>
</tr>
<tr>
<td colspan="2">Spans both columns</td>
</tr>
</table>
Incorreto: linhas mistas com contagens de colunas incompatíveis
Aqui a primeira linha estabelece 3 colunas, mas a segunda linha cria uma célula que começa na coluna 1 e abrange 5 colunas, deixando as colunas 4 e 5 sem células a começar nelas.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="5">Too wide</td>
</tr>
</table>
Correto: expanda a tabela ou reduza a extensão
Opção A: Reduza o colspan para corresponder às 3 colunas existentes.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td colspan="3">Spans all three columns</td>
</tr>
</table>
Opção B: Se realmente precisar de 5 colunas, adicione células às outras linhas para que cada coluna tenha uma célula a começar nela.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td colspan="5">Spans all five columns</td>
</tr>
</table>
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.