<caption>

<caption> es el título de la tabla. Su función es darle un nombre descriptivo que se asocie programáticamente a la tabla en el árbol de accesibilidad, de modo que los lectores de pantalla puedan anunciarlo al usuario antes de que empiece a navegar las celdas. La distinción frente a un <h2> o <p> suelto encima de la tabla es exactamente esa: el encabezado suelto es texto en el DOM pero no tiene relación programática con la tabla. El <caption> está atado a ella por el modelo del documento.

Cuando un usuario de lector de pantalla (NVDA, VoiceOver, JAWS) navega a una tabla que tiene <caption>, escucha algo como “tabla, Comparativa de planes, 3 columnas, 4 filas”. Sin <caption>, escucha solo “tabla, 3 columnas, 4 filas” — y si hay varias tablas en la página, no puede saber cuál es cuál sin entrar a leer las celdas. El <caption> resuelve exactamente ese problema: permite identificar la tabla a distancia, sin navegar su contenido.

La regla de posición de <caption> es estricta: debe ser el primer hijo directo de <table>, antes de <thead>, <tbody>, <tfoot> y cualquier <colgroup>. El contenido del <caption> puede ser texto simple, pero también puede incluir elementos en línea (<strong>, <em>, <abbr>, etc.) si aportan claridad. Por defecto se renderiza centrado encima de la tabla, pero su posición visual se puede cambiar con la propiedad CSS caption-side (top o bottom) — ver propiedades CSS de tablas (próximamente en la referencia).

Cómo funciona

<caption> va como primer hijo directo de <table>, antes de cualquier sección o fila. El navegador lo renderiza visualmente centrado encima de la tabla por defecto, con caption-side: top. La posición visual es controlable por CSS, pero la posición en el DOM debe ser siempre como primer hijo de <table>.

<table>
  <caption>Comparativa de planes de suscripción</caption>
  <thead>
    <tr>
      <th scope="col">Característica</th>
      <th scope="col">Básico</th>
      <th scope="col">Pro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Precio</th>
      <td>$5/mes</td>
      <td>$15/mes</td>
    </tr>
    <tr>
      <th scope="row">Almacenamiento</th>
      <td>10 GB</td>
      <td>100 GB</td>
    </tr>
  </tbody>
</table>

Modelo de contenido

<caption> puede contener contenido de flujo (flow content): texto, elementos en línea (<strong>, <em>, <abbr>, <a>). En la práctica casi siempre se usa texto descriptivo simple. Va exclusivamente como primer hijo de <table>.

Display por defecto: table-caption.

Atributos

<caption> no tiene atributos propios de uso moderno. El atributo align (align="top", align="bottom", align="left", align="right") es legacy desde HTML5 — reemplazado por la propiedad CSS caption-side.

Accesibilidad

<caption> es el mecanismo estándar para nombrar una tabla. En el árbol de accesibilidad, su contenido se convierte en el nombre accesible de la tabla (el equivalente del aria-label de un elemento genérico). Los lectores de pantalla lo leen al entrar a la tabla — antes de anunciar el número de filas y columnas.

La alternativa usando aria-label directamente en <table> (<table aria-label="Ventas mensuales">) funciona igual de bien para la accesibilidad pero no produce la representación visual del <caption>. Para tablas donde el título también debe ser visible, <caption> es el elemento correcto.

La regla general: toda tabla de datos debería tener un <caption> que permita saber qué representa la tabla sin necesidad de leer ninguna de sus celdas.

Cuándo usar qué

Notas, gotchas e interacción

• <caption> debe ir primero. Si lo ponés después de <thead> u otro hijo de <table>, el navegador puede ignorarlo o moverlo en el DOM — el comportamiento es indefinido y varía entre navegadores.
• caption-side: bottom mueve el caption debajo de la tabla visualmente pero en el DOM sigue siendo el primer hijo. El DOM y la presentación visual son independientes en este caso.
• No confundir con <figcaption>. <figcaption> es para describir el contenido de un <figure> (imagen, diagrama, código). <caption> es solo para tablas. Una tabla dentro de un <figure> puede tener ambos — el <caption> nombra la tabla, el <figcaption> describe el contexto en la figura.
• Una sola por tabla. Solo puede haber un <caption> por <table>. Si hay más, el navegador usa el primero.

Vigente / legacy

<caption> es completamente vigente. El atributo align es legacy desde HTML5 — reemplazado por caption-side en CSS.

Aprendelo en el recorrido

Esta entrada complementa la lección La tabla semántica del módulo Tablas, donde <caption> se practica como el título accesible obligatorio de la tabla semántica completa.

Ver también

• table — el contenedor que contiene caption como primer hijo
• th — la otra pieza clave de accesibilidad de tablas (scope)
• thead — las secciones de la tabla que van después del caption