Què podem fer amb taules?

Com fer taules ordenades

Per crear taules ordenades s'han de seguir les pases següents:

  1. S'ha de definir la taula com a ordenable.
  2. S'ha d'incloure un component especial (PC_sortedTable) a la pàgina on es visualitzarà el contingut que té la taula.

A continuació s'expliquen les passes que s'han de fer, i a l'enllaç següent hi ha una presentació de com fer taules ordenades.

Definir una taula com a ordenable

Per fer que una taula sigui ordenable s'han de definir dos camps de les seves propietats.

Camp Valor
Headers First Row
Estil Columnes ordenades

Quan es crea la taula es poden definir aquests valors. Si la taula ja està creada, s'ha de pitjar el botó dret del ratolí damunt la taula, escollir "Propietats de la taula" del menú contextual i modificar els camps amb els valors indicats a la taula anterior.

S'ha de tenir en compte que a l'editor no es distingirà si la taula està definida com ordenada o no.  La diferència es veurà a l'eina d'estructura a la pàgina que conté el contingut amb la taula ordenada.

Incloure el component PC_sortedTable a la pàgina

A la pàgina que té enllaçat el contingut amb una taula ordenada s'ha d'afegir el component PC_sortedTable del repositori UIB_NUCLI. Aquest component només es pot afegir o llevar, no es pot configurar, ja que la seva funció és afegir les llibreries necessàries per poder ordenar les taules.

A continuació es pot veure el resultat de la taula anterior.

 Exemple de taula ordenada

A aquesta imatge es pot veure:

  • Fletxes d'ordenació. Apareixen a la capçalera de la taula, dins cada una de les columnes.
  • Informació del component PC_sortedTable. Al final de la pàgina apareix un text informatiu de que s'ha afegit aquest component a la pàgina. Aquest text no serà visible a la pàgina publicada. Només s'inclou en edició perquè els editors dels llocs webs tenguin la certesa que el component està inclòs i que la taula es mostrarà amb les fletxes d'ordenació.

 

Incloure taules als continguts que siguin accesibles

La primera qüestió a tenir en compte respecte a les taules i l'accessiblitat és que no es poden emprar aquests elements per maquetar la pàgina, és a dir, que no es poden emprar taules per colocar els elements allà on es vol. Per fer això s'empren estils i si hi ha una necessitat en particular, s'ha de consultar amb l'equip web. Les taules s'han d'emprar única i exclusivament per colocar informació tabulada.

Si s'empra l'editor de continguts que hi ha disponible amb l'eina de continguts les taules ja es creen cumplint les normes d'accessibilitat.

Només s'ha de tenir en compte dos punts:

  1. És obligatori definir un títol per la taula. Ha de ser una frase sencilla.
  2. És obligatori introduir un resum de la taula. És una explicació un poc més extensa del contingut de la taula; és molt últil quan la taula és complexa.

Aquests dos camps no són obligatoris quan es crea la taula, però realment s'han de definir per complir les normes d'accessibilitat de taules.

Si la taula es copia des d'un altre editor, com per exemple el Word, s'ha d'emprar el botó de "Enganxa des de el Word" de la barra d'eines i es copiarà la taula sense format; aleshores, amb el botó dret del ratolí damunt la taula es tria l'opció de "Propietats de la taula", se l'assigna un estil propi del web de la universitat i es defineixen el títol i el resum. D'aquesta forma la taula ja és accessible.

Alineació de taules dins el contingut

Es poden crear taules que no ocupin el 100% de l'amplada del contingut, mitjançant la propietat "amplada" a la finestra de definició de taules.

Aquestes taules es poden alinear a l'esquerra, al centre o a la dreta. Per aconseguir aquest efecte, s'ha d'emprar el camp "Alineació" de la finestra de definició de taules.

La següent imatge mostra un exemple de com es definiria una taula d'aquest estil:

Definició d'una taula centrada

 

I així quedaria la taula respecte al contingut:

 MesPluja l/m2
 Gener 30,5
 Febrer 69,6

 

 

Alineació de taules dins el contingut

Es poden crear taules que no ocupin el 100% de l'amplada del contingut, mitjançant la propietat "amplada" a la finestra de definició de taules.

Aquestes taules es poden alinear a l'esquerra, al centre o a la dreta. Per aconseguir aquest efecte, s'ha d'emprar el camp "Alineació" de la finestra de definició de taules.

La següent imatge mostra un exemple de com es definiria una taula d'aquest estil:

Definició d'una taula centrada

 

I així quedaria la taula respecte al contingut:

 MesPluja l/m2
 Gener 30,5
 Febrer 69,6

 

Emprar llistes per veure la informació com una taula

Es poden emprar les llistes no ordenades per veure la informació com a taules. Aquesta forma de visualitzar la informació s'ofereix per poder visualitzar la informació que realment no és tabular com si fos una taula (que aquestes no serien accessibles per mostrar aquest tipus d'informació). A la presentació enllaçada podeu veure una demostració de com crear i modificar llistes amb aquest estil.

Exemple

Un exemple d'aquest cas seria:

Llista com a taula

En aquest cas, la informació realment no s'ha d'organitzar com una taula, però visualment queda més clar si té aquest format. Per això, s'han creat una sèrie de llistes amb la informació i, posteriorment, s'ha afegit el format de presentació com si realment fos una taula.

Creació d'una llista amb format de taula

  1. Es crea una llista i una subllista per a cada entrada de la llista. Les entrades de la llista es veuran com a la columna de l'esquerra (capçalera) i la subllista de cada entrada formaran la columna de la dreta.
  2. Damunt la llista, s'ha de pitjar el botó dret del ratolí i a la propietat "list style" triar un dels valors que s'anomenen "Llistes com a taules ..."
  3. Per a cada entrada de la llista que queda en primera columna, seleccionar el text i al camp Estil de la barra de botons de l'editor, assignar-li el valor "Primera columna".

 A l'exemple anterior, la definició de la  llista seria:

  • Facultats i Escoles
    • Escola Politècnica superior
  • Departaments
    • Ciències Matemàtiques i Informàtiques
  • Edificis
    • Anselm Turmeda
    • Aulari prefabricat
    • Beatriu de Pinós

Damunt aquesta llista, s'ha de pitjar el botó dret, accedir a les seves propietats i triar "Llistes com a taules ...". Després s'ha de seleccionar el text, "Facultats i Escoles" i donar-li estil "Primera columna"; fer el mateix amb "Departaments" i després amb "Edificis".

 Per donar una major flexibilitat, s'han definit diferents formats de llistes com a taules:

  1. Llistes com a taules 10/90. La primera columna ocuparà el 10% de l'espai i l'altra el 90%.
  2. Llistes com a taules 20/80. La primera columna ocuparà el 20% de l'espai i l'altra el 80%
  3. Llistes com a taules 30/70. La primera columna ocuparà el 30% de l'espai i l'altra el 70%
  4. Llistes com a taules 40/60. La primera columna ocuparà el 40% de l'espai i l'altra el 60%

 

Plantilla a dues columnes amb format de taules UIB

S'ha creat una plantilla per facilitar la creació d'aquesta estructura. Una avantatge respecte a l'anterior és la possibilitat de posar llistes a dins les cel·les. El resultat d'aplicar-la és el següent:

Exemple de emprar la plantilla a dues columnes amb format UIB

Passes a seguir

A continuació s'expliquen les passes a seguir.

Primer s'ha de posar la plantilla. Per fer-ho es clica sobre el botó de l'editor de "Plantilles"

Botonera de l'editor amb l'opció de Plantilles seleccionada amb vermell

Sortirà una finestra en la que apareixeran les plantilles que hi ha definides i s'ha de seleccionar la de "Contingut a dues columnes UIB":

Plantilles disponibles des de l'editor

A l'editor apareixerà la següent estructura que la podreu emplenar amb la informació:

Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta
Editau el text de l'esquerra
Editau el text de la dreta

 

Una vegada completada es poden esborrar les files que sobren.