HTML caption: título de la tabla y posición arriba o abajo
HTML <caption> proporciona el título o una descripción breve de una tabla completa. Colócalo como el primer elemento hijo dentro de table, y usa CSS caption-side para controlar si aparece por encima o por debajo de la tabla.
Distingue los títulos de la tabla de los encabezados de columnas y filas
Un caption explica de qué trata la tabla; th identifica una columna o fila en particular. Reemplazar el título de la tabla con un td en la primera fila cambia la relación entre el título de la tabla y sus celdas de datos. Usa un tema y alcance específicos en lugar de solo “Tabla 1” para que los lectores puedan identificar el propósito al escanear o navegar con tecnología asistiva.
Usa solo un caption por table. Agrega interpretaciones largas, advertencias o fuentes de datos en el texto cercano en lugar de dividir el título de la tabla entre varios elementos caption.
Ejemplo completo: comprueba la posición del título de la tabla
Guarda el código como table-caption.html y ábrelo en un navegador. Los números son datos de práctica utilizados para explicar la estructura de la tabla.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Posición del título de una tabla</title>
<style>
body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
.jb-table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
</style>
</head>
<body>
<h1>Datos de práctica</h1>
<div class="jb-table-scroll">
<table class="jb-table-01">
<caption>Número de documentos de ejemplo por categoría en una biblioteca de práctica</caption>
<thead>
<tr><th scope="col">Categoría</th><th scope="col">Documentos</th></tr>
</thead>
<tbody>
<tr><th scope="row">HTML</th><td>3</td></tr>
<tr><th scope="row">CSS</th><td>2</td></tr>
</tbody>
</table>
</div>
</body>
</html>La leyenda Número de documentos de ejemplo por categoría en una biblioteca de práctica aparece sobre la tabla, seguida por las columnas Categoría y Documentos y dos filas de datos. El caption explica el propósito de la tabla, mientras que los elementos th con scope identifican sus encabezados de columna y fila.
Cambia el CSS caption-side: top a caption-side: bottom y recarga la página. El título se mueve debajo de la tabla mientras sigue siendo su primer elemento hijo en HTML. Cambia de nuevo a top para restaurar la posición original. Use text-align para la alineación horizontal en lugar del atributo obsoleto align.
Escribe títulos de tabla útiles
Un caption es un título visible y ayuda a proporcionar un nombre accesible para la tabla. El comportamiento real del lector de pantalla depende del navegador, de la tecnología asistiva y de otros atributos de accesibilidad. Agregar solo un título no resuelve todos los problemas de accesibilidad en una tabla compleja: también se deben verificar las relaciones entre los encabezados y las celdas de datos y el orden de lectura.
El color de fondo de un elemento table no se aplica automáticamente al elemento caption; establece su fondo por separado cuando sea necesario. Si una tabla es el único contenido de un elemento figure, usa figcaption para titular figure en lugar de repetir el mismo título en caption y figcaption. La referencia de caption en MDN contiene reglas y ejemplos.
