Elemento caption
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
Tabla de contenidos
Descripción
El elemento caption
representa un título o leyenda para la tabla (table
) en la que es declarado, y se supone provee una muy corta pero precisa descripción acerca del contenido o propósito de ésta. Un buen caption
debería introducir contexto para una tabla, haciéndola significativamente más fácil de comprender.
Un elemento caption
es habitualmente mostrado, de manera predeterminada, encima de la tabla asociada y con texto de alineación centrada. Esta presentación puede ser alterada mediante hojas de estilos.
Ejemplos
El siguiente ejemplo muestra un uso común del elemento caption
. Como es de esperarse, describe brevemente los contenidos de la tabla.
<table class="default">
<caption>Diámetro y distancia al Sol para los planetas interiores</caption>
<tr>
<td></td>
<th>Mercurio</th>
<th>Venus</th>
<th>Tierra</th>
<th>Marte</th>
</tr>
<tr>
<th>Diámetro (km)</th>
<td>4,878</td>
<td>12,104</td>
<td>12,756</td>
<td>6,787</td>
</tr>
<tr>
<th>Distancia al Sol (millones de km)</th>
<td>57</td>
<td>107</td>
<td>150</td>
<td>229</td>
</tr>
</table>
Mercurio | Venus | Tierra | Marte | |
---|---|---|---|---|
Diámetro (km) | 4,878 | 12,104 | 12,756 | 6,787 |
Distancia al Sol (millones de km) | 57 | 107 | 150 | 229 |
Nota que esta tabla ha sido formateada mediante CSS para mejorar su comprensión y legibilidad. Los autores no deberían esperar estos resultados de tablas sin propiedades de presentación asignadas
Atributos
Atributos específicos
align
Un valor que indica dónde debería el navegador ubicar al título en relación con la tabla. Éste puede tomar uno de cuatro valores insensibles a mayúsculas/minúsculas:
- top: encima de la tabla.
- bottom: debajo de la tabla.
- left: al lado izquierdo de la tabla.
- right: al lado derecho de la tabla.
Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Se alienta a los autores a usar hojas de estilo para proveer propiedades de presentación a los elementos.
Ejemplo
<caption align="bottom"></caption>
Atributos globales
Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.
Eventos
Eventos globales
Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.