Verificação HTML: Tag de abertura "td" isolado.

Sobre este problema HTML

A especificação HTML define uma hierarquia de aninhamento rigorosa para elementos de tabela. Um <td> (célula de dados de tabela) deve ser um filho direto de um <tr> (linha de tabela), e esse <tr> deve por sua vez estar dentro de uma <table>, <thead>, <tbody>, ou <tfoot>. Quando o analisador do browser encontra um <td> numa localização inesperada, considera-o uma tag de abertura “isolada” — ou seja, o elemento não tem lugar válido no contexto de análise atual.

Este erro ocorre frequentemente em vários cenários:

Um <td> é colocado diretamente dentro de uma <table> sem um <tr> envolvente.
Um <td> é colocado diretamente dentro de <thead>, <tbody>, ou <tfoot> sem um <tr>.
Um <td> aparece completamente fora de qualquer estrutura de tabela, como dentro de uma <div> ou no <body> do documento.
Uma tag <tr> foi acidentalmente eliminada ou mal escrita durante a edição, deixando os seus filhos <td> órfãos.

Porque é que isto importa

Inconsistência do browser: Os browsers usam algoritmos de recuperação de erros para lidar com marcação inválida, mas podem tratar células de tabela isoladas de forma diferente. Alguns browsers podem inserir silenciosamente um <tr> implícito, enquanto outros podem mover o conteúdo completamente para fora da tabela. Isto leva a renderização imprevisível entre browsers.

Acessibilidade: Leitores de ecrã e tecnologias de apoio dependem da semântica adequada das tabelas para navegar e anunciar o conteúdo das células. Um <td> isolado quebra a relação lógica linha-e-coluna, tornando os dados difíceis ou impossíveis de interpretar corretamente pelos utilizadores de tecnologia de apoio.

Manutenibilidade: O aninhamento inválido torna a sua marcação mais difícil de entender, depurar e estilizar com CSS. Os seletores CSS específicos para tabelas e as propriedades podem não comportar-se como esperado quando a estrutura DOM está malformada.

Como corrigir

Localize cada elemento <td> sinalizado pelo validador.
Certifique-se de que é um filho direto de um elemento <tr>.
Certifique-se de que esse <tr> está dentro de uma <table>, <thead>, <tbody>, ou <tfoot>.
Se o <td> estava completamente fora de uma tabela, ou envolva-o numa estrutura de tabela completa ou substitua-o por um elemento mais apropriado como uma <div> ou <span>.

Exemplos

`<td>` diretamente dentro de `<table>` sem `<tr>`

Esta é a causa mais comum. Os elementos <td> são filhos de <table> mas carecem de um <tr> envolvente:

<!-- ❌ Mau: td é um filho direto da table -->

<table>
  <td>Name</td>
  <td>Email</td>
</table>

Envolva as células num <tr>:

<!-- ✅ Bom: td está dentro de um tr -->

<table>
  <tr>
    <td>Name</td>
    <td>Email</td>
  </tr>
</table>

`<td>` diretamente dentro de `<tbody>` sem `<tr>`

<!-- ❌ Mau: td é um filho direto do tbody -->

<table>
  <tbody>
    <td>Alice</td>
    <td>alice@example.com</td>
  </tbody>
</table>

<!-- ✅ Bom: td está envolvido num tr dentro do tbody -->

<table>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>alice@example.com</td>
    </tr>
  </tbody>
</table>

`<td>` usado fora de qualquer contexto de tabela

Por vezes um <td> acaba fora de uma tabela inteiramente, talvez por um erro de cópia-cola ou um erro de template:

<!-- ❌ Mau: td não tem ancestral de tabela -->

<div>
  <td>Some content</td>
</div>

Se pretendia exibir conteúdo num layout não-tabular, use um elemento apropriado:

<!-- ✅ Bom: use um span ou div para conteúdo não-tabular -->

<div>
  <span>Some content</span>
</div>

Tag `<tr>` em falta ou mal escrita

Um erro tipográfico pode deixar elementos <td> órfãos:

<!-- ❌ Mau: tag de abertura tr está mal escrita -->

<table>
  <t>
    <td>Price</td>
    <td>$9.99</td>
  </t>
</table>

<!-- ✅ Bom: elemento tr correto -->

<table>
  <tr>
    <td>Price</td>
    <td>$9.99</td>
  </tr>
</table>

Tabela completa com estrutura adequada

Para referência, aqui está uma tabela bem estruturada usando <thead>, <tbody>, <th>, e <td> — todos corretamente aninhados:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>$4.99</td>
    </tr>
    <tr>
      <td>Gadget</td>
      <td>$14.99</td>
    </tr>
  </tbody>
</table>