Verificação HTML: Tag de abertura "a" encontrada em "table".

Sobre este problema HTML

O elemento HTML <table> segue uma estrutura rígida. Um <table> pode apenas conter <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, e <tr> como filhos diretos. Um <tr> pode apenas conter elementos <td> e <th>. Colocar uma tag <a> (ou qualquer outro conteúdo inline/flow) diretamente dentro de <table>, <tr>, ou outros elementos estruturais de tabela viola este modelo de conteúdo, desencadeando o erro de validação “Tag de abertura a encontrada em table“.

Isto é importante por várias razões. Os navegadores lidam com marcação de tabela inválida de forma inconsistente — alguns podem silenciosamente mover o elemento <a> mal colocado para fora da tabela completamente, enquanto outros podem renderizá-lo em posições inesperadas. Isto leva a layouts imprevisíveis e links quebrados. Leitores de ecrã e outras tecnologias assistivas dependem da estrutura adequada de tabela para navegar o conteúdo, pelo que elementos mal colocados podem tornar a página confusa ou inacessível. Adicionalmente, crawlers de motores de busca podem não associar corretamente o link com o seu contexto pretendido.

A correção é direta: sempre envolva conteúdo inline como <a> dentro de um elemento <td> ou <th>. Todo o conteúdo visível numa tabela deve estar dentro de uma célula de tabela.

Exemplos

❌ Incorreto: `<a>` diretamente dentro de `<tr>`

<table>
  <tr>
    <a href="/details">View details</a>
  </tr>
</table>

O <a> é um filho direto de <tr>, que apenas permite filhos <td> e <th>.

❌ Incorreto: `<a>` diretamente dentro de `<table>`

<table>
  <a href="/details">View details</a>
  <tr>
    <td>Data</td>
  </tr>
</table>

O <a> é um filho direto de <table>, que não permite conteúdo inline.

❌ Incorreto: `<a>` diretamente dentro de `<tbody>`

<table>
  <tbody>
    <a href="/details">View details</a>
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

O <a> está colocado diretamente dentro de <tbody>, que apenas permite elementos <tr> e <script>/<template>.

✅ Correto: `<a>` dentro de um `<td>`

<table>
  <tr>
    <td>
      <a href="/details">View details</a>
    </td>
  </tr>
</table>

✅ Correto: `<a>` dentro de um `<th>`

<table>
  <thead>
    <tr>
      <th>
        <a href="/details">View details</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
</table>

✅ Correto: envolver o conteúdo de uma linha inteira num link

Se quiser tornar uma linha inteira clicável, coloque o <a> dentro de cada <td> em vez de envolver o <tr>:

<table>
  <tr>
    <td><a href="/item/1">Product name</a></td>
    <td><a href="/item/1">$19.99</a></td>
    <td><a href="/item/1">In stock</a></td>
  </tr>
</table>

Isto mantém a estrutura da tabela válida enquanto ainda fornece conteúdo clicável ao longo da linha. Pode usar CSS para remover o estilo visual do link e fazer com que cada <a> preencha toda a sua célula para um efeito de linha clicável uniforme.