Caracteres não-espaço mal posicionados dentro de uma tabela.

A especificação HTML define um modelo de conteúdo estrito para tabelas. Um elemento <table> pode apenas conter <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, e <tr> como filhos diretos. Um elemento <tr> pode apenas conter elementos <td> e <th>. Quando texto ou elementos inline como <span>, <a>, ou <strong> aparecem diretamente dentro de qualquer destes elementos estruturais de tabela, violam o modelo de conteúdo e desencadeiam este erro de validação.

Isto importa por várias razões. Os browsers lidam com conteúdo de tabela mal posicionado de forma inconsistente — alguns vão silenciosamente mover o texto antes da tabela, outros podem descartá-lo, e alguns podem tentar criar células de tabela anónimas. Isto leva a layouts imprevisíveis entre browsers e dispositivos. Os leitores de ecrã dependem da estrutura correta da tabela para navegar células e anunciar relações linha/coluna, portanto conteúdo mal posicionado pode confundir utilizadores de tecnologia assistiva. Adicionalmente, qualquer texto colocado diretamente dentro de um <tr> mas fora de uma célula não é tecnicamente parte de nenhuma estrutura linha/coluna, tornando-o semanticamente sem significado no contexto da tabela.

Causas comuns deste erro incluem:

• Colocar acidentalmente texto entre tags <tr> e <td>
• Colocar um cabeçalho ou parágrafo diretamente dentro de uma <table> (use <caption> em vez disso para títulos de tabela)
• Usar espaços não-quebráveis ( ) ou outros caracteres diretamente dentro de <table> ou <tr> para espaçamento
• Aninhar incorretamente elementos não-tabela como <div>, <p>, ou <form> como filhos diretos de <table> ou <tr>

Exemplos

Texto diretamente dentro de uma linha de tabela

<!-- ❌ Errado: texto é um filho direto de <tr> -->

<table>
  <tr>
    Hello World
    <td>First Cell</td>
    <td>Second Cell</td>
  </tr>
</table>

<!-- ✅ Corrigido: texto é envolvido num <td> -->

<table>
  <tr>
    <td>Hello World</td>
    <td>First Cell</td>
    <td>Second Cell</td>
  </tr>
</table>

Texto diretamente dentro de um elemento de tabela

<!-- ❌ Errado: cabeçalho e texto de espaçamento colocados diretamente em <table> -->

<table>
  Monthly Sales Report
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
</table>

<!-- ✅ Corrigido: use <caption> para títulos de tabela -->

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
</table>

Espaços não-quebráveis usados para espaçamento

<!-- ❌ Errado: &nbsp; diretamente dentro de <tr> -->

<table>
  <tr>
    &nbsp;
    <td>Data</td>
  </tr>
</table>

<!-- ✅ Corrigido: use CSS para espaçamento, ou coloque o conteúdo numa célula -->

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

Elementos inline diretamente dentro de uma tabela

<!-- ❌ Errado: tag <a> diretamente dentro de <table> -->

<table>
  <a href="/details">View details</a>
  <tr>
    <td>Item 1</td>
    <td>$10.00</td>
  </tr>
</table>

<!-- ✅ Corrigido: mova o link para uma célula ou para fora da tabela -->

<table>
  <tr>
    <td>Item 1</td>
    <td>$10.00</td>
    <td><a href="/details">View details</a></td>
  </tr>
</table>

Conteúdo entre secções de tabela

<!-- ❌ Errado: texto entre <thead> e <tbody> -->

<table>
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  No results found
  <tbody>
    <tr>
      <td>—</td>
    </tr>
  </tbody>
</table>

<!-- ✅ Corrigido: coloque a mensagem dentro de uma célula -->

<table>
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>No results found</td>
    </tr>
  </tbody>
</table>

Saiba mais:

MDN Reference

MDN: the table element

→