Saltar la navegación

Inclusión de tablas de datos

 

En HTML, las tablas sirven para mostrar información tabular y no para dotar de presentación a los contenidos, por lo que debes evitar el uso de tablas para maquetar. Así, las tablas de datos estructuran la información en filas y columnas describiendo una relación entre cada celda de datos con otras celdas en su misma fila y/o columna.

Uno de los requisitos principales de una tabla de datos es que cada celda de encabezado se identifique como tal (en HTML, con el elemento <th>). Con ello se consigue:

  • Que los lectores de pantalla puedan asociar las celdas de datos con sus correspondientes encabezados.
  • Que se indique visualmente los encabezados en navegadores gráficos.
  • Que el gestor de contenidos le pueda dar un estilo diferente a través de hojas de estilo (CSS).

Asimismo, en tablas de datos complejas (aquellas con dos o más niveles lógicos de encabezado) debes realizar una asociación explícita entre las celdas de datos y las celdas de encabezado correspondientes, con el fin de permitir una correcta interpretación de la tabla por los productos de apoyo. Dicha asociación se realiza en HTML por medio de los atributos "scope", "id" y "headers". Estos dos últimos atributos permiten realizar asociaciones más complejas permitiendo que una celda disponga de varios encabezados. Para ello, cada celda de datos incluirá en su atributo "headers" el identificador unívoco "id" de todos los encabezados relacionados con ésta.

Tablas complejas. Nivel AVANZADO

A continuación, puedes ver una tabla compleja junto a como se visualizaría:

Código de una tabla compleja resultado visual de una tabla compleja

Como podrás comprobar, dicha tabla compleja cuenta con dos filas de encabezado. A cada celda de la primera fila se le ha asignado un identificador (atributo "id"). A las celdas de la segunda fila de encabezados también se les ha asignado un identificador y se las ha asociado con la celda de la primera fila a través del atributo "headers". Por ejemplo, la celda "Final" tiene como encabezado la celda de la primera fila "Exámenes tipo test" cuyo "id" es igual a "t" ya que el atributo "headers" tiene el mismo valor. Si una celda tiene dos encabezados o más, estos deberán aparecer dentro del atributo "headers" separados por un espacio.

 

Cuando se crea una tabla con un gestor de contenidos, por defecto, no se marcan los encabezados, si bien, se proporcionan herramientas para que puedas marcarlos de forma semiautomática, a través de unas opciones básicas que, en ningún caso, cubren todas las posibilidades, existiendo casos en los que se deberás revisar manualmente el código y añadir el etiquetado necesario para que la tabla sea accesible.

Del mismo modo, al crear la tabla no se lleva a cabo automáticamente una asociación entre celdas de datos y encabezados, por lo que, si la tabla es compleja, deberás analizar las relaciones existentes e incluirlas manualmente en el código.

En la siguiente imagen se puede ver como seleccionar los encabezados de una tabla en un gestor de contenidos.

Imagen de las propiedades de una tabla en un CMS

Si el gestor de contenidos no permite la generación de esos marcados mediante opciones del editor WYSIWYG, como ya se ha indicado en alguna otra ocasión, será necesario realizar el marcado directamente en el código HTML. Las tablas deben contar, como mínimo, con los siguientes elementos:

  • un elemento contenedor <table>
  • una o varias filas identificadas con el elemento <tr>
  • dentro de cada fila deberá haber una o más celdas identificadas con el elemento <th>, si la celda es de encabezado, o con el elemento <td>, si la celda contiene datos.

La situación más habitual en los editores WYSIWYG es que se puedan identificar la primera fila como fila de encabezados y/o la primera columna como columna de encabezados. No suelen permitir definir múltiples filas o columnas de encabezado, ni otras estructuras complejas, así como tampoco realizan ni permiten realizar la asociación entre celdas de datos y celdas de encabezado.

En estos casos, lo más recomendable es que intentes usar siempre tablas de datos sencillas, con una única fila o columna de encabezados que se puedan especificar a través del propio editor sin necesidad de corregir el código generado. De esta forma, al ser tablas sencillas, si las celdas de encabezado se identifican correctamente no es necesario asociar las celdas de datos con las celdas de encabezado. Por tanto, cuando una tabla sea compleja se recomienda reestructurarla en una tabla de datos sencilla o bien dividirla en varias tablas de datos sencillas.

Por otro lado, para mejorar la comprensión de la estructura y de los contenidos de una tabla, es muy recomendable que incluyas un título que describa brevemente la naturaleza de la tabla (ver el ejemplo de tabla compleja). Para ello, deberás incluir dentro del elemento tabla un elemento "caption", en cuyo interior se escribirá el título. Es decir, el título no podrá incluirse, por ejemplo, como un párrafo (centrado y en negrita) antes de la tabla, sino que ha de emplearse el campo adecuado que el gestor proporciona para ello.

Asimismo, en las tablas de datos complejas es necesario incluir un resumen de los contenidos de la misma y de las relaciones entre las celdas, especialmente para las tablas con encabezamientos anidados, celdas que ocupan varias filas o columnas, u otras relaciones que solo son evidentes cuando la tabla se muestra visualmente. Antiguamente este resumen se incluía a través de un atributo llamado "summary". Actualmente, este atributo se considera obsoleto por lo que, si la tabla precisa de dicha información, deberás incluirla en un párrafo previo a la tabla.

No obstante, es posible que te encuentres con alguna tabla compleja que disponga aún de dicho atributo. En este caso, si la tabla de datos cuenta también con un título, entonces el contenido de ambos debe ser diferente y complementario y por tanto no estar duplicado.

Es importante recordar que para que la tabla sea completamente accesible, el contenido del título y resumen debe ser adecuado, aspecto que no se puede comprobar de forma automática.

En la siguiente imagen se puede apreciar un gestor de contenidos que cuenta con los dos elementos: el título y el resumen o síntesis.

Campos de introducción de título y resumen de tablas de datos

Además, se recomienda que utilices unidades de medida relativas (porcentaje en lugar de píxeles) para definir las dimensiones de la tabla. Los gestores de contenido suelen proporcionar, entre las propiedades de tabla, un campo que permite seleccionar el tipo de unidad en el que se desea definir el ancho y alto de la tabla.

Campo de selección del tipo de unidad para las dimensiones de una tabla

Verificar una tabla

Puedes utilizar la herramienta Web Developer Toolbar para verificar determinados elementos de las tablas usando las siguientes opciones:

  • Outline > Outline Tables: resalta todas las tablas de la página web. Nos ayudará a detectarlas todas.

Resalta las tablas de la página

  • Outline > Outline Table Captions: resalta el título (<caption>) de las tablas

Encontrar el titulo de la tabla

Para comprobar si la tabla dispone de celdas de encabezados (elementos <th>), de celdas de datos (elementos <td>), de relaciones entre las celdas (atributos "scope", "id" y headers") y de un resumen (atributo "summary"), se deberá utilizar el inspector de código de nuestro navegador.

En la siguiente imagen puedes ver la tabla seleccionada desde el inspector de código y como dicha tabla aparece resaltada en la página web.

Tabla seleccioada con el inspector de código

En el código de la tabla puedes ver que dicha tabla dispone de un resumen (atributo "summary"), de un título (elemento <caption>) y de varias filas (elementos <tr>).

Si en el código pinchamos en la primera fila (primer elemento <tr>), nos mostrará el elemento seleccionado en la tabla.

Se selecciona una fila de la tabla

Esta primera fila es la del encabezado de la tabla ya que los elementos que la integran son celdas de encabezados (elementos <th>).

Si esta vez pinchamos en la primera celda del encabezado, la resaltará en la tabla de la página web.

Fíjate que las celdas de encabezados cuentan con el atributo "scope", cuyo el valor es "col", para identificar dichas celdas como encabezados de las columnas.

Si pinchamos en las siguientes filas (<tr>) nos encontraremos que son filas de datos ya que están formadas por celdas de datos (<td>).

fila de datos de la tabla

Ponte a prueba

Para poder realizar este ejercicio deberás acceder al Ejemplo de tablas y seguir los pasos que allí se te indican.

Responde a las siguientes preguntas seleccionando la respuesta correcta.

Pregunta 1


1. ¿La tabla "A" dispone de título?

Pregunta 2


2. ¿La tabla "B" dispone de una fila de encabezados?

Pregunta 3


3. ¿Cuenta la tabla "C" con un título y un encabezado?

Pregunta 4


4. Nivel AVANZADO. ¿Está la tabla compleja "D" bien estructurada?

Guía rápida de tablas

  • Evita su uso para maquetación.
  • Marca los encabezados de fila y de columna y, en caso de que sea necesario (tablas complejas), las asociaciones entre celdas de datos y encabezados de fila y columna.
  • Emplea preferiblemente tablas de datos sencillas.
  • Es recomendable que especifiques un título para la tabla. Hazlo usando la opción que el gestor de contenidos te proporcione para ello y no directamente en el contenido de la página.
  • En las tablas de datos complejas, especifica un breve resumen de las características de la tabla. Hazlo añadiendo un párrafo antes de la tabla o usando la opción que el gestor proporciona para ello (no recomendado).