Definición destacada
¿Como funciona el comando en HTML5: 'caption'?
Última modificación: 2024-06-18
Instrucción en HTML5
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:
Atributos del elemento <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:
- class: Permite definir una o varias clases CSS para aplicar estilos.
- id: Identificador único del elemento, útil para CSS y JavaScript.
- style: Permite aplicar estilos en línea al elemento.
- title: Proporciona información adicional al pasar el cursor sobre el elemento.
- lang: Define el idioma del contenido del elemento.
- dir: Define la dirección del texto, puede ser "ltr" (left to right) o "rtl" (right to left).
- accesskey: Especifica una clave de acceso para enfocar el elemento.
- tabindex: Controla el orden de tabulación del elemento.
- hidden: Indica que el elemento no es relevante o visible.
Uso del elemento en HTML5
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.
Ejemplo 1: Tabla básica con caption
<!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.
Ejemplo 2: Tabla con caption y estilo adicional
<!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.