Verificação HTML: Tag de início "th" no corpo da tabela.

Sobre este problema HTML

Quando você escreve uma <table> sem usar explicitamente <thead> e <tbody>, o analisador HTML automaticamente envolve os seus elementos <tr> num <tbody> implícito. Se alguma dessas linhas contiver elementos <th> destinados a ser cabeçalhos de coluna, o validador sinaliza-os porque células <th> em <tbody> são inesperadas — o analisador vê células de cabeçalho a aparecer no que deveria ser o corpo de dados da tabela.

Embora os elementos <th> sejam tecnicamente válidos dentro de <tbody> (por exemplo, como cabeçalhos de linha), este aviso normalmente indica um problema estrutural: os seus cabeçalhos de coluna não estão devidamente separados das suas linhas de dados. Estruturar adequadamente a sua tabela com <thead> e <tbody> é importante por várias razões:

Acessibilidade: Os leitores de ecrã usam a estrutura da tabela para ajudar os utilizadores a navegar. Uma secção <thead> identifica claramente os cabeçalhos de coluna, tornando mais fácil para a tecnologia assistiva anunciar o que cada célula de dados representa.
Estilo e comportamento: Os seletores CSS como thead th e tbody td permitem-lhe direcionar cabeçalhos e células de dados independentemente. Os navegadores também podem usar <thead> e <tbody> para permitir corpos de tabela deslocáveis mantendo os cabeçalhos fixos.
Conformidade com as normas: Definir explicitamente as secções da tabela remove ambiguidade e garante uma análise consistente em todos os navegadores.

Para corrigir este problema, envolva a linha que contém os seus cabeçalhos de coluna <th> num elemento <thead>, e envolva as suas linhas de dados num elemento <tbody>.

Exemplos

❌ Incorreto: `<th>` no corpo implícito da tabela

Aqui, o analisador envolve todas as linhas num <tbody> implícito, então os elementos <th> acabam dentro do corpo da tabela:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>49</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>47</td>
  </tr>
</table>

✅ Correto: `<th>` em `<thead>` explícito

Envolver a linha de cabeçalho em <thead> e as linhas de dados em <tbody> resolve o problema:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Liza</td>
      <td>49</td>
    </tr>
    <tr>
      <td>Joe</td>
      <td>47</td>
    </tr>
  </tbody>
</table>

✅ Correto: `<th>` como cabeçalhos de linha dentro de `<tbody>`

Se você usa intencionalmente elementos <th> dentro de <tbody> como cabeçalhos de linha, adicione o atributo scope para esclarecer o seu propósito. Isto é válido e não desencadeará o aviso quando a tabela também tem um <thead> adequado:

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Liza</th>
      <td>49</td>
    </tr>
    <tr>
      <th scope="row">Joe</th>
      <td>47</td>
    </tr>
  </tbody>
</table>

O atributo scope="row" informa a tecnologia assistiva que estas células <th> são cabeçalhos para as suas respetivas linhas, enquanto scope="col" identifica cabeçalhos de coluna. Esta combinação proporciona a melhor acessibilidade para dados de tabela.