HTML caption

La etiqueta <caption> en HTML se utiliza para añadir un título o una descripción a una tabla. El contenido dentro de la etiqueta <caption> se coloca en la parte superior o en la parte inferior de la tabla, dependiendo de la configuración del navegador y de los estilos CSS que se apliquen.

Es importante tener en cuenta que solo se puede utilizar una etiqueta <caption> por tabla.

La sintaxis básica de una etiqueta <caption> es la siguiente:

<table>
  <caption>Título de la tabla</caption>
  <!-- resto del contenido de la tabla -->
</table>

Lenguaje del código: HTML, XML (xml)

También se puede utilizar el atributo align para especificar si el título se colocará en la parte superior (top) o en la parte inferior (bottom) de la tabla:

<table>
  <caption align="bottom">Título de la tabla</caption>
  <!-- resto del contenido de la tabla -->
</table>

Lenguaje del código: HTML, XML (xml)

Es importante tener en cuenta que el contenido dentro de la etiqueta <caption> debe ser HTML válido. Además, esta etiqueta ayuda a mejorar la accesibilidad y la semántica de la página, haciendo más fácil para los usuarios entender el contenido de la tabla y su título.

Ejemplo de uso

Un ejemplo de cómo utilizar la etiqueta <caption> en HTML podría ser el siguiente:

<table>
  <caption>Ventas mensuales</caption>
  <tr>
    <th>Mes</th>
    <th>Ventas</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$5,000</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$6,500</td>
  </tr>
  <tr>
    <td>Marzo</td>
    <td>$8,000</td>
  </tr>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <caption> para añadir un título a la tabla “Ventas mensuales”. El título se colocará en la parte superior de la tabla, dependiendo de la configuración del navegador y de los estilos CSS que se apliquen.

Atributos

La etiqueta <caption> en HTML tiene dos atributos específicos, los cuales son:

• align: Este atributo se utiliza para especificar si el título de la tabla se colocará en la parte superior (top) o en la parte inferior (bottom) de la tabla. El valor por defecto es top.

• id: Este atributo se utiliza para especificar un identificador único para la etiqueta <caption>, el cual puede ser utilizado para hacer referencia a ella en otras partes del código, como en un archivo de estilos CSS o en un script JavaScript.

Además, también se pueden utilizar los atributos globales comunes en HTML, como class, style, title, entre otros, para aplicar estilos o identificar de manera específica al elemento <caption> en el DOM.

Ejemplos

Un ejemplo de cómo utilizar el atributo align de la etiqueta <caption> en HTML podría ser el siguiente:

<table>
  <caption align="bottom">Ventas mensuales</caption>
  <tr>
    <th>Mes</th>
    <th>Ventas</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$5,000</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$6,500</td>
  </tr>
  <tr>
    <td>Marzo</td>
    <td>$8,000</td>
  </tr>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza el atributo align para especificar que el título “Ventas mensuales” se colocará en la parte inferior de la tabla.

Un ejemplo de cómo utilizar el atributo id de la etiqueta <caption> en HTML podría ser el siguiente:

<table>
  <caption id="ventas-mensuales">Ventas mensuales</caption>
  <tr>
    <th>Mes</th>
    <th>Ventas</th>
  </tr>
  <tr>
    <td>Enero</td>
    <td>$5,000</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$6,500</td>
  </tr>
  <tr>
    <td>Marzo</td>
    <td>$8,000</td>
  </tr>
</table>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza el atributo id para especificar un identificador único “ventas-mensuales” para la etiqueta <caption>. Este identificador puede ser utilizado para hacer referencia a ella en otras partes del código, como en un archivo de estilos CSS o en un script JavaScript.

Por ejemplo, en un archivo de estilos CSS se puede utilizar el identificador para darle un estilo específico al título de la tabla:

#ventas-mensuales {
  font-size: 20px;
  font-weight: bold;
}

Lenguaje del código: CSS (css)