La Etiqueta CAPTION

La etiqueta <caption> proporciona un título descriptivo para una tabla HTML, mejorando la accesibilidad y comprensión del contenido tabular. Es esencial para estructurar datos de manera clara y profesional.

Sintaxis básica

<table>
  <caption>Descripción de la tabla</caption>
  <!-- Filas y celdas -->
</table>

• Posicionamiento: Debe ser el primer elemento hijo de <table>.

• Contenido: Texto breve que resuma el propósito de la tabla.

Ejemplo práctico

<table>
  <caption>Población de países (2023)</caption>
  <thead>
    <tr>
      <th>País</th>
      <th>Habitantes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>China</td>
      <td>1,425,000,000</td>
    </tr>
    <tr>
      <td>India</td>
      <td>1,417,000,000</td>
    </tr>
  </tbody>
</table>

Características clave

Atributo/Aspecto	Descripción
Ubicación	Primer hijo dentro de <table>
Accesibilidad	Leído por lectores de pantalla al anunciar la tabla
Estilo predeterminado	Centrado arriba de la tabla (depende del navegador)

Accesibilidad

Textoclaro: Describe el contexto general de la tabla.

<caption>Precios de productos tecnológicos en dólares</caption>

Evitar redundancias:

<!-- Incorrecto -->
<caption>Tabla 1: Tabla de precios</caption>

Estilización con CSS

Controla la posición y apariencia:

/* Mover el título debajo de la tabla */
caption {
  caption-side: bottom;
  font-size: 0.9em;
  margin-top: 1rem;
  color: #666;
}

/* Estilo moderno */
table {
  border-collapse: collapse;
  width: 100%;
}

caption {
  caption-side: top;
  font-weight: bold;
  text-align: left;
  padding: 10px;
  background: #2c3e50;
  color: white;
  border-radius: 5px 5px 0 0;
}

Errores comunes

Posicionamiento incorrecto

<!-- Incorrecto -->
<table>
  <thead>
    <tr>
      <caption>Título mal ubicado</caption>
    </tr>
  </thead>
</table>

Uso en no tablas

<!-- Error -->
<div>
  <caption>Esto no es una tabla</caption>
</div>

Descripciones demasiado largas

<caption>
  Tabla que muestra los resultados trimestrales de ventas del Q1 al Q4 de 2023,
  incluyendo comparaciones interanuales y proyecciones futuras...
</caption>

Buenas prácticas

Brevedad: Máximo 1-2 líneas.

Especificidad:

<!-- Correcto -->
<caption>Ventas mensuales por región (enero 2023)</caption>

Combina con <th>: Usa encabezados de columna/fila para estructura completa.

Prioriza semántica sobre estilo: Usa CSS para diseño, no atributos obsoletos como align.

Ejemplo avanzado

<table>
  <caption>Horario de clases - Segundo semestre</caption>
  <colgroup>
    <col style="width: 20%">
    <col style="width: 80%">
  </colgroup>
  <thead>
    <tr>
      <th>Hora</th>
      <th>Materia</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8:00 AM</td>
      <td>Matemáticas Avanzadas</td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td>Programación Web</td>
    </tr>
  </tbody>
</table>

Comparación: <caption> vs <figcaption>

Elemento	Uso	Contenedor
<caption>	Títulos para tablas	<table>
<figcaption>	Leyendas para figuras (imágenes, gráficos)	<figure>

Conclusión:

La etiqueta <caption> es esencial para:

• Proporcionar contexto inmediato a las tablas.
• Mejorar la accesibilidad para usuarios con discapacidades visuales.
• Organizar datos complejos de manera profesional.

¡Úsala siempre que trabajes con tablas para garantizar claridad y estructura semántica!