Saltar al contenido principal

Tablas

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 2016
Fecha Lugar Ciudad País
03 Dic MT Smart Stadium Auckland Nueva Zelanda
HTML
<table>
  <caption>Conciertos Coldplay</caption>
  ...
</table>

Resumen de tabla

A veces es necesario añadir una explicación más detallada de la tabla. En HTML5 no existe ningún atributo específico para incluir un resumen o una información adicional a una tabla, pero podemos utilizar alguno de los siguientes métodos:

Método 1: incluir la información dentro de caption

Se incluye el texto dentro de la etiqueta caption, este método es recomendable especialmente para textos cortos.

Ejemplo
Conciertos Coldplay
Conciertos que va a ofrecer el grupo Coldplay en el año 2016
Fecha Lugar Ciudad País
03 Dic MT Smart Stadium Auckland Nueva Zelanda
... ... ... ...
HTML
<table>
  <caption>Conciertos Coldplay<br>
  <small>Conciertos que va a ofrecer el grupo Coldplay en el año 2016</small>
  </caption>
  ...
</table>

Método 2: añadir un párrafo antes o después de la tabla

En este caso, asociamos el párrafo y la tabla con los atributos id y aria-describedby.

Ejemplo

Conciertos que va a ofrecer el grupo Coldplay en el año 2016.

Conciertos Coldplay
Fecha Lugar Ciudad País
03 Dic MT Smart Stadium Auckland Nueva Zelanda
HTML
<p id="summary">
Conciertos que va a ofrecer el grupo Coldplay en el año 2016.
</p>

<table aria-describedby="summary">
  <caption>Conciertos Coldplay</caption>
  ...
</table>

Método 3: incluir la tabla dentro del elemento figure

Con este método utilizamos el elemento <figcaption> además de los los atributos id y aria-describedby.

Ejemplo
Conciertos que va a ofrecer el grupo Coldplay en el año 2016.
Conciertos Coldplay
Fecha Lugar Ciudad País
03 Dic MT Smart Stadium Auckland Nueva Zelanda
HTML
<figure>
    <figcaption id="description">
     Conciertos que va a ofrecer el grupo Coldplay en el año 2016.
    </figcaption>

<table aria-describedby="description">
    <caption>Conciertos Coldplay</caption>
    ...
    </table>
</figure>

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, aparece una barra en la parte de abajo que permite desplazar el contenido horizontalmente.

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 {
  display: block;
  overflow-x: auto;
}