Curso de HTML / Tablas accesibles: caption, scope y celdas combinadas

Una tabla comprensible indica qué datos presenta y qué encabezados corresponden a cada valor. caption nombra la tabla, th identifica sus encabezados y scope puede explicitar la relación con filas, columnas o grupos. Utiliza colspan y rowspan solo cuando los datos requieran esas relaciones y sigan siendo fáciles de interpretar.

Nombrar la tabla con caption

Coloca caption como primer hijo de tipo elemento de table. A diferencia de un título escrito en un párrafo cercano, el pie forma parte de la tabla y ayuda a identificar su asunto.

El texto debe expresar qué muestran los valores. Si un periodo, una unidad o un método de medición son necesarios para interpretarlos, indícalos en el propio texto o en una explicación cercana. El título no sustituye los nombres de las columnas ni los encabezados de cada fila.

Relacionar las celdas con filas y columnas

scope="col" identifica un encabezado de columna y scope="row" uno de fila. Este fragmento utiliza ambos:

<table>
  <caption>Visitors by day and time of day</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Morning</th>
      <th scope="col">Afternoon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Monday</th>
      <td>3 visitors</td>
      <td>5 visitors</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>4 visitors</td>
      <td>6 visitors</td>
    </tr>
  </tbody>
</table>

Ponlo dentro de body de un documento completo y abre el archivo. En la intersección de Monday y Morning debe figurar “3 visitors”; en Tuesday y Afternoon, “6 visitors”. Los números son datos de práctica, no un registro de visitas real.

scope describe una relación, no el color ni la alineación de la celda. En tablas sencillas algunas relaciones pueden deducirse sin escribirlo, pero hacerlo explícito facilita revisar la intención. El tutorial de tablas de W3C WAI desarrolla las asociaciones entre encabezados y datos.

Combinar posiciones con colspan y rowspan

colspan="2" ocupa dos columnas y rowspan="2" ocupa dos filas. Cada celda combinada cubre varias posiciones de la cuadrícula: no añadas después otra celda en una posición ya ocupada.

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">Day</th>
    <th scope="colgroup" colspan="2">Visitors</th>
  </tr>
  <tr>
    <th scope="col">Morning</th>
    <th scope="col">Afternoon</th>
  </tr>
  <tr>
    <th scope="row">Monday</th>
    <td>3 visitors</td>
    <td>5 visitors</td>
  </tr>
</table>

En este ejemplo, Day cubre las dos filas del encabezado. Visitors agrupa Morning y Afternoon mediante un grupo de dos columnas. El colgroup permite dar un destino claro a scope="colgroup". La primera columna también tiene un grupo explícito, lo que evita depender de omisiones de etiquetas para entender la organización.

Al contar las columnas, incluye las posiciones cubiertas por las celdas combinadas. Para recordar qué aportan las filas y las celdas ordinarias, utiliza la estructura básica de table, tr, th y td.

Decidir si la combinación ayuda o estorba

No combines celdas solo para decorar una tabla sencilla. Si el lector necesita adivinar qué encabezado corresponde a un número, considera dividir los datos en tablas menores o simplificar la jerarquía.

Las tablas con varios niveles pueden necesitar asociaciones más explícitas que las de este ejercicio. La guía de encabezados irregulares de W3C WAI explica ejemplos de grupos; las relaciones todavía más complejas requieren una revisión específica, no añadir atributos al azar.

Comprobar que cada valor mantiene su contexto

Elige una celda cualquiera y pregunta qué día y qué franja representa. La respuesta debe poder obtenerse sin depender solo del color o de la posición visual. Compara los nombres del código con los encabezados que se muestran en el navegador.

Prueba una pantalla estrecha para detectar recortes y consulta la tabla con tecnologías de apoyo cuando sus encabezados sean complejos. No afirmes que toda la tabla es accesible solo porque tenga scope: importan los textos, los datos y la forma de navegarla. La práctica de accesibilidad HTML explica cómo combinar comprobaciones manuales sin confundir un único resultado con una revisión completa.