Saltar al contenido principal

Tablas

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

Título de tabla

El título de una tabla se incluye con el elemento caption. Los lectores de pantalla anuncian el contenido de caption y el usuario puede decidir si le interesa leer la tabla o no.

Ejemplo
Conciertos Coldplay año 2020
Fecha Lugar Ciudad País
20 Marzo Under the Bridge Londres Reino Unido
HTML
<table>
  <caption>Conciertos Coldplay año 2020</caption>
  ...
</table>

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.

Para asociar las celdas de encabezado con las celdas de datos utilizamos el atributo <scope>:

  • <scope="col"> para encabezados de columna
  • <scope="row"> para encabezados de fila
Ejemplo
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
HTML
<table>
  <caption>Actividades gimnasio</caption>
  <tr>
    <td></td>
    <th scope="col">Lunes</th>
    <th scope="col">Martes</th>
    <th scope="col">Miércoles</th>
  </tr>
  <tr>
    <th scope="row">08:00 - 09:00</th>
    <td>Aquagym</td>
    <td>Zumba yoga</td>
    <td>Pilates</td>
  </tr>
  <tr>
    <th scope="row">09:00 - 10:00</th>
    <td>Pilates</td>
    <td>Rumba</td>
    <td>Estiramientos</td>
  </tr>
  <tr>
    <th scope="row">11:00 - 12:00</th>
    <td>Aquagym</td>
    <td>Estiramientos</td>
    <td>Pilates</td>
  </tr>
</table>

Nota: Los elementos <thead>, <tbody> y <tfoot> proporcionan información semántica útil para la presentación de la tabla en dispositivos, como pantallas e impresoras, 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
# Encabezado Encabezado Encabezado Encabezado
1 Celda Celda Celda Celda
2 Celda Celda Celda Celda
3 Celda Celda Celda Celda
HTML
<div class="table-responsive">
    <table>
    ...
    </table>
</div>
CSS
.table-responsive {
    overflow-x: auto;
}