Tablas

Crea tablas accesibles añadiendo un título e identificando los encabezados.

Contenido

Título de tabla
Encabezados de tabla
Tablas adaptables
Comprobación

Título de tabla

Para incluir un título en una tabla utilizamos el elemento caption.

El título de tabla es una breve descripción de su contenido. Esto resulta útil para todos los usuarios y especialmente para los que usan lectores de pantalla.

Encabezados de tabla

Las celdas de encabezado de una tabla se identifican con el elemento <th> (table header).

Los encabezados pueden afectar tanto a columnas como a filas y, aunque a simple vista sea fácil de distinguir, se debe indicar mediante el código para que los lectores de pantalla lean los datos en el orden correcto.

Ejemplo: Tabla simple

Actividades gimnasio
	Lunes	Martes	Miércoles
08:00 - 09:00	Aquagym	Zumba	Pilates
09:00 - 10:00	Pilates	Rumba	Estiramientos
11:00 - 12:00	Aquagym	Estiramientos	Pilates

<table>
<caption>Actividades gimnasio</caption>
<tr>
  <td></td>
  <th>Lunes</th>
  <th>Martes</th>
  <th>Miércoles</th>
</tr>
<tr>
  <th>08:00 - 09:00</th>
  <td>Aquagym</td>
  <td>Zumba</td>
  <td>Pilates</td>
</tr>
<tr>
  <th>09:00 - 10:00</th>
  <td>Pilates</td>
  <td>Rumba</td>
  <td>Estiramientos</td>
</tr>
<tr>
  <th>11:00 - 12:00</th>
  <td>Aquagym</td>
  <td>Estiramientos</td>
  <td>Pilates</td>
</tr>
</table>

En caso de tablas complejas, podemos asociar las celdas de encabezado con las celdas de datos utilizando el atributo scope:

scope="col" para encabezados de columna.
scope="row" para encabezados de fila.
scope="colgroup" para encabezados que abarquen varias columnas.
scope="rowgroup" para encabezados que abarquen varias filas.

Nota: Los elementos <thead>, <tbody> y <tfoot> son muy útiles para la presentación de la tabla y para aplicar estilos, pero no proporcionan ninguna funcionalidad de accesibilidad.

Tablas adaptables

La técnica más simple para crear tablas adaptables consiste en permitir el desplazamiento horizontal. De esta forma, cuando la tabla no cabe en la ventana, podemos desplazarla horizontalmente para ver todo el contenido.

Ejemplo: Tabla adaptable

#	Encabezado 1	Encabezado 2	Encabezado 3	Encabezado 4
1	Celda 1.1	Celda 1.2	Celda 1.3	Celda 1.4
2	Celda 2.1	Celda 2.2	Celda 2.3	Celda 2.4
3	Celda 3.1	Celda 3.2	Celda 3.3	Celda 3.4

<div class="table-responsive" tabindex="0">
  <table>
    ...
  </table>
</div>

.table-responsive {
  overflow-x: auto;
}

Nota: El atributo tabindex="0" es necesario en Chrome para poder desplazar la tabla lateralmente, navegando con el teclado, cuando no contiene elementos enfocables.

Comprobación

En caso de información tabular en la página realiza las siguientes comprobaciones:

El uso adecuado de los elementos table, th, tr y td.
Si la tabla dispone de un título, verifica que se usa el elemento caption y que describe el contenido de forma adecuada.
En caso de tablas complejas, comprueba que las celdas de encabezado están asociadas con las celdas de datos.