Etiqueta caption en HTML: título de una tabla
La etiqueta <caption> proporciona el título o una descripción de una tabla HTML. Sirve para explicar qué datos contiene antes de leer las celdas: por ejemplo, si unos números representan horas de formación o personas inscritas. Úsala dentro de <table> cuando la tabla necesite un contexto propio, especialmente si hay varias en la página.
Ejemplo mínimo: una tabla con título
<table>
<caption>Duración de los cursos, en horas</caption>
<tr>
<th scope="col">Curso</th>
<th scope="col">Horas</th>
</tr>
<tr>
<td>HTML</td>
<td>12</td>
</tr>
</table>Coloca este fragmento en el cuerpo de un documento HTML. Se verá el título sobre una tabla de dos columnas: «Curso» y «Horas», con una fila que indica HTML y 12. El navegador no dibuja necesariamente bordes si no añades CSS.
<caption> queda asociado a la tabla; no es una celda ni una fila. Si cambias su texto, cambia el contexto que recibe el lector, pero los datos permanecen iguales. Si lo retiras, desaparece ese título y su asociación con la tabla. Los encabezados «Curso» y «Horas» siguen existiendo, aunque ya no ofrecen la misma presentación general.
Sintaxis y lugar dentro de table
Escribe <caption>Texto del título</caption> como primer elemento hijo de <table>, antes de <colgroup>, <thead>, <tbody> o las filas. Una tabla admite como máximo un <caption>. No lo coloques dentro de <tr> ni fuera de la tabla, aunque visualmente quieras situarlo debajo.
Su contenido puede incluir texto y otros elementos de flujo, como <strong> o un párrafo, pero no puede contener otra <table>, ni siquiera dentro de un contenedor intermedio. En una tabla sencilla suele bastar una frase breve. Estas restricciones proceden del modelo de contenido de <caption> en el estándar HTML.
Los ejemplos muestran siempre </caption> para que el límite del título quede claro. HTML permite omitir ese cierre si el elemento no va seguido inmediatamente de un espacio en blanco ASCII o un comentario; conservarlo evita depender de esa condición.
Un título que identifica los datos
«Tabla de datos» aporta poco. «Inscripciones a talleres de octubre de 2026, en personas» identifica el tema, el periodo y la unidad. Incluye la información que realmente ayude a interpretar tu tabla y evita repetir en el título cada encabezado o cada valor.
El título describe el conjunto; <th> identifica una columna o fila. Por eso <caption> no sustituye a scope ni a las asociaciones mediante headers que pueden necesitar tablas complejas. Tampoco sustituye una explicación extensa de una estructura difícil: puedes dar instrucciones adicionales en texto cercano.
La guía de tablas de W3C WAI explica cómo los títulos ayudan a encontrar una tabla y decidir si interesa leerla. Los lectores de pantalla pueden utilizarlos para identificarla; el anuncio concreto depende del navegador, la tecnología de asistencia y su configuración. Mantén visible el contexto que también necesita quien lee la página visualmente.
Ejemplo práctico: un título arriba y otro abajo
Guarda este documento completo como tablas-caption.html, con codificación UTF-8, y ábrelo en tu navegador. Contiene datos ficticios para practicar; no necesita archivos adicionales, servidor ni JavaScript.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tablas de un centro de formación</title>
<style>
body {
max-width: 42rem;
margin: 2rem auto;
padding: 0 1rem;
font-family: sans-serif;
line-height: 1.5;
}
.datos {
width: 100%;
margin-block: 2rem;
border-collapse: collapse;
}
.datos caption {
caption-side: top;
padding-block: 0.75rem;
font-weight: bold;
text-align: left;
}
.datos th,
.datos td {
border: 1px solid #666;
padding: 0.5rem;
text-align: left;
}
.datos--pie caption {
caption-side: bottom;
}
</style>
</head>
<body>
<h1>Centro de formación</h1>
<table class="datos">
<caption>Inscripciones a talleres de octubre de 2026, en personas</caption>
<thead>
<tr>
<th scope="col">Taller</th>
<th scope="col">Inscripciones</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">HTML</th><td>18</td></tr>
<tr><th scope="row">CSS</th><td>14</td></tr>
</tbody>
</table>
<table class="datos datos--pie">
<caption>Material disponible al 3 de octubre de 2026, en unidades</caption>
<thead>
<tr>
<th scope="col">Material</th>
<th scope="col">Unidades</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Portátiles</th><td>8</td></tr>
<tr><th scope="row">Proyectores</th><td>2</td></tr>
</tbody>
</table>
</body>
</html>La primera tabla muestra su título arriba. En la segunda, .datos--pie caption aplica caption-side: bottom y lo muestra debajo de las filas. En ambas, <caption> sigue siendo el primer elemento hijo: CSS cambia su posición visual, no lo convierte en una fila ni modifica el orden del DOM.
Para comprobarlo, cambia bottom por top: el segundo título volverá arriba sin mover una sola etiqueta. Después desactiva los estilos; ambos títulos aparecerán arriba con la presentación predeterminada y los datos seguirán disponibles. Desactivar JavaScript no afecta al ejemplo.
Atributos y propiedades CSS
<caption> no tiene atributos específicos vigentes. Admite atributos globales, como id, class o lang; en el ejemplo, la clase de la tabla permite seleccionar su título desde CSS.
caption-side es una propiedad CSS, no un atributo HTML ni una propiedad específica de JavaScript. Su valor inicial es top; bottom sitúa el título abajo en el documento horizontal de este ejemplo. Para alinear el texto dentro del título, usa text-align. La especificación CSS sobre posición y alineación de títulos distingue ambas tareas.
El atributo antiguo align es obsoleto: si encuentras <caption align="bottom"> en código heredado, migra esa presentación a CSS. La referencia de MDN sobre <caption> lo documenta como información histórica.
Caption, figcaption y legend
Elige según el contenido al que pertenece el título:
<caption>titula una tabla<table>.<figcaption>titula o explica una figura<figure>, que puede contener una imagen, un gráfico u otro contenido autónomo.<legend>da título a un grupo de controles<fieldset>; no sirve para titular tablas.
Si una figura contiene únicamente una tabla y su <figcaption>, el estándar recomienda usar ese <figcaption> y omitir <caption>. Evita duplicar el mismo título en ambos elementos. Para una tabla independiente como las de esta guía, utiliza <caption>.
Errores y preguntas frecuentes
¿Caption puede ir fuera de table? No en HTML válido. Su padre debe ser <table> y debe ocupar la primera posición entre sus hijos que sean elementos. Un título separado mediante <h2> puede presentar una sección, pero no crea por sí solo la asociación de <caption> con la tabla.
¿Cómo pongo caption abajo? Aplica caption-side: bottom a su selector CSS y conserva su posición inicial en el HTML. Si no cambia, comprueba que el selector alcance ese título y que otra regla no sobrescriba la propiedad.
¿Puedo simularlo con una celda y colspan? Una celda que abarca todas las columnas sigue siendo una celda. Usa <caption> para el título y reserva colspan para datos o encabezados que realmente abarquen columnas.
No añadas varios títulos <caption> a una misma tabla ni insertes un <h2> directamente dentro de <table>. Si necesitas una aclaración breve, incorpórala al único título; si es extensa, usa texto cercano. Evita ocultar con display: none el único contexto: también puede desaparecer de la información accesible.
Compatibilidad y fuentes
Revisión del 4 de octubre de 2026: <caption> y los valores top y bottom de caption-side están disponibles en los navegadores actuales. Para este uso no hace falta un script ni una biblioteca. Consulta la compatibilidad de <caption> en MDN y la referencia de caption-side.
El HTML Living Standard fija el significado y las restricciones del elemento; W3C WAI desarrolla su utilidad para la lectura accesible. Para continuar con la estructura de los datos, revisa las funciones de <table> y <th>; el título aporta contexto y los encabezados identifican las celdas.