Validación HTML: Etiqueta de inicio "th" en el cuerpo de la tabla.

Acerca de este problema HTML

Cuando escribes una <table> sin usar explícitamente <thead> y <tbody>, el analizador HTML automáticamente envuelve tus elementos <tr> en un <tbody> implícito. Si alguna de esas filas contiene elementos <th> destinados como encabezados de columna, el validador los marca porque las celdas <th> en <tbody> son inesperadas — el analizador ve celdas de encabezado apareciendo en lo que debería ser el cuerpo de datos de la tabla.

Aunque los elementos <th> son técnicamente válidos dentro de <tbody> (por ejemplo, como encabezados de fila), esta advertencia usualmente indica un problema estructural: tus encabezados de columna no están correctamente separados de tus filas de datos. Estructurar apropiadamente tu tabla con <thead> y <tbody> importa por varias razones:

Accesibilidad: Los lectores de pantalla usan la estructura de tabla para ayudar a los usuarios a navegar. Una sección <thead> identifica claramente los encabezados de columna, haciendo más fácil para la tecnología asistiva anunciar qué representa cada celda de datos.
Estilo y comportamiento: Los selectores CSS como thead th y tbody td te permiten dirigirte a encabezados y celdas de datos independientemente. Los navegadores también pueden usar <thead> y <tbody> para habilitar cuerpos de tabla desplazables mientras mantienen los encabezados fijos.
Cumplimiento de estándares: Definir explícitamente las secciones de tabla elimina la ambigüedad y asegura un análisis consistente en todos los navegadores.

Para solucionar este problema, envuelve la fila que contiene tus encabezados de columna <th> en un elemento <thead>, y envuelve tus filas de datos en un elemento <tbody>.

Ejemplos

❌ Incorrecto: `<th>` en cuerpo de tabla implícito

Aquí, el analizador envuelve todas las filas en un <tbody> implícito, por lo que los elementos <th> terminan dentro del cuerpo de la tabla:

<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>

✅ Correcto: `<th>` en `<thead>` explícito

Envolver la fila de encabezado en <thead> y las filas de datos en <tbody> resuelve el 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>

✅ Correcto: `<th>` como encabezados de fila dentro de `<tbody>`

Si intencionalmente usas elementos <th> dentro de <tbody> como encabezados de fila, añade el atributo scope para clarificar su propósito. Esto es válido y no activará la advertencia cuando la tabla también tenga un <thead> apropiado:

<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>

El atributo scope="row" le dice a la tecnología asistiva que estas celdas <th> son encabezados para sus respectivas filas, mientras que scope="col" identifica encabezados de columna. Esta combinación proporciona la mejor accesibilidad para los datos de tabla.