Tablas

Título de tabla

El título de tabla consiste en una breve descripción de su contenido. Permite a los usuarios conocer el propósito de la tabla y resulta especialmente útil para los que usan lectores de pantalla.

Para incluir un título en una tabla utilizamos el elemento <caption>:

<table>
  <caption>
    Los planetas de nuestro sistema solar
  </caption>
  ...
</table>

Como alternativa al elemento <caption> puedes usar aria-label o aria-labelledby.

Encabezados de tabla

Las celdas de encabezado de una tabla se identifican con el elemento <th>.

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.

<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>

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

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 el ancho de la ventana, podemos desplazarla para ver todo el contenido.

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

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

Nota: El atributo tabindex="0" permite que la tabla se pueda enfocar al navegar con el teclado.