Validación HTML: Etiqueta de apertura "td" extraviada.

Acerca de este problema HTML

La especificación HTML define una jerarquía de anidamiento estricta para los elementos de tabla. Un <td> (celda de datos de tabla) debe ser un hijo directo de un <tr> (fila de tabla), y ese <tr> debe a su vez estar dentro de un <table>, <thead>, <tbody>, o <tfoot>. Cuando el analizador del navegador encuentra un <td> en una ubicación inesperada, lo considera una etiqueta de apertura “extraviada” — lo que significa que el elemento no tiene lugar válido en el contexto de análisis actual.

Este error ocurre comúnmente en varios escenarios:

Un <td> se coloca directamente dentro de una <table> sin un <tr> que lo envuelva.
Un <td> se coloca directamente dentro de <thead>, <tbody>, o <tfoot> sin un <tr>.
Un <td> aparece completamente fuera de cualquier estructura de tabla, como dentro de un <div> o el <body> del documento.
Una etiqueta <tr> fue eliminada accidentalmente o mal escrita durante la edición, dejando huérfanos a sus hijos <td>.

Por qué es importante

Inconsistencia del navegador: Los navegadores utilizan algoritmos de recuperación de errores para manejar el marcado inválido, pero pueden manejar las celdas de tabla extraviadas de manera diferente. Algunos navegadores podrían insertar silenciosamente un <tr> implícito, mientras que otros podrían mover el contenido completamente fuera de la tabla. Esto lleva a un renderizado impredecible entre navegadores.

Accesibilidad: Los lectores de pantalla y las tecnologías asistivas dependen de la semántica apropiada de las tablas para navegar y anunciar el contenido de las celdas. Un <td> extraviado rompe la relación lógica de filas y columnas, haciendo que los datos sean difíciles o imposibles de interpretar correctamente para los usuarios de tecnologías asistivas.

Mantenibilidad: El anidamiento inválido hace que tu marcado sea más difícil de entender, depurar y estilizar con CSS. Los selectores CSS específicos de tablas y las propiedades pueden no comportarse como se espera cuando la estructura DOM está malformada.

Cómo solucionarlo

Localiza cada elemento <td> marcado por el validador.
Asegúrate de que sea un hijo directo de un elemento <tr>.
Asegúrate de que ese <tr> esté a su vez dentro de un <table>, <thead>, <tbody>, o <tfoot>.
Si el <td> estaba completamente fuera de una tabla, envuélvelo en una estructura de tabla completa o reemplázalo con un elemento más apropiado como un <div> o <span>.

Ejemplos

`<td>` directamente dentro de `<table>` sin `<tr>`

Esta es la causa más común. Los elementos <td> son hijos de <table> pero carecen de un <tr> que los envuelva:

<!-- ❌ Malo: td es un hijo directo de table -->

<table>
  <td>Name</td>
  <td>Email</td>
</table>

Envuelve las celdas en un <tr>:

<!-- ✅ Bueno: td está dentro de un tr -->

<table>
  <tr>
    <td>Name</td>
    <td>Email</td>
  </tr>
</table>

`<td>` directamente dentro de `<tbody>` sin `<tr>`

<!-- ❌ Malo: td es un hijo directo de tbody -->

<table>
  <tbody>
    <td>Alice</td>
    <td>alice@example.com</td>
  </tbody>
</table>

<!-- ✅ Bueno: td está envuelto en un tr dentro de tbody -->

<table>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>alice@example.com</td>
    </tr>
  </tbody>
</table>

`<td>` usado fuera de cualquier contexto de tabla

A veces un <td> termina fuera de una tabla completamente, quizás por un error de copiar-pegar o un error de plantilla:

<!-- ❌ Malo: td no tiene ancestro de tabla -->

<div>
  <td>Some content</td>
</div>

Si querías mostrar contenido en un diseño no tabular, usa un elemento apropiado en su lugar:

<!-- ✅ Bueno: usa un span o div para contenido no tabular -->

<div>
  <span>Some content</span>
</div>

Etiqueta `<tr>` faltante o mal escrita

Un error tipográfico puede dejar elementos <td> huérfanos:

<!-- ❌ Malo: la etiqueta de apertura tr está mal escrita -->

<table>
  <t>
    <td>Price</td>
    <td>$9.99</td>
  </t>
</table>

<!-- ✅ Bueno: elemento tr correcto -->

<table>
  <tr>
    <td>Price</td>
    <td>$9.99</td>
  </tr>
</table>

Tabla completa con estructura apropiada

Como referencia, aquí tienes una tabla bien estructurada usando <thead>, <tbody>, <th>, y <td> — todos correctamente anidados:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>$4.99</td>
    </tr>
    <tr>
      <td>Gadget</td>
      <td>$14.99</td>
    </tr>
  </tbody>
</table>