Título visible de la tabla. Debe ser siempre el primer hijo de <table>. Los lectores de pantalla lo anuncian antes de enumerar los datos, permitiendo al usuario decidir si le interesa antes de escuchar todo el contenido. Su posición visual se controla con CSS: caption-side: top | bottom. Para tablas complejas, puede complementarse con aria-describedby apuntando a un párrafo de descripción externo.

Toda tabla de datos debe tener un <caption> o un aria-label equivalente. WCAG 1.3.1 requiere que la estructura de la tabla sea determinable por programas de asistencia.

<table>
  <caption>Ventas por trimestre</caption>
  ...
</table>

El atributo scope en <th> asocia el encabezado con las celdas correctas. Valores: col (encabezado de columna), row (encabezado de fila), colgroup/rowgroup (para grupos). Indispensable para lectores de pantalla. Sin scope, los lectores de pantalla no pueden inferir qué columna o fila corresponde a cada dato.

<table>
  <thead>
    <tr>
      <th scope="col">Nombre</th>     <!-- encabezado de columna -->
      <th scope="col">Puntuación</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ana</th>        <!-- encabezado de fila -->
      <td>95</td>
    </tr>
  </tbody>
</table>
<!-- scope="colgroup"/"rowgroup" para grupos -->

<colgroup> agrupa columnas de una tabla para aplicarles estilos de forma centralizada. Cada <col> dentro representa una columna (o varias con span). Evitan repetir clases en cada <td> de la columna. Importante: solo admiten un subconjunto de propiedades CSS — width, visibility, background y border. Propiedades como padding, text-align o font-size no se pueden aplicar a nivel de columna.

Si necesitas alinear o dar padding a una columna, debes hacerlo con clases en los <td> o con CSS de selector :nth-child(). <col> no puede cambiar text-align ni padding.

<colgroup>
  <col style="background:#fef3c7; width:40%">
  <col style="background:#e8f0fe; width:30%">
  <col>  <!-- columna sin estilo -->
</colgroup>

Las tablas con muchas columnas se desbordan en pantallas pequeñas porque su ancho mínimo está determinado por el contenido. Hay dos estrategias principales: (1) scroll horizontal — envuelve la tabla en un <div style="overflow-x: auto"> para que el usuario pueda desplazarse; (2) transformación a lista — con display: block en todos los elementos de la tabla y td::before { content: attr(data-label) ": " } para mostrar la etiqueta de columna como encabezado de cada valor.

La estrategia de scroll horizontal es la más simple y mantiene la estructura de tabla para lectores de pantalla. La transformación a lista requiere añadir data-label a cada <td> pero ofrece mejor UX en móvil para tablas complejas.

<!-- Estrategia 1: scroll horizontal -->
<div style="overflow-x: auto;">
  <table>...</table>
</div>

<!-- Estrategia 2: lista en móvil (CSS) -->
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr { display: none; } /* oculta th */
  td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
  }
}
/* En el HTML: <td data-label="Nombre">Ana</td> */