Etiqueta HTML `<caption>`

La etiqueta <caption> se utiliza para definir un título o descripción para una tabla. No es un encabezado de columna (usa <th> para eso). La etiqueta en sí debe estar dentro del elemento <table> inmediatamente después de la etiqueta de apertura, y debe ser el primer hijo de su elemento padre <table>. Solo se permite una leyenda por tabla.

Cuando el elemento <table> que contiene <caption> es el único descendiente del elemento <figure>, debes usar el elemento <figcaption> en lugar de <caption>.

Por defecto, una leyenda de tabla está alineada al centro sobre la tabla. Puedes usar las propiedades text-align y caption-side para alinearla y posicionarla.

Sintaxis

La etiqueta <caption> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<caption>) y cierre (</caption>).

Ejemplo de la etiqueta HTML `<caption>`:

Etiqueta HTML <caption>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { width: 400px; border-collapse: collapse; }
      th, td { border: 1px solid #000; padding: 4px; }
    </style>
  </head>
  <body>
    <table>
      <caption>Evaluation paper</caption>
      <thead>
        <tr>
          <th>Student</th>
          <th>1st exam</th>
          <th>2nd exam</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Johnson</td>
          <td>75</td>
          <td>65</td>
        </tr>
        <tr>
          <td>Mary Nicolson</td>
          <td>55</td>
          <td>80</td>
        </tr>
        <tr>
          <td>Max Thomson</td>
          <td>60</td>
          <td>47</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Resultado

Estudiante	1er examen	2do examen
John Johnson	75	65
Mary Nicolson	55	80
Max Thomson	60	47

Ejemplo de la etiqueta HTML `<caption>` con la propiedad CSS caption-side:

Ejemplo de la etiqueta HTML <caption> con la propiedad CSS caption-side

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #cccccc;
        color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "bottom":</p>
    <table>
      <caption>Some title here</caption>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Atributos

Atributo	Valor	Descripción
align	`left`, `right`, `center`, `top`, `bottom`	Alinea la leyenda horizontal o verticalmente. No se usa en HTML5. Usa CSS `caption-side` en su lugar.

La etiqueta <caption> admite los Atributos Globales y los Atributos de Eventos.

Para una mejor accesibilidad, asegúrate de que la leyenda esté asociada programáticamente con la tabla para que los lectores de pantalla la anuncien correctamente. El elemento <caption> está vinculado automáticamente a su elemento padre <table>.

Cómo dar estilo a una etiqueta HTML <caption>

json

{
    "tag_name": "caption"
}

Práctica

¿Cuál de las siguientes afirmaciones sobre la etiqueta HTML <caption> es correcta según el artículo en w3docs.com?

La etiqueta <caption> se utiliza para proporcionar un título o explicación para los datos en una tabla HTML.La etiqueta <caption> debe insertarse inmediatamente después de la etiqueta <table>.La etiqueta <caption> puede colocarse en cualquier lugar dentro de la etiqueta <table>.La etiqueta <caption> solo puede contener texto.Puedes usar CSS para dar estilo a la etiqueta <caption>.

Etiqueta HTML <caption> ​

Sintaxis ​

Ejemplo de la etiqueta HTML &lt;caption&gt;: ​

Resultado ​

Ejemplo de la etiqueta HTML &lt;caption&gt; con la propiedad CSS caption-side: ​

Atributos ​