Ajuda: taules

De la Viquipèdia, l'enciclopèdia lliure.
Saltar a la navegació Saltar a la cerca
Gnome-help.svg - Taulell d'informació

En aquesta pàgina s’explica la sintaxi per inserir una taula a la Viquipèdia mitjançant el marcatge wiki .

Hi ha algunes eines per generar taules automàticament. Per obtenir una guia completa de taules (en anglès), consulteu m: Ajuda: taula .

Tingueu en compte que les plantilles sinòptiques i les plantilles de navegació són casos especials de taules amb les seves pròpies classes i mètodes de creació, per a les quals fem referència a les pàgines relatives.

A continuació es mostra detalladament com es construeix una taula.

Resum

El marcatge d'una taula es pot resumir a la llegenda següent:

 {|
Inici de la taula
 | +
títol de la taula, opcional , només es pot posar entre el començament de la taula i la primera fila de la taula
 | -
fila de la taula , opcional a la primera fila - MediaWiki assumeix que existeix la primera fila
 !
cel·la de capçalera , opcional (gris més fosc). Els encapçalaments consecutius poden estar en la mateixa línia separats per signes d'exclamació dobles ( !! ).
 |
contingut de la taula , obligatori . Les cel·les consecutives es poden afegir a la mateixa línia separades per tubs dobles ( || ) o iniciar-se en línies noves, cadascuna començant per una canonada ( | ).
 |}
Final de la taula

Ordres bàsiques

Per facilitar l'explicació de la sintaxi, considerem la següent taula d'exemple:

Fila 1, cel·la 1 Fila 1, cel·la 2 Fila 1, cel·la 3
Fila 2, cel·la 1 Fila 2, cel·la 2 Fila 2, cel·la 3

i anem a veure pas a pas com construir-lo.

Creeu una taula estàndard

En primer lloc, definim la taula amb {| i |} per indicar el principi i el final. Aquests símbols han de situar-se en línies separades :

 {|

|}

Cal inserir tot el codi que descrigui l’aspecte de la taula (per exemple, el nombre de files i columnes) a les línies entre els símbols anteriors. En la majoria dels casos, per donar a la taula un aspecte gràfic estàndard, s’afegeix el text següent:

 {| class = "wikitable"

|}

Per obtenir una explicació detallada del seu significat, vegeu la secció Atributs .

Addició de línies noves

Per iniciar una nova línia, escriviu |- al principi d'una nova línia . Per afegir una cel·la a la fila acabada de definir, escriviu | , sempre en una nova línia , seguida del text que vulgueu inserir en aquesta cel·la:

 {|
| -
| Fila 1, cel·la 1
| -
| Fila 2, cel·la 1
|}

Com que |- és opcional per a la primera línia, el codi anterior es pot reescriure així:

 {|
| Fila 1, cel·la 1
| -
| Fila 2, cel·la 1
|}

Afegir diverses cel·les a la mateixa fila

Hi ha dues maneres d’afegir diverses cel·les a la mateixa fila : per a cada cel·la que s’afegeix a la fila, escriviu || a la mateixa línia que la cel·la anterior, seguit del text que apareixerà a la nova cel·la o comenceu una nova línia amb | , seguit sempre del text que cal inserir a la cel·la:

 {|
| Fila 1, cel·la 1 || Fila 1, cel·la 2 || Fila 1, cel·la 3
| -
| Fila 2, cel·la 1
| Fila 2, cel·la 2
| Fila 2, cel·la 3
|}

En altres paraules, cada cel·la es defineix mitjançant l'ajust i l'escriptura | , o mantenint-se a la mateixa línia que la cel·la anterior i escrivint || . Els espais anteriors i posteriors a les barres verticals | s’ignoren i, per tant, es poden ometre, però, si s’utilitzen, faciliten la comprensió del codi i faciliten la modificació.

Addició de cel·les de capçalera

Suposem que volem transformar les tres cel·les de la primera fila de la taula en cel·les de capçalera: per fer-ho, simplement substituïu les barres verticals | amb tants punts d’exclamació ! . La sintaxi és idèntica: la primera cel·la de capçalera es defineix iniciant una nova línia amb un ! seguit del text que voleu inserir en aquesta cel·la, mentre que les cel·les de capçalera posteriors (que es troben a la mateixa línia) s’obtenen escrivint dues !! en la mateixa línia , o només una ! en noves línies . Per tant, sigui així

 {|
! Capçalera 1 !! Capçalera 2 !! Capçalera 3
| -
| Fila 2, cel·la 1 || Fila 2, cel·la 2 || Fila 2, cel·la 3
|}

és

 {|
! Capçalera 1
! Capçalera 2
! Capçalera 3
| -
| Fila 2, cel·la 1 || Fila 2, cel·la 2 || Fila 2, cel·la 3
|}

produeixen el mateix resultat, és a dir

Capçalera 1 Capçalera 2 Capçalera 3
Fila 2, cel·la 1 Fila 2, cel·la 2 Fila 2, cel·la 3

També es poden afegir cel·les de capçalera al començament de cada fila; per exemple, el codi

 {| class = "wikitable"
! !! Capçalera de columna 2 !! Capçalera de columna 3
| -
! Capçalera de fila 2
| Fila 2, cel·la 2 || Fila 2, cel·la 3
| -
! Capçalera de fila 3
| Fila 3, cel·la 2 || Fila 3, cel·la 3
|}

genera

Capçalera de columna 2 Capçalera de columna 3
Capçalera de fila 2 Fila 2, cel·la 2 Fila 2, cel·la 3
Capçalera de fila 3 Fila 3, cel·la 2 Fila 3, cel·la 3

Però vés amb compte: si escrius

 {| class = "wikitable"
! !! Capçalera de columna 2 !! Capçalera de columna 3
| -
! Capçalera de la línia 2 || Fila 2, cel·la 2 || Fila 2, cel·la 3
| -
! Capçalera de la fila 3 || Fila 3, cel·la 2 || Fila 3, cel·la 3
|}

és a dir, barrejar en la mateixa línia ! i | , com a resultat aconseguim

Capçalera de columna 2 Capçalera de columna 3
Capçalera de fila 2 Fila 2, cel·la 2 Fila 2, cel·la 3
Capçalera de fila 3 Fila 3, cel·la 2 Fila 3, cel·la 3

que no es correspon amb el que voleu.

Afegint un títol

Per afegir un títol a la taula, heu d’escriure |+ seguit del títol que voleu posar, recordant d’inserir |+ immediatament a sota {| :

 {| class = "wikitable"
| + Títol de la taula
! Capçalera 1 !! Capçalera 2 !! Capçalera 3
| -
| Fila 2, cel·la 1 || Fila 2, cel·la 2 || Fila 2, cel·la 3
|}

El resultat és el següent:

Títol de la taula
Capçalera 1 Capçalera 2 Capçalera 3
Fila 2, cel·la 1 Fila 2, cel·la 2 Fila 2, cel·la 3

Inseriu wikitext en una cel·la

Dins de les taules és possible formatar el text mitjançant la sintaxi normal de Wikipedia, per exemple escrivint paraules en cursiva o afegint wikilinks. Per embolicar dins d'una cel·la, podeu utilitzar l'etiqueta <br /> :

 {| class = "wikitable"
| Una cel·la amb un [[Ajuda: Wikilink | wikilink]]. || Una paraula en cursiva a la cel·la.
| -
| Una cel·la amb <br /> algun text escrit <br /> en diverses línies.
| Una cel·la amb un [[Help: Wikilink | wikilink]], <br /> una paraula en '' cursiva '' i <br /> el text escrit en diverses línies.
|}
Una cel·la amb un wikilink . Una paraula en cursiva a la cel·la.
Una cel·la amb
del text escrit
en diverses línies.
Una cel·la amb un wikilink ,
una paraula en cursiva e
el text escrit en diverses línies.

Si heu d’inserir elements en una cel·la la sintaxi de la qual requereix que comencin al començament d’una nova línia, com ara llistes de vinyetes i numerades o taules (de fet, és possible inserir una taula dins d’una altra taula), per mostrar-les correctament , cal anar al cap després del | :

 {| class = "wikitable"
| Una cel·la amb
* una llista
* assenyalat
dins.
| * Aquest asterisc no s'interpreta com una llista amb vinyetes perquè no s'inicia en una nova línia.
# En lloc d'això, aquests hashs s'interpreten com una llista numerada
# perquè es troben al principi de la línia.
| -
|
{| class = "wikitable"
| Taula || niat
| -
| dins || L'altre.
|}
Aquí ens trobem fora de la taula interna <br /> i dins de la cel·la de la taula exterior.
|
* Una llista
* # aposta mixta
* # a una llista
* numerat.
|}
Una cel·la amb
  • una llista
  • assenyalat

dins.

* Aquest asterisc no s'interpreta com una llista amb vinyetes perquè no s'inicia en una nova línia.
  1. En canvi, aquests hashs s’interpreten com una llista numerada
  2. perquè estan al principi de la línia.
Taula niat
dins L'altre.

Aquí som fora de la taula interior
i dins de la cel·la de la taula exterior.

  • Una llista
    1. aposta mixta
    2. a una llista
  • numerat.

Ús de ! i |

Quan escriviu el text contingut en una taula, fixeu-vos en els personatges ! i | , perquè és probable que siguin mal interpretats com a elements de marcatge. Per exemple, escrivint

 {| class = "wikitable"
| El símbol "|" és una barra vertical || Alguna cosa malament...
|}

el resultat és

"és una barra vertical Alguna cosa malament...

La raó d'aquest comportament "estrany" és que la barra entre cometes ha estat interpretada pel programari com un separador entre els atributs de la cel·la (el text a l'esquerra de la barra, el Il simbolo " ) i el contingut de la cel·la (el text a la dreta de la barra inclinada., " è una barra verticale ).

Hi ha diferents mètodes per resoldre aquest tipus de problemes. El primer és utilitzar les <nowiki>Testo</nowiki> : el text que hi ha entre ells no és interpretat pel programari, cosa perfecta per a l'exemple anterior:

 {| class = "wikitable"
| El símbol "<nowiki> | </nowiki>" és una barra vertical || D'acord
|}

Ara el resultat és correcte:

El símbol "|" és una barra vertical D'acord

Com a alternativa, podeu utilitzar l'entitat HTML &#124; en lloc de la barra vertical &#124; , mentre que l'ordre {{!}} no funciona en aquest cas.

Afortunadament, aquest problema no sorgeix amb els wikilinks canalitzats , que per tant es poden utilitzar amb normalitat (seria realment contraproduent recórrer als mètodes anteriors).

Problemes similars es produeixen quan heu d’escriure dos signes d’exclamació seguits en una cel·la de capçalera, però els mètodes per solucionar-los són els mateixos: incloure els punts d’exclamació a les etiquetes <nowiki> o substituir-los per l’entitat &#33; :

 {| class = "wikitable"
| + [[Factorial]] vs semifactorial
! '' n '' !! '' n ''! !! '' n '' & # 33; & # 33;
| -
| 5 || 120 || 15
|}
Factorial vs semifactorial
n n ! n !!
5 120 15

Atributs

Qualsevol element utilitzat per a la construcció de taules ( {| , |+ , |- , ! , !! , | i || ), excepte |} , pot acceptar qualsevol atribut HTML que modifiqui la seva aparença: per exemple, és possible canviar el color de fons d'una sola cel·la o d'una fila sencera. Els atributs HTML són cadenes de text del formulari attributo =" valore " , on l' attributo i el valore s'han de substituir per noms vàlids i reconeguts. L'ús d'atributs HTML ja s'ha mostrat en els exemples anteriors, on hem assignat l'element {| l'atribut class="wikitable" , que dóna a la taula un aspecte gràfic estàndard. De fet, si aquest atribut s’ometés, l’escriptura és així

 {|
| + Títol de la taula
! Capçalera 1 !! Capçalera 2 !! Capçalera 3
| -
| Fila 2, cel·la 1 || Fila 2, cel·la 2 || Fila 2, cel·la 3
|}

el resultat seria aquest:

Títol de la taula
Capçalera 1 Capçalera 2 Capçalera 3
Fila 2, cel·la 1 Fila 2, cel·la 2 Fila 2, cel·la 3

Es pot veure que ara la taula és transparent i sense fronteres.

Assigneu un atribut a un element

En el cas de {| i |- , s'afegeix un atribut simplement escrivint-lo a la dreta d'aquests símbols:

 {| attribute = " valor "

| - attribute = " value "

Amb |+ ! , !! , | i || en lloc d'això, cal separar els atributs del text de la cel·la afegint-hi un | :

 | + atribut = " valor " | Títol de la taula

! atribut = " valor " | Cel·la de capçalera !! atribut = " valor " | Cel·la de capçalera

| atribut = " valor " | Text de la cel·la || atribut = " valor " | Text de la cel·la

A cada element també se li poden assignar més atributs separant-los amb un espai:

 | atribut1 = "valor1" atributo2 = "valor2" | Text de la cel·la

L'atribut més utilitzat és style , la sintaxi de la qual és lleugerament diferent de la mostrada fins ara: style=" proprietà : valore ;" , on la proprietà i el valore s'han de substituir per noms vàlids i reconeguts. Per exemple, una propietat que s’utilitza sovint és el color , que s’utilitza per establir el color del text, i un valor adequat podria ser el red ; per tant, si a una cel·la se li assigna l'atribut style="color:red;" , el text dins d'aquesta cel·la serà vermell. També podeu utilitzar diverses propietats alhora escrivint style=" prop1 : valore1 ; prop2 : valore2 ;" etcètera. Per exemple, si a més del text vermell també volem un fons groc, escriuríem style="color:red; background-color:yellow;" .

Els exemples següents mostren les propietats més utilitzades en la construcció de taules; per obtenir llistes completes, consulteu Propietats CSS2 o Referència CSS .

Canvieu el color del text i el fons d'una cel·la

Per canviar el color del text, utilitzeu style="color: colore ;" , mentre que amb style="background-color: colore ;" definiu el color de fons. Hi ha nombrosos valors que poden prendre el colore : consulteu la pàgina d’ajuda sobre els colors .

Exemple:

 {| class = "wikitable"
| + style = "color: vermell;" | Títol
! style = "color: verd;" | Capçalera 1 !! style = "color: blau;" | Capçalera 2 !! Capçalera 3
| -
| Cèl·lula 1 || style = "background-color: yellow;" | Cèl·lula 2 || Cèl·lula 3
| -
| Cèl·lula 4
| Cèl·lula 5
| style = "color: taronja; color de fons: negre;" | Cèl·lula 6
| - style = "background-color: cyan;"
| style = "color: blanc;" | Cèl·lula 7 || Cèl·lula 8 || Cèl·lula 9
|}

El resultat és:

Títol
Capçalera 1 Capçalera 2 Capçalera 3
Cèl·lula 1 Cèl·lula 2 Cèl·lula 3
Cèl·lula 4 Cèl·lula 5 Cèl·lula 6
Cèl·lula 7 Cèl·lula 8 Cèl·lula 9

Cèl·lules que abasten diverses files i / o columnes

Assignar a una cèl·lula (és a dir, els elements | , || , ! I !! ) atributs rowspan=" n " i / o colspan=" n " , que ocuparà un nombre de files i / o columnes igual a n (n és substituït per un enter: 2, 3, ...). Com que el nombre de columnes d'una taula ha de ser el mateix en totes les files, en utilitzar aquests atributs no s'han de definir algunes cel·les, tal com mostren els exemples següents:

 {| class = "wikitable"
! Fila 1, cel·la 1 !! Fila 1, cel·la 2 !! Fila 1, cel·la 3
| -
| colspan = "2" | Fila 2, cel·les 1 i 2 || Fila 2, cel·la 3
| -
| Fila 3, cel·la 1 || colspan = "2" | Fila 3, cel·les 2 i 3
| -
| colspan = "3" | Fila 4, cel·les 1, 2 i 3
|}

Aquesta taula té tres columnes, però a la segona i tercera fila només s'han definit dues cel·les, ja que una d'elles ocupa el lloc de dues columnes, mentre que a la quarta fila només s'ha definit una cel·la, ja que només ocupa el lloc de tres columnes :

Fila 1, cel·la 1 Fila 1, cel·la 2 Fila 1, cel·la 3
Fila 2, cel·les 1 i 2 Fila 2, cel·la 3
Fila 3, cel·la 1 Fila 3, cel·les 2 i 3
Fila 4, cel·les 1, 2 i 3
 {| class = "wikitable"
! Fila 1, cel·la 1 !! Fila 1, cel·la 2
| -
| Filespan = "2" | Línies 2 i 3, cel·la 1 || Fila 2, cel·la 2
| -
| Fila 3, cel·la 2
|}

Aquesta taula té dues columnes, però a la tercera fila només s'ha definit una cel·la, ja que el lloc de l'altra ja està ocupat per la cel·la superior:

Fila 1, cel·la 1 Fila 1, cel·la 2
Files 2 i 3, cel·la 1 Fila 2, cel·la 2
Fila 3, cel·la 2
 {| class = "wikitable"
! Fila 1, cel·la 1 !! Fila 1, cel·la 2
| -
| Filespan = "2" | Línies 2 i 3, cel·la 1 || Fila 2, cel·la 2
| -
| Fila 3, cel·la 2
|}

Exemples:

1A 2A 3A
1B 2B 3B
1C 2C 3C
1A 2A 3A
1B + 1C 2B 3B
2C 3C
1A 2A 3A
1B 2B + 2C 3B
1C 3C
1A 2A 3A
1B 2B 3B + 3C
1C 2C
 {| class = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| 2B
| 3B
| -
| 1C
| 2C
| 3C
|}

{| class = "wikitable"
! 1A !! 2A !! 3A
| -
| Filespan = "2" | 1B + 1C
| 2B
| 3B
| -
| 2C
| 3C
|}

{| class = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| Filespan = "2" | 2B + 2C
| 3B
| -
| 1C
| 3C
|}

{| class = "wikitable"
! 1A !! 2A !! 3A
| -
| 1B
| 2B
| Filespan = "2" | 3B + 3C
| -
| 1C
| 2C
|}

Els atributs d' colspan rowspan i de colspan també es poden utilitzar simultàniament a la mateixa cel·la:

 {| class = "wikitable"
! !! Fila 1, cel·la 2 !! Fila 1, cel·la 3 !! Fila 1, cel·la 4
| -
! Fila 2, cel·la 1
| colspan = "2" rowspan = "3" | Files 2, 3 i 4, cel·les 2 i 3 || Fila 2, cel·la 4
| -
! Fila 3, cel·la 1
| Fila 3, cel·la 4
| -
! Fila 4, cel·la 1
| Fila 4, cel·la 4
|}

El resultat és:

Fila 1, cel·la 2 Fila 1, cel·la 3 Fila 1, cel·la 4
Fila 2, cel·la 1 Files 2, 3 i 4, cel·les 2 i 3 Fila 2, cel·la 4
Fila 3, cel·la 1 Fila 3, cel·la 4
Fila 4, cel·la 1 Fila 4, cel·la 4

Alineeu el text d'una taula

Per defecte, el títol de la taula i el text de la cel·la de capçalera estan alineats al centre, mentre que el text normal de la cel·la està alineat a l'esquerra. Per alinear el text d'una cel·la de manera diferent, se li ha d'assignar l'atribut style="text-align: pos ;" , on es pos substituir per left , center , right o justify per situar el text respectivament a l'esquerra, al centre, a la dreta de la cel·la o per justificar-lo.

Exemple:

 {| class = "wikitable" style = "width: 100%;"
| + style = "text-align: left;" | Títol esquerre
! style = "text-align: left;" | Text a l'esquerra !! Text al centre (per defecte) !! style = "text-align: right;" | Text a la dreta
| -
| Text esquerre (per defecte) || style = "text-align: center;" | Text central || style = "text-align: right;" | Text a la dreta
|}

El resultat és (nota: l’atribut style="width:100%;" s'ha assignat a la taula en aquest exemple perquè ocupi tota l'amplada disponible, amb l'únic propòsit de fer més evident l'alineació del text):

Títol esquerre
Text a l'esquerra Text central (predeterminat) Text a la dreta
Text esquerre (predeterminat) Text al centre Text a la dreta

El text d'una cel·la també està centrat verticalment; si voleu que el text comenci des de la part superior, afegiu l' style="vertical-align:top;" :

 {| class = "wikitable"
| Una cel·la amb <br /> algun text escrit <br /> en moltes línies.
| Cel·la amb poc text.
| style = "vertical-align: top;" | Cel·la amb poc text.
|}
Una cel·la
amb del
text escrit
en molts
línies.
Cel·la amb poc text. Cel·la amb poc text.

Penseu en una taula en què algunes cel·les contenen molt text i les altres només poques paraules: les cel·les més grans ocupen la major part de l'espai, deixant poc per a les altres; Com a resultat, el text d’aquestes cel·les tendeix a ajustar-se, cosa que de vegades és un efecte no desitjat (si no es veu bé a l’exemple següent, només cal reduir l’amplada de la finestra del navegador):

 {| class = "wikitable"
| Cel·la amb poc text.
| Cel·la amb poc text.
| Cel·la amb molt de text: '' [[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
| -
| Cel·la amb una mica més de text.
| Cel·la amb una mica més de text.
| Cel·la amb molt de text: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
|}
Cel·la amb poc text. Cel·la amb poc text. Cel·la amb molt de text: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú .
Cel·la amb una mica més de text. Cel·la amb una mica més de text. Cel·la amb molt de text: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, així com a qualsevol altre producte que es cometi .

Si voleu evitar l' style="white-space:nowrap;" text en una cel·la, afegiu l' style="white-space:nowrap;" ; si aquest atribut s’assigna a la cel·la més gran d’una columna, l’efecte s’estén a totes les cel·les d’aquesta columna. A l'exemple següent podeu veure que a la primera columna el text no s'ajusta a cap cel·la perquè l'atribut s'ha assignat a la cel·la que conté més text, mentre que a la segona columna el text de la cel·la següent continua embolicant-se (de nou , pot ser útil observar el comportament del text a mesura que canvia l'amplada de la finestra del navegador):

 {| class = "wikitable"
| Cel·la amb poc text.
| style = "white-space: nowrap;" | Cel·la amb poc text.
| Cel·la amb molt de text: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
| -
| style = "white-space: nowrap;" | Cel·la amb una mica més de text.
| Cel·la amb una mica més de text.
| Cel·la amb molt de text: '' lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis elicipit laboriosam, nisi ut aliquid ex ea commodi consequatur ''.
|}
Cel·la amb poc text. Cel·la amb poc text. Cel·la amb molt de text: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú .
Cel·la amb una mica més de text. Cel·la amb una mica més de text. Cel·la amb molt de text: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú .

Ajusteu el flux de text al voltant d'una taula

Normalment, el text fora d’una taula (els paràgrafs normals de l’entrada) s’ordena a sobre i a sota (la línia buida abans i després de la taula no és necessària, però deixa el codi més clar):

 Text a sobre de la taula.

{| class = "wikitable"
| Cèl·lula 1 || Cèl·lula 2
| -
| Cèl·lula 3 || Cèl·lula 4
|}

Text a sota de la taula.

Text a sobre de la taula.

Cèl·lula 1 Cèl·lula 2
Cèl·lula 3 Cèl·lula 4

Text a sota de la taula.

No obstant això, el text extern es pot disposar al costat de la taula assignant-li (a {| ) l'atribut class="wikitable floatleft" o class="wikitable floatright" . En el primer cas, la taula es disposa a l’esquerra de la pàgina i el text a la seva dreta; viceversa, en el segon cas, la taula es disposa a la dreta i el text a l'esquerra. El text adjacent és el que es troba sota la taula al wikitext (és a dir, després de |} ); el text anterior a la taula (és a dir, {| ) es manté a sobre. Un cop superada la taula, el text tornarà a ocupar tota l'amplada de la pàgina.

Exemple:

 Text que precedeix la taula (apareix a sobre).

{| class = "dret flotable wikitable"
| Cèl·lula 1 || Cèl·lula 2 || Cèl·lula
| -
| Cèl·lula 3 || Cèl·lula 4 || Cèl·lula
|}

El text escrit a partir d’aquí apareix al costat de la taula. Per veure l’efecte és necessari escriure una frase llarga per ocupar algunes línies: '' [[lorem ipsum]] dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, are in culpa qui officia deserunt mollit anim id est laborum ''. Tot el text anterior apareix a sobre de la taula següent:

{| class = "esquerra flotable wikitable"
| Cèl·lula 1 || Cèl·lula 2 || Cèl·lula
| -
| Cèl·lula 3 || Cèl·lula 4 || Cèl·lula
|}

mentre que el text escrit a partir d’aquí apareix al costat de la taula. Per veure l’efecte és necessari escriure una frase llarga per ocupar algunes línies: «lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, are in culpa qui officia deserunt mollit anim id est laborum ''.

El resultat és:

Text que precedeix la taula (apareix a sobre).
Cèl·lula 1 Cèl·lula 2 Cèl·lula
Cèl·lula 3 Cèl·lula 4 Cèl·lula
El text escrit a partir d’aquí apareix al costat de la taula. Per veure l’efecte és necessari escriure una frase llarga per ocupar algunes línies: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, are in culpa qui officia deserunt mollit anim id est laborum . Tot el text anterior apareix a sobre de la taula següent:
Cèl·lula 1 Cèl·lula 2 Cèl·lula
Cèl·lula 3 Cèl·lula 4 Cèl·lula
mentre que el text escrit a partir d’aquí apareix al costat de la taula. Per veure l’efecte és necessari escriure una frase llarga per ocupar algunes línies: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, are in culpa qui officia deserunt mollit anim id est laborum .

Nota: Una forma alternativa de posicionar una taula és assignar-la a {| the style="float: pos ;" , on s'ha de substituir pos per left o right . El problema és que amb aquest atribut no hi ha un marge adequat entre el text i la taula. Repetint l'exemple anterior, el resultat és aquest:

Text que precedeix la taula (apareix a sobre).
Cèl·lula 1 Cèl·lula 2 Cèl·lula
Cèl·lula 3 Cèl·lula 4 Cèl·lula
El text escrit a partir d’aquí apareix al costat de la taula. Per veure l’efecte és necessari escriure una frase llarga per ocupar algunes línies: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, are in culpa qui officia deserunt mollit anim id est laborum . Tot el text anterior apareix a sobre de la taula següent:
Cèl·lula 1 Cèl·lula 2 Cèl·lula
Cèl·lula 3 Cèl·lula 4 Cèl·lula
mentre que el text escrit a partir d’aquí apareix al costat de la taula. Per veure l’efecte és necessari escriure una frase llarga per ocupar algunes línies: lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et pain magna aliqua. Utilitzeu un mínim de venim, que és el nostre exercici físic i corporal per a participar en laboriosam, per tant, es pot obtenir un aliquid ex comú. Quis aute iure reprehenderit in voluptate velit esse cillum pain eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, are in culpa qui officia deserunt mollit anim id est laborum .

Taula al centre de la pàgina

Per centrar una taula a la pàgina, cal assignar-li l'atribut style="margin-left:auto; margin-right:auto;" . En referència a l'explicat a la secció anterior, tingueu en compte que no és possible desplaçar el text cap a l'esquerra i la dreta d'una taula centrada:

 Text abans de la taula (apareix a sobre).

{| class = "wikitable" style = "margin-left: auto; margin-right: auto;"
! Columna 1 !! Columna 2
| -
| Fila 1, cel·la 1 || Fila 1, cel·la 2
| -
| Fila 2, cel·la 1 || Fila 2, cel·la 2
|}

Text després de la taula (apareix a sota).

Text abans de la taula (apareix a sobre).

Columna 1 Columna 2
Fila 1, cel·la 1 Fila 1, cel·la 2
Fila 2, cel·la 1 Fila 2, cel·la 2

Text després de la taula (apareix a sota).

Taules ordenables

En afegir la instrucció class="wikitable sortable" a la part superior de la taula, obtindreu una taula les columnes de les quals es poden ordenar en ordre ascendent o descendent fent clic als botons que apareixen.

 {| class = "wikitable sortable"
! títol !! columna1 !! columna2 
| -
| línia1 || Florència || 4
| -
| línia2 || Empoli || 4
| -
| línia3 || Domodossola || 1  
| -
| línia4 || Como || 3  
| -
| línia5 || Bolonya || 2  
| -
| línia6 || Ancona || 5  
|}
títol columna1 columna2
fila1 Florència 4
fila2 Empoli 4
fila3 Domodossola 1
fila4 Como 3
fila 5 Bolonya 2
fila 6 Ancona 5

Si feu clic a dues o més columnes, la darrera que feu clic s’estableix com a clau d’ordenació principal i les anteriors com a secundària. A l'exemple, fent clic a la columna1 i després a la columna2, s'obté una classificació per columna2, però les files on això és constant (les dues files amb el valor "4") es mantenen ordenades per columna1.
Si, en canvi, mantens premut ⇧ Feu majúscules mentre feu clic, la columna feta clic es defineix com a clau d'ordenació secundària, mantenint l'ordenació primària anterior.

L’ordenació es fa mitjançant JavaScript del client, de manera que només funciona si el reproductor utilitza un navegador amb JavaScript activat.

Columnes que no es poden ordenar

Si voleu que una o més columnes de la taula siguin class="unsortable" | titolo della colonna afegiu class="unsortable" | titolo della colonna de la class="unsortable" | titolo della colonna a la fila on s’escriuen els títols.

 {| class = "wikitable sortable"
! títol !! columna1 !! columna2 !! class = "insortable" | sense ordre
| -
| línia1 || Como || 2 || columna
| -
| línia2 || Bolonya || 1 || No 
| -
| línia3 || Ancona || 3 || ordenable
|}
títol columna1 columna2 sense ordre
fila1 Como 2 columna
fila2 Bolonya 1 No
fila3 Ancona 3 ordenable

Files no ordenables

Podeu fer que una fila sigui desordenable, com ara una última fila que contingui totals, que ha de romandre estacionària. Totes les línies configurades com a capçalera (amb "!") I col·locades primer o darrer sempre són immòbils. Com a alternativa, es manté una fila, fins i tot sense capçalera, a la part inferior si té l'atribut class="sortbottom" (si la fila no es troba a la part inferior, hi anirà tan bon punt l'usuari ordeni la taula).

Es poden forçar dues línies consecutives a mantenir-se juntes durant l'ordenació assignant a la segona l'atribut class="expand-child" . D'aquesta manera, la primera fila s'ordenarà normalment i la segona la seguirà.

 {| class = "wikitable sortable"
! títol 1
| -
! títol 2
| -
| Bolonya
| -
| Ancona
| - class = "expand-child"
| segona línia d'Ancona
| -
| Como
| - class = "sortbottom"
| peu 1
| -
! peu 2
|}
títol 1
títol 2
Bolonya
Ancona
segona línia d'Ancona
Como
peu 1
peu 2

Tipus de dades

El sistema d’ordenació reconeix automàticament el tipus de dades de cada columna i aplica una lògica d’ordenació diferent, basada en el contingut del primer quadre no buit després de la capçalera. Les marques i els espais principals s’ignoren. Els tipus identificats automàticament són:

  • date : possono essere in vari formati come "gg-mm-aaaa", "gg-mm-aa", e "gg mese aaaa", oppure con altri separatori come "/" e "." (sconsigliati, vedi qui ). Non funziona però il simbolo "1º" per il primo del mese, va impostato "1" (vedi capitolo successivo). Non funzionano inoltre le date precedenti al 100 dC
  • valute : riconosciute se iniziano per €, $, £, o ¥; l'ordine è numerico, ignorando i suddetti simboli e altri caratteri alfabetici.
  • numeri : possono essere formati da cifre, virgole, separatori di migliaia, +/- ed E/e (per la notazione scientifica ). Per ottenere il corretto separatore delle migliaia, che su it.wiki è uno spazio speciale, usare formatnum .
  • testo : in tutti gli altri casi l'ordine è semplicemente alfabetico, come indicato in Aiuto:Ordine alfabetico ; le lettere vengono considerate tutte come minuscole.
Numero Testo Data Valuta
1 345 EEE 02-02-2004 € 5,00
22 ddd 13.apr.2005 € 30
-3 CCC 17 agosto 2006 € 6,50
0,44 bbb 1/Gen/2005 € 14,20
0,44E+8 AAA 05/12/2006 € 7,15

Se il riconoscimento automatico non bastasse, il tipo di dato di ogni colonna si può anche indicare esplicitamente. All'intestazione della colonna si può aggiungere il parametro data-sort-type="..." con uno dei seguenti valori:

  • text (testo)
  • number (numeri)
  • date (date)
  • time (orari, con ":" come separatore tra ore minuti e secondi opzionali)
  • isoDate (date in formato ISO, ovvero aaaa-mm-gg)
  • currency (valute)
  • IPAddress (indirizzi IP)
  • url (indirizzi URL)

Ad esempio:

 {| class="wikitable sortable"
! data-sort-type="date" | Data
! data-sort-type="time" | Ora
...

Come impostare manualmente l'ordine

Laddove necessario, si può impostare manualmente l'ordine voluto (ciò è particolarmente utile con le colonne che contengono nomi e cognomi di persone, che verrebbero ordinate seguendo l'ordine alfabetico dei nomi e non dei cognomi). Per impostare una chiave di ordinamento diversa dal contenuto visibile, a ciascuna casella si può aggiungere il parametro data-sort-value="..." in questo modo:

 {| class="wikitable sortable"
! Nome
|-
| data-sort-value="Rossi Mario" | Mario Rossi
|-
| data-sort-value="Bianchi Lucia" | Lucia Bianchi
|-
| data-sort-value="Verdi Anna" | Anna Verdi
|}
Nome
Mario Rossi
Lucia Bianchi
Anna Verdi

Un altro metodo, sconsigliato ma ancora molto usato perché in passato era l'unico, è inserire del testo invisibile direttamente nella casella, in questo modo:

 | <span style="display:none">Rossi Mario</span> Mario Rossi

Venivano usati anche alcuni template appositi (vedi Template:Sort ei template ad esso correlati) oggi obsoleti, la cui funzione era quella di ordinare le colonne ordinabili incapsulando questa tecnica, senza utilizzare direttamente l'HTML.

Raccomandazioni

Nell'inserire immagini e tabelle , tieni conto sia della resa grafica (pensa ai tanti utenti che usano basse risoluzioni video), sia del peso complessivo della pagina (molti utenti hanno infatti sistemi non recentissimi e possono usare connessioni lente).
Prova a vedere come appare la pagina anche a bassa risoluzione (ad esempio 800x600 o 1024x768) e non eccedere col peso delle immagini; non impostare le dimensioni delle immagini di tipo thumb se non è strettamente necessario: lascia che abbiano la larghezza di default scelta dall'utente .
Verifica poi che la pagina non debba essere scorsa orizzontalmente o che parti di essa non si sovrappongano.
Inoltre, assicurati che il contenuto sia sempre accessibile anche quando le immagini non possono essere visualizzate .
Globo di lettere

Corrispondenza tra wikitesto e codice HTML

Per chi conosce il linguaggio HTML , può essere utile fare un confronto tra il wikitesto usato su Wikipedia per la creazione delle tabelle e il relativo codice HTML.

Una tabella è definita da

 {| attributi

|}

che in HTML corrisponde a

 <table attributi >

</table>

Il titolo della tabella, più eventuali attributi, si ottiene con |+ attributi |Titolo che corrisponde a <caption attributi >Titolo</caption> .

Per definire una riga della tabella, insieme agli eventuali attributi, si usa |- attributi , equivalente a <tr attributi > . Il tag si chiude automaticamente all'inizio di una nuova riga o alla chiusura della tabella.

Le celle d'intestazione, compresi gli eventuali attributi, si ottengono scrivendo

 ! Header 1
! attributi | Header 2
! Header 3

oppure

 ! Header 1 !! attributi | Header 2 !! Header 3

Entrambi le forme equivalgono a

 <th>Header 1</th>
<th attributi >Header 2</th>
<th>Header 3</th>

In modo simile, le celle di una riga, con gli eventuali attributi, si definiscono tramite i comandi

 | Cella 1
| attributi | Cella 2
| Cella 3

o equivalentemente così:

 | Cella 1 || attributi | Cella 2 || Cella 3

Entrambi i casi corrispondono in HTML a

 <td>Cella 1</td>
<td attributi >Cella 2</td>
<td>Cella 3</td>

Di seguito si riporta un esempio riassuntivo:

 {| class="wikitable"
|+ style="color:red;" | Titolo
! Header 1 !! Header 2 !! style="color:green;" | Header 3
|-
| Cella 1 || style="color:blue;" | Cella 2 || Cella 3
|- style="background-color:yellow;"
| style="color:orange;" | Cella 4
| Cella 5
| Cella 6
|}

Il risultato è:

Titolo
Header 1 Header 2 Header 3
Cella 1 Cella 2 Cella 3
Cella 4 Cella 5 Cella 6

e corrisponde in HTML a:

 <table class="wikitable">
  <caption style="color:red;">Titolo</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th style="color:green;">Header 3</th>
  </tr>
  <tr>
    <td>Cella 1</td>
    <td style="color:blue;">Cella 2</td>
    <td>Cella 3</td>
  </tr>
  <tr style="background-color:yellow;">
    <td style="color:orange;">Cella 4</td>
    <td>Cella 5</td>
    <td>Cella 6</td>
  </tr>
</table>

Tecniche avanzate

Vedi Aiuto:Tabelle/Avanzate per utilizzi molto particolari: tabelle annidate, tabelle non rettangolari, grafici.

Pagine correlate