El elemento <caption> en HTML5 se utiliza para proporcionar un título o una descripción a una tabla. Es un elemento específico de las tablas y tiene como objetivo dar contexto o información adicional sobre el contenido de la tabla. A continuación se detallan sus atributos y uso:
<caption>El elemento <caption> no tiene atributos específicos propios, pero puede utilizar los atributos globales que son comunes a todos los elementos HTML. Estos atributos globales incluyen, entre otros:
Para utilizar el elemento <caption>, debes colocarlo como el primer hijo de la tabla (<table>). Esto asegura que el título o la descripción aparece correctamente asociado a la tabla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de tabla con caption</title>
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 8px;
}
</style>
</head>
<body>
<table>
<caption>Lista de Asistentes</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan Pérez</td>
<td>juan.perez@example.com</td>
</tr>
<tr>
<td>María López</td>
<td>maria.lopez@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>En este ejemplo, la tabla muestra una lista de asistentes con sus nombres y correos electrónicos, y Lista de Asistentes se utiliza como el caption de la tabla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo Avanzado de tabla con caption</title>
<style>
table {
width: 60%;
border: 2px solid #000;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #888;
padding: 10px;
text-align: left;
}
caption {
caption-side: bottom;
padding-top: 10px;
font-style: italic;
}
</style>
</head>
<body>
<table>
<caption>Datos recolectados en la encuesta anual</caption>
<thead>
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ana García</td>
<td>28</td>
<td>Madrid</td>
</tr>
<tr>
<td>2</td>
<td>Carlos Díaz</td>
<td>35</td>
<td>Barcelona</td>
</tr>
</tbody>
</table>
</body>
</html>En este segundo ejemplo, hemos cambiado la posición del caption usando CSS, haciéndolo aparecer en la parte inferior de la tabla (caption-side: bottom). Este formato puede ser útil dependiendo del diseño y la relevancia del título en relación con el contenido de la tabla.
El uso del elemento <caption> mejora la accesibilidad y la comprensión del contenido de la tabla, proporcionando una breve explicación o un contexto que es útil tanto para los usuarios como para las tecnologías de asistencia como lectores de pantalla.