Una tabla de datos definida con la etiqueta
table es muy fácil de entender si se
puede ver toda ella en su conjunto, pero es muy difícil de entender si sólo se puede ver un
dato aislado cada vez. Este problema lo sufren los usuarios que emplean navegadores no visuales, ya que ellos tienen que recorrer las tablas de formal lineal y pierden la visión global de la tabla que permite identificar el significado de cada dato de una celda.
Para evitar este problema, tenemos que etiquetar correctamente las tablas para definir su título, los encabezamientos de las columnas y las filas y tenemos que incluir un resumen que describa brevemente el contenido de la tabla.
El títuloUna tabla debe de tener un título que proporcione una descripción breve de la tabla. Para evitar que existan dudas, el título se tiene que definir dentro de la tabla. Para definir correctamente el título de una tabla, se tiene que emplear la etiqueta
caption. De acuerdo con la especificación de HTML, la etiqueta
caption es opcional y tiene que ser el primer elemento que contenga una tabla.
EncabezamientosAl recorrer una tabla de forma lineal, se pierde la visión global y es muy difícil identificar el significado de un dato. Para evitar esta situación, podemos usar los encabezamientos, que permiten asociar un dato con su encabezado.
Un encabezado de una tabla se define con la etiqueta
th. Esta etiqueta es similar a la etiqueta
td (se puede usar una en el lugar de la otra) y por tanto ambas definen una celda de una tabla, pero
th indica que la celda contiene un encabezado.
Encabezamientos más complejos
Para tablas con encabezamientos más complejos, donde pueden existir varios niveles de encabezamiento, podemos emplear los atributos
scope y
headers para definir la relación que existe entre las celdas de encabezamiento y las celdas de datos. En tablas sencillas ambos atributos se pueden emplear de forma equivalente, pero para tablas más complejas se tiene que emplear el atributo
headers. El uso del atributo
scope y
headers no afecta a la presentación visual de la tabla.
El atributo
scope define el conjunto de celdas para las cuales la celda sobre la que se aplica proporciona información de encabezamiento. Puede tomar cuatro posibles valores:
- row: La celda proporciona información de encabezamiento para el resto de celdas
de la fila que la contiene. - col: La celda proporciona información de encabezamiento para el resto de celdas
de la columna que la contiene. - rowgroup: La celda proporciona información de encabezamiento para el resto del
grupo de filas que la contiene. - colgroup: La celda proporciona información de encabezamiento para el resto del
grupo de columnas que la contiene.
El atributo
headers permite definir una lista de celdas de la tabla que proporcionan información de encabezamiento para la celda actual. El valor de este atributo es una lista separada por espacios en blanco de los identificadores de las celdas de encabezamiento; las celdas se identifican con el atributo
id. Por tanto, el atributo
headers permite definir encabezamientos más complejos que con el atributo
scope.
Resúmenes
El resumen permite definir una descripción larga de la tabla que complemente al título de la tabla. La descripción tiene que incluir una explicación sobre el contenido y sobre la estructura de la tabla (número de filas y de columnas, descripción de los encabezamientos). Además, también puede explicar la relación que guarda la tabla con el resto de la página. En HTML, el resumen de una tabla se define con el atributo
summary de la etiqueta
table.
Para obtener más información, consulta las siguientes páginas:
