L'ús de les taules en els webs genera molta confusió, perquè per un costat la recomanació d'accessibilitat és emprar-les el menys possible, però en cas necessari es poden utilitzar i la realitat és que s'utilitzen molt.
Les taules s'utilitzen per organitzar i presentar la informació de manera fàcil per a l'usuari.
Així, són l'alternativa a l'ús de tabulacions.
Principalment serveixen per ordenar el disseny d'un document per tal que d'un cop d'ull es pugui trobar la informació desitjada.
Les taules s'agrupen en dos eixos, vertical i horitzontal, per tant, cal tenir les dades ben jerarquitzades a l'hora de construir-les.
Pots utilitzar taules si tens dades en format tabular per mostrar, com per exemple estadístiques, cartes de preus, llistes de productes, horaris de trens, mides, o altres dades que lògicament estan construïts en format de taula.
Per exemple, quan es publica un dispositiu de trànsit amb les mesures especials a les carreteres ens trobem amb dades com el dia de l'afectació, l'horari, la via, el tram, el sentit i l'afectació en si.
La millor manera de mostrar aquesta informació és una taula.
Per construir taules de forma accessible cal seguir les indicacions en llenguatge HTML.
Eina per crear de forma automàtica taules accessibles.
del Portal d'Administració Electrònica.
La presentació en taules hauria de respondre afirmativament aquestes tres preguntes:
És imprescindible que la taula sempre tingui un títol, i si és complexa, caldrà un resum de les conclusions que s'extreuen.
En codi HTML, aquesta informació s'inclou amb l'element per al títol i textualment per al resum.
Si es posa el títol i el resum, caldrà que el contingut sigui diferent.
Aquí teniu un exemple de codi HTML amb el títol i el resum informats:
Resum de la taula si és complexa, o si no és complexa però té moltes files o moltes columnes, també.
Codi d'exemple de taula explicat amb títol i resum en un editor d'HTML.
Informació i exemples de maquetació del títol a w3schools.com
Informació i exemples de maquetació del resum a w3schools.com
El llenguatge HTML ofereix tres elements per estructurar una taula segons si estan a la capçalera, al cos o al peu.
Tot i que no és imprescindible per a les taules simples, és recomanable per millorar l'accessibilitat.
Les etiquetes i es poden utilitzar per proporcionar una fila d'encapçalaments a la part superior i inferior d'una taula.
Potencialment són molt útils per a taules llargues que s'estenen en més d'una pàgina, ja que permeten imprimir la capçalera i el peu de pàgina a cada pàgina.
Si s'utilitzen les etiquetes i, també s'ha d'utilitzar per definir el cos de la taula, és a dir, la part de la taula que conté les cel·les de dades reals.
De fet, una taula pot tenir més d'un.
Exemple de taula amb les etiquetes d'estructura:
Exemple de taula estructurada en blocs
Codi d'exemple de taula explicat amb estructura de capçalera, cos i peu, en un editor d'HTML.
Informació i exemples de maquetació del l'estructura de capçalera a w3schools.com
Informació i exemples de maquetació de l'estructura del cos a w3schools.com
Informació i exemples de maquetació de l'estructura del peu a w3schools.com
Les taules han de tenir definits els encapçalaments amb l'etiqueta, tant en horitzontal com en vertical.
Això és necessari perquè en recórrer una taula de forma lineal (amb un lector de pantalla, per exemple) es difícil identificar el significat d'una dada.
L'etiqueta defineix una cel·la de la taula, al igual que ho fa l'etiqueta, però l'etiqueta indica que la cel·la té una funció especial i conté un encapçalament.
Per indicar que el camp de la cel·la és l'encapçalament de la columna (vertical) o la fila (horitzontal) cal utilitzar l'atribut SCOPE.
Serà "col" si és una columna i "row" si és una fila.
Exemple de taula amb encapçalaments:
Exemple de taula amb encapçalaments
Codi d'exemple de taula explicat amb encapçalaments en un editor d'HTML.
Informació i exemples de maquetació dels encapçalaments a w3schools.com
Informació i exemples de maquetació dels encapçalaments en horitzontal o vertical a w3schools.com