Validación HTML: El elemento "table" no debe aparecer como descendiente del elemento "caption".

Acerca de este problema HTML

El elemento <caption> está diseñado para ser una etiqueta breve y descriptiva para su <table> padre. Según la especificación HTML, <caption> acepta contenido de flujo pero prohíbe explícitamente los elementos <table> descendientes. Esta restricción existe porque una tabla anidada dentro de un caption crea una estructura confusa y semánticamente sin sentido — se supone que el caption debe describir la tabla, no contener otra.

Por qué esto es un problema

Accesibilidad: Los lectores de pantalla anuncian el <caption> como el título de la tabla. Una tabla anidada dentro de un caption crea una experiencia confusa para los usuarios de tecnología asistencial, ya que la relación entre las tablas se vuelve ambigua y el caption pierde su propósito descriptivo.
Cumplimiento de estándares: El estándar HTML living de WHATWG establece explícitamente que <caption> debe tener “ningún elemento <table> descendiente.” Violar esto produce un error de validación.
Inconsistencias de renderizado: Los navegadores pueden manejar este anidamiento inválido de manera diferente, causando layouts rotos o impredecibles en diferentes entornos.

Cómo solucionarlo

Elimina la tabla del caption. El <caption> debe contener únicamente texto y elementos inline simples como <span>, <strong>, <em>, o <a>.
Coloca la tabla anidada fuera de la tabla padre, ya sea antes o después de ella, o reestructura tu layout para que ambas tablas sean hermanas.
Si los datos en la tabla anidada están genuinamente relacionados con el propósito del caption, considera expresarlos como texto plano o usar un enfoque estructural completamente diferente.

Ejemplos

❌ Incorrecto: Una tabla anidada dentro de un caption

<table>
  <caption>
    Summary
    <table>
      <tr>
        <td>Extra info</td>
        <td>Details</td>
      </tr>
    </table>
  </caption>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

Esto desencadena el error de validación porque una <table> aparece como descendiente del elemento <caption>.

✅ Correcto: El caption contiene únicamente texto, las tablas están separadas

<table>
  <caption>Summary — Extra info: Details</caption>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

Si la información extra realmente requiere su propia tabla, colócala como hermana:

<table>
  <caption>Summary</caption>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

<table>
  <caption>Additional details</caption>
  <tr>
    <td>Extra info</td>
    <td>Details</td>
  </tr>
</table>

✅ Correcto: Caption únicamente con formato inline

<table>
  <caption>
    <strong>Quarterly Results</strong> — <em>All figures in USD</em>
  </caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$1.2M</td>
  </tr>
</table>

Esto es válido porque el <caption> contiene únicamente texto y elementos inline (<strong>, <em>), sin descendientes <table>.