Validación HTML: Etiqueta de inicio "a" vista en "table".

Acerca de este problema HTML

El elemento HTML <table> sigue una estructura rígida. Un <table> solo puede contener <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, y <tr> como hijos directos. Un <tr> solo puede contener elementos <td> y <th>. Colocar una etiqueta <a> (o cualquier otro contenido en línea/flujo) directamente dentro de <table>, <tr>, u otros elementos estructurales de tabla viola este modelo de contenido, provocando el error de validación “Etiqueta de inicio a vista en table“.

Esto es importante por varias razones. Los navegadores manejan el marcado de tabla inválido de manera inconsistente: algunos pueden mover silenciosamente el elemento <a> mal colocado completamente fuera de la tabla, mientras que otros pueden renderizarlo en posiciones inesperadas. Esto lleva a diseños impredecibles y enlaces rotos. Los lectores de pantalla y otras tecnologías de asistencia dependen de una estructura de tabla adecuada para navegar por el contenido, por lo que elementos mal colocados pueden hacer que la página sea confusa o inaccesible. Además, los rastreadores de motores de búsqueda pueden no asociar correctamente el enlace con su contexto previsto.

La solución es directa: siempre envuelve el contenido en línea como <a> dentro de un elemento <td> o <th>. Cada pieza de contenido visible en una tabla debe vivir dentro de una celda de tabla.

Ejemplos

❌ Incorrecto: `<a>` directamente dentro de `<tr>`

<table>
  <tr>
    <a href="/details">Ver detalles</a>
  </tr>
</table>

El <a> es un hijo directo de <tr>, que solo permite hijos <td> y <th>.

❌ Incorrecto: `<a>` directamente dentro de `<table>`

<table>
  <a href="/details">Ver detalles</a>
  <tr>
    <td>Datos</td>
  </tr>
</table>

El <a> es un hijo directo de <table>, que no permite contenido en línea.

❌ Incorrecto: `<a>` directamente dentro de `<tbody>`

<table>
  <tbody>
    <a href="/details">Ver detalles</a>
    <tr>
      <td>Datos</td>
    </tr>
  </tbody>
</table>

El <a> está colocado directamente dentro de <tbody>, que solo permite elementos <tr> y <script>/<template>.

✅ Correcto: `<a>` dentro de un `<td>`

<table>
  <tr>
    <td>
      <a href="/details">Ver detalles</a>
    </td>
  </tr>
</table>

✅ Correcto: `<a>` dentro de un `<th>`

<table>
  <thead>
    <tr>
      <th>
        <a href="/details">Ver detalles</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Datos</td>
    </tr>
  </tbody>
</table>

✅ Correcto: envolver el contenido de una fila completa en un enlace

Si quieres hacer que una fila completa sea clicable, coloca el <a> dentro de cada <td> en lugar de envolver el <tr>:

<table>
  <tr>
    <td><a href="/item/1">Nombre del producto</a></td>
    <td><a href="/item/1">$19.99</a></td>
    <td><a href="/item/1">En stock</a></td>
  </tr>
</table>

Esto mantiene la estructura de tabla válida mientras sigue proporcionando contenido clicable a través de la fila. Puedes usar CSS para eliminar el estilo visual del enlace y hacer que cada <a> llene toda su celda para un efecto de fila clicable perfecto.