Caracteres que no son espacios mal ubicados dentro de una tabla.

La especificación HTML define un modelo de contenido estricto para las tablas. Un elemento <table> solo puede contener <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, y <tr> como hijos directos. Un elemento <tr> solo puede contener elementos <td> y <th>. Cuando texto o elementos en línea como <span>, <a>, o <strong> aparecen directamente dentro de cualquiera de estos elementos estructurales de tabla, violan el modelo de contenido y desencadenan este error de validación.

Esto importa por varias razones. Los navegadores manejan el contenido de tabla mal ubicado de forma inconsistente — algunos moverán silenciosamente el texto antes de la tabla, otros pueden descartarlo, y algunos pueden intentar crear celdas de tabla anónimas. Esto lleva a diseños impredecibles entre navegadores y dispositivos. Los lectores de pantalla dependen de la estructura correcta de la tabla para navegar por las celdas y anunciar las relaciones entre filas/columnas, por lo que el contenido mal ubicado puede confundir a los usuarios de tecnología asistiva. Además, cualquier texto colocado directamente dentro de un <tr> pero fuera de una celda técnicamente no es parte de ninguna estructura de fila/columna, haciéndolo semánticamente sin sentido en el contexto de la tabla.

Las causas comunes de este error incluyen:

• Colocar accidentalmente texto entre las etiquetas <tr> y <td>
• Colocar un encabezado o párrafo directamente dentro de un <table> (usa <caption> en su lugar para títulos de tabla)
• Usar espacios fijos ( ) u otros caracteres directamente dentro de <table> o <tr> para espaciado
• Anidar incorrectamente elementos que no son de tabla como <div>, <p>, o <form> como hijos directos de <table> o <tr>

Ejemplos

Texto directamente dentro de una fila de tabla

<!-- ❌ Incorrecto: el texto es un hijo directo de <tr> -->

<table>
  <tr>
    Hello World
    <td>First Cell</td>
    <td>Second Cell</td>
  </tr>
</table>

<!-- ✅ Corregido: el texto está envuelto en un <td> -->

<table>
  <tr>
    <td>Hello World</td>
    <td>First Cell</td>
    <td>Second Cell</td>
  </tr>
</table>

Texto directamente dentro de un elemento tabla

<!-- ❌ Incorrecto: encabezado y texto de espaciado colocados directamente en <table> -->

<table>
  Monthly Sales Report
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
</table>

<!-- ✅ Corregido: usa <caption> para títulos de tabla -->

<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Revenue</th>
  </tr>
</table>

Espacios fijos usados para espaciado

<!-- ❌ Incorrecto: &nbsp; directamente dentro de <tr> -->

<table>
  <tr>
    &nbsp;
    <td>Data</td>
  </tr>
</table>

<!-- ✅ Corregido: usa CSS para espaciado, o coloca el contenido en una celda -->

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

Elementos en línea directamente dentro de una tabla

<!-- ❌ Incorrecto: etiqueta <a> directamente dentro de <table> -->

<table>
  <a href="/details">View details</a>
  <tr>
    <td>Item 1</td>
    <td>$10.00</td>
  </tr>
</table>

<!-- ✅ Corregido: mueve el enlace a una celda o fuera de la tabla -->

<table>
  <tr>
    <td>Item 1</td>
    <td>$10.00</td>
    <td><a href="/details">View details</a></td>
  </tr>
</table>

Contenido entre secciones de tabla

<!-- ❌ Incorrecto: texto entre <thead> y <tbody> -->

<table>
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  No results found
  <tbody>
    <tr>
      <td>—</td>
    </tr>
  </tbody>
</table>

<!-- ✅ Corregido: coloca el mensaje dentro de una celda -->

<table>
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>No results found</td>
    </tr>
  </tbody>
</table>

Más información:

MDN Reference

MDN: the table element

→