L'estil gencat responsiu ofereix dos models de visualització de taules de dades en diferents resolucions i dispositius.

Model de taula que mostra un scroll horitzontal en dispositius mòbils

El codi html que s’ofereix actualment mostra una taula molt senzilla que no és del tot responsiva: s’adapta a la resolució fins a cert punt, en què apareix scroll horitzontal (només a la taula, no a tot el contingut). 

Exemple d'un model de taula que mostra un scroll horitzontal en dispositius mòbils

Exemple d'un model de taula que mostra un scroll horitzontal en dispositius mòbils

Pàgina d'exemple

Realitzeu una cerca i els resultats es mostren en una taula.

Model de taula que converteix les columnes en files

Aquest model converteix, en la versió mòbil, les diferents columnes en files, i es mostra el contingut en una única columna. 

Exemple d'un model de taula que converteix les columnes en files

Exemple d'un model de taula que converteix les columnes en files

Pàgina d'exemple

Realitzeu una cerca i els resultats es mostren en una taula. L'opció en files és per a visualitzacions amb mòbil.

La construcció de taules ha de complir uns requeriments perquè aquestes siguin accessibles per a tothom i per a qualsevol dispositiu.

Algunes recomanacions sobre accessibilitat en taules, que es poden consultar a l’apartat de guies de l’Observatori d’Accessibilitat del Ministeri d’Hisenda i Administracions Públiques:

  • Les taules serveixen per mostrar informació tabular i no per dotar de presentació els continguts; per tant, s’ha d’evitar l’ús de taules per maquetar.
  • Marcar els encapçalaments de fila i columna i, en cas que sigui necessari (taules complexes), les associacions entre cel·les de dades i encapçalaments de fila i columna.
  • Utilitzar preferiblement taules de dades senzilles.
  • És recomanable especificar un títol per a la taula.
  • En taules de dades complexes, especificar un breu resum de les característiques de la taula. 

GECO+ no té una forma de presentació específica per construir taules. Aquestes s’han de maquetar en HTML a banda i llavors incrustar-les: o soles com a instàncies de contingut HTML (flexible content), o dins del cos de text enriquit dels articles, notícies, activitats...