Verificação HTML: O elemento "table" não pode aparecer como descendente do elemento "caption".

Sobre este problema HTML

O elemento <caption> foi concebido para ser um rótulo breve e descritivo para a sua <table> pai. De acordo com a especificação HTML, <caption> aceita conteúdo de fluxo mas proíbe explicitamente elementos <table> descendentes. Esta restrição existe porque uma tabela aninhada dentro de uma legenda cria uma estrutura confusa e semanticamente sem sentido — a legenda deve descrever a tabela, não conter outra.

Por que isto é um problema

Acessibilidade: Os leitores de ecrã anunciam o <caption> como o título da tabela. Uma tabela aninhada dentro de uma legenda cria uma experiência confusa para utilizadores de tecnologias assistivas, pois a relação entre as tabelas torna-se ambígua e a legenda perde o seu propósito descritivo.
Conformidade com padrões: O padrão HTML living do WHATWG afirma explicitamente que <caption> deve ter “nenhum elemento <table> descendente.” Violar isto produz um erro de validação.
Inconsistências de renderização: Os navegadores podem lidar com este aninhamento inválido de forma diferente, levando a layouts quebrados ou imprevisiveis em diferentes ambientes.

Como corrigir

Remova a tabela da legenda. O <caption> deve conter apenas texto e elementos inline simples como <span>, <strong>, <em>, ou <a>.
Coloque a tabela aninhada fora da tabela pai, antes ou depois dela, ou reestruture o seu layout para que ambas as tabelas sejam irmãs.
Se os dados na tabela aninhada estão genuinamente relacionados com o propósito da legenda, considere expressá-los como texto simples ou usar uma abordagem estrutural completamente diferente.

Exemplos

❌ Incorreto: Uma tabela aninhada dentro de uma legenda

<table>
  <caption>
    Summary
    <table>
      <tr>
        <td>Extra info</td>
        <td>Details</td>
      </tr>
    </table>
  </caption>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

Isto desencadeia o erro de validação porque um <table> aparece como descendente do elemento <caption>.

✅ Correto: A legenda contém apenas texto, as tabelas são separadas

<table>
  <caption>Summary — Extra info: Details</caption>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

Se a informação extra realmente requer a sua própria tabela, coloque-a como irmã:

<table>
  <caption>Summary</caption>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

<table>
  <caption>Additional details</caption>
  <tr>
    <td>Extra info</td>
    <td>Details</td>
  </tr>
</table>

✅ Correto: Legenda apenas com formatação inline

<table>
  <caption>
    <strong>Quarterly Results</strong> — <em>All figures in USD</em>
  </caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$1.2M</td>
  </tr>
</table>

Isto é válido porque o <caption> contém apenas texto e elementos inline (<strong>, <em>), sem descendentes <table>.