Etiqueta HTML <caption>
La etiqueta HTML <caption> define un título para una tabla. Debe ser el primer hijo de <table>. Aprende su sintaxis, estilos y accesibilidad con ejemplos.
La etiqueta <caption> se utiliza para definir un título o descripción para una tabla. No es un encabezado de columna (usa <th> para eso). La etiqueta en sí debe estar dentro del elemento <table> inmediatamente después de la etiqueta de apertura, y debe ser el primer hijo de su elemento padre <table>. Solo se permite un caption por tabla.
De forma predeterminada, el caption de una tabla aparece centrado encima de la tabla. Puedes usar las propiedades text-align y caption-side para alinearlo y posicionarlo.
Cuándo usar <caption> en lugar de <figcaption>
Hay dos formas de etiquetar una tabla, y la correcta depende del contenedor de la tabla:
- Usa
<caption>cuando la tabla está sola. El caption pertenece dentro del<table>y está vinculado programáticamente a él. - Usa
<figcaption>cuando la tabla es el único contenido de un elemento<figure>. En ese caso, la figura proporciona el etiquetado, por lo que no se usa un<caption>separado.
<figure>
<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter (km)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,742</td>
</tr>
<tr>
<td>Mars</td>
<td>6,779</td>
</tr>
</tbody>
</table>
<figcaption>Diameters of the inner planets</figcaption>
</figure>Aquí la tabla es el único contenido de la figura, por lo que la etiqueta vive en <figcaption> (que, a diferencia de <caption>, también puede colocarse después de la tabla).
Sintaxis
La etiqueta <caption> viene en pares. El contenido se escribe entre las etiquetas de apertura (<caption>) y cierre (</caption>).
Ejemplo de la etiqueta HTML <caption>:
Etiqueta HTML <caption>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Resultado
La tabla renderizada muestra el caption "Evaluation paper" centrado encima de los datos:
Ejemplo de la etiqueta HTML <caption> con la propiedad CSS caption-side:
Ejemplo de la etiqueta HTML <caption> con la propiedad CSS caption-side
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | left, right, center, top, bottom | Alinea el caption horizontal o verticalmente. No se usa en HTML5. En su lugar, usa CSS caption-side. |
La etiqueta <caption> admite los Atributos Globales y los Atributos de Evento.
Accesibilidad: por qué importa <caption>
Un <caption> es más que un título visible: es el nombre accesible de la tabla. Como el elemento es hijo de <table>, los navegadores los asocian automáticamente; no necesitas aria-labelledby ni ningún marcado adicional. Cuando un lector de pantalla entra en la tabla, anuncia el caption primero, proporcionando contexto al usuario ("Evaluation paper, tabla con 3 columnas") antes de leer cualquier celda. Sin un caption, el usuario escucha una serie de números sin saber qué describen.
Cuando el título debe estar visualmente oculto
A veces un encabezado ya está junto a la tabla y un caption visible parecería redundante. No elimines el caption, ya que eso quita el contexto para los usuarios que no pueden ver. En cambio, mantén el <caption> y ocúltalo visualmente con CSS mientras lo dejas en el árbol de accesibilidad:
caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}Un aria-label en el <table> también puede proporcionar un nombre accesible, pero <caption> es preferible: funciona sin ARIA, forma parte del texto del documento (por lo que se traduce y es buscable), y la técnica de ocultación visual lo mantiene legible para los desarrolladores con visión. Recurre a aria-label solo cuando no puedas agregar un caption al marcado.
<caption> reemplaza el atributo summary obsoleto
El HTML antiguo tenía un atributo summary en <table> que contenía una descripción para los usuarios de lectores de pantalla. Nunca fue visible y está obsoleto en HTML5 — no lo uses. El reemplazo moderno y accesible es un <caption> para el título breve, más un párrafo regular (opcionalmente vinculado con aria-describedby) cuando se necesita una explicación más detallada de la estructura de la tabla.
Cómo aplicar estilos a la etiqueta <caption>
El caption es una caja de nivel de bloque que puedes estilizar como cualquier otro elemento. Los ajustes más comunes son su posición relativa a la tabla, su alineación y su énfasis:
caption {
caption-side: bottom; /* move the caption below the table (default is top) */
text-align: left; /* override the default centering */
font-weight: bold;
padding: 6px;
color: #1c87c9;
}Consulta las propiedades caption-side y text-align para más detalles, y la etiqueta <table> para el marcado completo de tablas.