La maquetación por tablas ya no es tan popular como lo era hace unos años, algo que ha llevado a más de uno (me incluyo en algunos momentos) a mandar las tablas al ostracismo apelando a la palabra mágica que últimamente rodea a todo lo relacionado con el diseño web: la Accesibilidad.
Pero quizá, en ese afán de desentendernos de las tablas, llegamos a extremos en los que tratamos de maquetar una tabla sin tablas.
Pues para todos aquellos que les ha pasado algo similar, vamos a repasar como hacer una tabla accesible.
Vamos a analizar las etiquetas que componen la estructura de una tabla y ver qué es cada uno de sus componentes:
- La etiqueta
<table>
: esta etiqueta define dónde comienza la tabla. Se le debe de añadir el atributosummary=""
en el que se describa de forma breve un resumen de la tabla. Además, lo común es darle un atributo id para poder darle estilo a través de CSS como un elemento individual. - Etiqueta
<caption>
: en esta etiqueta se puede poner el título de la tabla. - La etiqueta
<thead>
: etiqueta que define el comienzo de la cabecera de la tabla. Dentro de esta etiqueta se definirá la fila con<tr>
como se hace en las tablas habitualmente, pero las celdas se definen como<th>
sustituyendo al ya conocido<td>
. - La anteriormente mencionada etiqueta
<th>
: esta etiqueta define las celdas que componen la cabecera de nuestra tabla, y como tal, el navegador les dará su peso específico "pintando" el contenido en negrita y centrándolo en la celda. Se debe de acompañar del atributoscope
- Etiqueta
<tbody>
: dentro de esta etiqueta estará el cuerpo de nuestra tabla. Se definen las filas y las celdas con las sobradamente conocidas etiquetas<tr>
y<td>
. - Atributo
scope=""
: este atributo se utiliza para vincular la información contenida en las diferentes celdas de una tabla. Se utiliza únicamente con las etiquetas<th>
y<td>
, y puede tomar un solo de sus valores.
Supone una alternativa simple al atributo headers
.
¿Esto a efectos prácticos en qué se traduce?, en que para definir inicios de columnas e inicios de fila, se debe de añadir el atributo scope=""
para hacer la tabla accesible a los lectores de pantalla.
Los valores que puede tomar son:
1. row: la celda se refiere al inicio de una fila.
2. col: la celda se refiere al inicio de una columna.
3. rowgroup: la celda se refiere al inicio de un conjunto de filas.
4. colgroup: la celda se refiere al inicio de un conjunto de columnas.
Como ejemplo de todas estas etiquetas, añado el siguiente código de una tabla:
<table summary="Tabla de ejemplo" id="tabla" > <caption>Título de la tabla</caption> <thead> <tr id="cabecera" > <th scope="col">Título de columna 1</th> <th scope="col">Título de columna 2</th> <th scope="col">Título de columna 3</th> </tr> </thead> <tbody> <tr> <td scope="row">1ª celda de fila 1</td> <td>2ª celda de fila 1</td> <td>3ª celda de fila 1</td> </tr> <tr> <td scope="row">1ª celda de fila 2</td> <td>2ª celda de fila 2</td> <td>3ª celda de fila 2</td> </tr> <tr> <td scope="row">1ª celda de fila 3</td> <td>2ª celda de fila 3</td> <td>3ª celda de fila 3</td> </tr> <tr> <td scope="row">1ª celda de fila 4</td> <td>2ª celda de fila 4</td> <td>3ª celda de fila 4</td> </tr> </tbody> </table>Este código pintaría una tabla como la siguiente:
Título de columna 1 | Título de columna 2 | Título de columna 3 |
---|---|---|
1ª celda de fila 1 | 2ª celda de fila 1 | 3ª celda de fila 1 |
1ª celda de fila 2 | 2ª celda de fila 2 | 3ª celda de fila 2 |
1ª celda de fila 3 | 2ª celda de fila 3 | 3ª celda de fila 3 |
1ª celda de fila 4 | 2ª celda de fila 4 | 3ª celda de fila 4 |
a | b | c |
d | e | f |
a | b | c |
d | e | f |