Ajuda:Taula

De Viquipèdia
Dreceres ràpides: navegació, cerca

Utilitzant la barra de botons[modifica | modifica el codi]

Per inserir automàticament una taula, feu clic a Vector toolbar insert table button.png o Button insert table.png en la barra de botons d'edició.

S'afegeix el següent text en clicar Taula:

{| class="wikitable" border="1"
|+ títol
! capçalera !! capçalera
|-
| cel·la || cel·la
|-
| cel·la || cel·la
|}

Aquest codi produirà la següent taula:

títol
capçalera capçalera
cel·la cel·la
cel·la cel·la

El text de la mostra ("capçalera" o "cel·la") està destinat a ser reemplaçat amb dades reals.

Sintaxi[modifica | modifica el codi]

Així els elements de sintaxi (amb sintaxi wiki) emprats són els següents:

-- llegenda
{| inici de taula
|} fi de taula
|+ títol de la taula
|- separador de files
!  inici de ceŀla estil negreta, o bé final atributs
!! nova ceŀla amb negreta
|  inici de ceŀla estil normal, o bé final atributs
|| nova ceŀla estil normal

Posicionament de la taula[modifica | modifica el codi]

La taula, per defecte està alineada a l'esquerra.

Taula flotant[modifica | modifica el codi]

En aquest cas el text envolta a dreta (floatright) o esquerra (floatleft), segons el cas, la taula.

Aquest paràgraf està abans de les taules. Es mostren dos taules una a la dreta i l'altra a l'esquerra.
S'ha utilitzat la plantilla {{tl|lorem}} per farcir de text l'espai entre les taules.
{| class="wikitable floatright"
|+ Taula a la dreta
| Col 1, fila 1
| Col 2, fila 1
|-
| Col 1, fila 2
| Col 2, fila 2
|}
{| class="wikitable floatleft"
|+ Taula a l'esquerra
| Col 1, fila 1
| Col 2, fila 1
|-
| Col 1, fila 2
| Col 2, fila 2
|}
{{lorem}}

Visualització:

Aquest paràgraf està abans de les taules. Es mostren dos taules una a la dreta i l'altra a l'esquerra. S'ha utilitzat la plantilla {{lorem}} per farcir de text l'espai entre les taules.

Taula a la dreta
Col 1, fila 1 Col 2, fila 1
Col 1, fila 2 Col 2, fila 2
Taula a l'esquerra
Col 1, fila 1 Col 2, fila 1
Col 1, fila 2 Col 2, fila 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Observeu que si utilitzem align="right" o align="left", el text arriba a "tocar" la taula, ja que no deixa un marge al voltant de la taula:

Aquest paràgraf està abans de les taules. Es mostren dos taules una a la dreta i l'altra a l'esquerra.
{| class="wikitable" align="right"
|+ Taula a la dreta
| Col 1, fila 1
| Col 2, fila 1
|-
| Col 1, fila 2
| Col 2, fila 2
|}
{| class="wikitable" align="left"
|+ Taula a l'esquerra
| Col 1, fila 1
| Col 2, fila 1
|-
| Col 1, fila 2
| Col 2, fila 2
|}
{{lorem}}

Visualització:

Aquest paràgraf està abans de les taules. Es mostren dos taules una a la dreta i l'altra a l'esquerra.

Taula a la dreta
Col 1, fila 1 Col 2, fila 1
Col 1, fila 2 Col 2, fila 2
Taula a l'esquerra
Col 1, fila 1 Col 2, fila 1
Col 1, fila 2 Col 2, fila 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Taula centrada[modifica | modifica el codi]

Una taula centrada no pot ser alhora flotant, és a dir: no hi ha text apareixerà a cada costat. Hi ha dos formes equivalents:

align="center"[modifica | modifica el codi]

Text abans de la taula...
{| class="wikitable" align="center"
|+ '''Cel·les alineades a l'esquerra, taula centrada'''
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor  || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text després de la taula

Visualització:

Text abans de la taula...

Cel·les alineades a l'esquerra, taula centrada
Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.

...text després de la taula

style="margin:auto"[modifica | modifica el codi]

Text abans de la taula...
{| class="wikitable" style="margin:auto"
|+ '''Cel·les alineades a l'esquerra, taula centrada'''
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor  || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
...text després de la taula

Visualització:

Text abans de la taula...

Cel·les alineades a l'esquerra, taula centrada
Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.

...text després de la taula

Posicionament del contingut de les cel·les[modifica | modifica el codi]

Per defecte el contingut de les cel·les queda:

  • verticalment: centrat
  • horitzontalment: arrenglerat a l'esquerra fora del títol i les capçaleres que queden centrats.

Però es pot modificar aquestes posicions amb diferents paràmetres:

  • verticalment: valign="top", valign="center", valign="bottom"
  • horitzontalment: align="right", align="center", align="left"

Individualment per cel·la[modifica | modifica el codi]

{| class="wikitable"
|+ títol
! capçalera !! capçalera !! capçalera
|-
| cel·la<br>cel·la || valign="top" | cel·la || align="right" valign="bottom" | 1200
|-
| valign="top" | cel·la || cel·la<br>cel·la  || align="right" valign="bottom" | 12
|}

Visualització:

títol
capçalera capçalera capçalera
cel·la
cel·la
cel·la 1200
cel·la cel·la
cel·la
12

Nota important: generalment les dades numèriques queden millor arrenglerades a la dreta, llavors (envers d'utilitzar align="right") és millor utilitzar la plantilla {{ntr}}.

Per les cel·les d'una fila[modifica | modifica el codi]

{| class="wikitable"
|+ títol
! capçalera !! capçalera !! capçalera
|- valign="top"
| cel·la<br>cel·la || cel·la  || cel·la
|- valign="bottom"
| cel·la || cel·la<br>cel·la  || cel·la
|- align="right"
| cel·la || align="center" | cel·la  || cel·la
|}

Visualització:

títol
capçalera capçalera capçalera
cel·la
cel·la
cel·la cel·la
cel·la cel·la
cel·la
cel·la
cel·la cel·la cel·la

Vores de la taula[modifica | modifica el codi]

Per canviar la vora de la taula cal prescindir del paràmetre class="wikitable" i incloure border="n" on n és el gruix. Per excloure les vores llavors cal excloure el paràmetre del border.

Exemples[modifica | modifica el codi]

Amb una vora més ampla:

{| border="1"
|-
| Cel·la 1
|-
| Cel·la 2
|}

Visualització:

Cel·la 1
Cel·la 2


Sense vores:

{|
| Aa || B
|-
| C || D
|}

Visualització:

Aa B
C D

Acoloriment de les cel·les[modifica | modifica el codi]

Personalitzat[modifica | modifica el codi]

Cal assignar amb un número o un nom (mireu a Llista de colors HTML els noms de colors VGA i X11 per a utilitzar) el color destinat a la font (color) o al fons (background).

Observeu que en aquest exemple s'assigna uns colors per defecte a la taula, a la fila del mig (on s'ha utilitzat un número envers d0un nom) i després a algunes de les cel·les:

{| class="wikitable" style="background: yellow; color: BlueViolet"
|-
| stu || style="background: silver" | vwx || yz
|- style="background: #FF0000; color: white"
| stu || style="background: silver" | vwx || yz
|-
| stu || style="background: silver" | vwx || yz
|}

Visualització:

stu vwx yz
stu vwx yz
stu vwx yz

Amb plantilles predissenyades[modifica | modifica el codi]

Les cel·les es poden acolorir amb plantilles ja existents {{cel·la sí}} / {{cel·la no}} / {{cel·la ?}} / {{cel·la parcial}}

{| class="wikitable"
! elems !! atribut 1 !! atribut 2
|-
| elem1 || {{cel·la sí}} || {{cel·la no}}
|-
| elem2 || {{cel·la parcial | explicació parcialitat}} || {{cel·la ?}}
|}

Visualització:

elems atribut 1 atribut 2
elem1 No
elem2 explicació parcialitat ???

Combinació de cel·les[modifica | modifica el codi]

Per fer-ho s'utilitzen: colspan i rowspan.

{| class="wikitable"
|-
| Columna 1 || Columna 2 || Columna 3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C <!-- columna 1 ocupada per cel·la A -->
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" |F
|-
| G <!-- columna 2+3 ocupada per cel·la F -->
|-
| colspan="3" style="text-align: center;" | H
|}

Visualització:

Columna 1 Columna 2 Columna 3
A B
C D
E F
G
H

Taules amagables[modifica | modifica el codi]

Sintaxi[modifica | modifica el codi]

Cal escriure a class="wikitable collapsible estat" , on estat pot prendre els valors "collapsed", "autocollapse", buit

Exemples[modifica | modifica el codi]

{| class="wikitable collapsible collapsed"
! elems !! atribut 1 !! atribut 2
|-
| elem1 || {{cel·la sí}} || {{cel·la no}}
|-
| elem2 || {{cel·la parcial | explicació parcialitat}} || {{cel·la ?}}
|}

Visualització:


{| class="wikitable collapsible"
! elems !! atribut 1 !! atribut 2
|-
| elem1 || {{cel·la sí}} || {{cel·la no}}
|-
| elem2 || {{cel·la parcial | explicació parcialitat}} || {{cel·la ?}}
|}

Visualització:

elems atribut 1 atribut 2
elem1 No
elem2 explicació parcialitat ???

Alineació dels números[modifica | modifica el codi]

Sense o amb igual nombre de decimals[modifica | modifica el codi]

Per fer-ho el millor és utilitzar la plantilla {{ntr}}, que a més posa el punt dels milers.

{|class="wikitable sortable"
|+Una taula ordenable
!Alineament a la dreta
|-
| {{ntr|7917.231}} km<sup>-2</sup>
|-
| {{ntr|36387.065}} km<sup>-2</sup>
|-
| {{ntr|6405.591}} km<sup>-2</sup>
|}

Visualització:

Una taula ordenable
Alineament a la dreta
&00000000000079172309997.917,231 km-2
&000000000003638706500036.387,065 km-2
&00000000000064055910006.405,591 km-2

Amb diferent nombre de decimals[modifica | modifica el codi]

{| class="wikitable"
|
{| cellpadding="0" cellspacing="0" width="60"
| align="right" width="50%"| 432 || width="50%" | .1
|}
|-
|
{| cellpadding="0" cellspacing="0" width="60"
| align="right" width="50%"| 43 || width="50%" | .21
|}
|-
|
{| cellpadding="0" cellspacing="0" width="60"
| align="right" width="50%" | 4 || width="50%" | .321
|}
|}

Visualització:

432 .1
43 .21
4 .321


I amb altres columnes:

{| class="wikitable"
! Element
! Número
|-
| Primer
|
{| cellpadding="0" cellspacing="0" width="60"
| align="right" width="50%"| 432 || width="50%" | .1
|}
|-
| Segon
|
{| cellpadding="0" cellspacing="0" width="60"
| align="right" width="50%"| 43 || width="50%" | .21
|}
|-
| Tercer
|
{| cellpadding="0" cellspacing="0" width="60"
| align="right" width="50%" | 4 || width="50%" | .321
|}
|}

Visualització:

Element Número
Primer
432 .1
Segon
43 .21
Tercer
4 .321

Taules amb ordenació[modifica | modifica el codi]

Es poden crear taules amb ordenació de les files segons el contingut de les columnes.

{| class="wikitable sortable" border="1"
|+ Taula ordenable
|-
! scope="col" | Alfabètic
! scope="col" | Numèric
! scope="col" | Numèric ntr
! scope="col" | Data
! scope="col" class="unsortable" | No ordenable
|-
| d || 20 || {{ntr|1200}} || 2008-11-24 || Aquesta
|-
| b || 8 || {{ntr|8}} || 2004-03-01 || columna
|-
| a || 6 || {{ntr|66}} || 1979-07-23 || no pot
|-
| c || 4 || {{ntr|14000}} || 1492-12-08 || ser
|-
| e || 0 || {{ntr|0}} || 1601-08-13 || ordenada.
|}

Apareix així:

Taula ordenable
Alfabètic Numèric Numèric ntr Data No ordenable
d 20 &00000000000012000000001.200 2008-11-24 Aquesta
b 8 &00000000000000080000008 2004-03-01 columna
a 6 &000000000000006600000066 1979-07-23 no pot
c 4 &000000000001400000000014.000 1492-12-08 ser
e 0 &00000000000000000000000 1601-08-13 ordenada.

Important: Observeu en aquest exemple s'ha utilitzat en la tercera columna la plantilla {{ntr}}, que no és necessària però dóna un millor aspecte.

Excloent l'última fila de la classificació[modifica | modifica el codi]

De vegades és útil per excloure l'última fila d'una taula a partir del procés de classificació.

Això es pot aconseguir mitjançant la declaració de l'última fila com un peu de pàgina

Sintaxi wiki

{|class="wikitable sortable"
!Nom!!Cognom!!Talla
|-
|John||Smith||1.85
|-
|Ron||Ray||1.89
|-
|Mario||Bianchi||1.72
|-
! !!Average:||1.82
|}

Apareix així:

Nom Cognom Talla
John Smith 1.85
Ron Ray 1.89
Mario Bianchi 1.72
Promig: 1.82

Amb un ordre alternatiu[modifica | modifica el codi]

S'utilitza el data-sort-value="valor", on valor és el criteri d'ordenació a utilitzar.

{|class="wikitable sortable"
!Nom i cognom!!Talla
|-
|data-sort-value="Smith, John"|John Smith||1.85
|-
|data-sort-value="Ray, Ian"|Ian Ray||1.89
|-
|data-sort-value="Bianchi, Zachary"|Zachary Bianchi||1.72
|-
!Promig:||1.82
|}

Apareix així:

Nom i cognom Talla
John Smith 1.85
Ian Ray 1.89
Zachary Bianchi 1.72
Promig: 1.82

Utilitzant una plantilla[modifica | modifica el codi]

El un exemple semblant a l'anterior i utilitzant la plantilla {{ordre}}:

{|class="wikitable sortable"
!Nom i cognom!!Temps
|-
|{{ordre|Smith, John|John Smith}}||{{ordre|45|45 segons}}
|-
|{{ordre|Ray, Ian|Ian Ray}}||{{ordre|90|1 minut i mig}}
|-
|{{ordre|Bianchi, Zachary|Zachary Bianchi}}||{{ordre|64|1:04 minuts}}
|}

Apareix així:

Nom i cognom Temps
John Smith 45 segons
Ian Ray 1 minut i mig
Zachary Bianchi 1:04 minuts

Taules amb un seguit d'imatges[modifica | modifica el codi]

L'auto-centrat de les imates dins de les cel·les simplement requereix l'ús de ("<center>[[Fitxer:..]]</center>").

{| class="wikitable"
|-
|<!--Col1-->[[Fitxer:Domtoren vanaf Brigittenstraat.jpg|299x125px]]
|<!--Col2--><center>[[Fitxer:Utrecht 003.jpg|299x125px]]</center>
|<!--Col3--> [[Fitxer:Uitzicht vanaf de Domtoren.jpg|299x125px]] 
|-
|<!--Col1-->Torre principal de Brigittenstraat
|<!--Col2-->Claustre de l'església principal d'Utrecht
|<!--Col3--><center><small>Vista des del campanar</small></center>
|}

Visualització:

Domtoren vanaf Brigittenstraat.jpg
Utrecht 003.jpg
 Uitzicht vanaf de Domtoren.jpg 
Torre principal de Brigittenstraat Claustre de l'església principal d'Utrecht
Vista des del campanar

Recordeu que també es pot utilitzar <gallery>:

<gallery>
Fitxer:Domtoren vanaf Brigittenstraat.jpg|Torre principal de Brigittenstraat
Fitxer:Utrecht 003.jpg|Claustre de l'església principal d'Utrecht
Fitxer:Uitzicht vanaf de Domtoren.jpg|<small>Vista des del campanar</small>
</gallery>

Visualització:

Tipus de llenguatge permesos per construir taules[modifica | modifica el codi]

MediaWiki suporta tres formes d'escriure taules:

  • XHTML
  • HTML simplificat
  • Sintaxi Wiki

Llenguatge de marques[modifica | modifica el codi]

Comparació de sintaxis
  XHTML HTML simplificat Wiki
Taula <table></table> <table></table> {| paràmetres |}
Subtítol <caption></caption> <caption></caption> |+ subtítol
Fila <tr></tr> <tr> |- paràmetres
Cel·la

<td>c1</td>
<td>c2</td>

<td>c1
<td>c2

| c1

| c2

Cel·la <td>c1</td><td>c2</td> <td>c3</td> <td>c1 <td>c2 <td>c3 |c1||c2||c3
Capçalera <th></th> <th> ! capçalera
Exemple 1
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{| 
| 1 || 2 
|- 
| 3 || 4 
|- 
| 5 || 6 
|}
Exemple 2
Blanc i negre
Nom del color Codi
Negre #000000
Blanc #ffffff
<table class="wikitable">
   <caption>Blanc i negre</caption>
   <tr>
      <th>Nom del color</th>
      <th>Codi</th>
   </tr>
   <tr>
      <td>Negre</td>
      <td style="background: #000000; color:#FFFFFF" >#000000</td>
   </tr> 
   <tr>
      <td>Blanc</td>
      <td>#ffffff</td>
   </tr>
</table>
<table class="wikitable">
   <caption>Blanc i negre</caption>
   <tr>
      <th>Nom del color
      <th>Codi
   <tr>
      <td>Negre
      <td style="background: #000000; color:#FFFFFF" >#000000
   <tr>
      <td>Blanc
      <td>#ffffff
</table>
{| class="wikitable"
|+ '''Blanc i negre'''
! Nom del color !! Codi
|-
| Negre
| style="background: #000000; color:#FFFFFF" | #000000
|-
| Blanc
| #ffffff
|}
Pros
  • Es pot crear amb qualsevol editor XHTML
  • Es pot formatar per a fer-lo més llegible
  • Sintaxi coneguda
  • Es pot crear amb qualsevol editor HTML
  • Es pot formatar per a fer-lo més llegible
  • Sintaxi coneguda
  • Ocupa menys que l'XHTML
  • Fàcil escriptura
  • Ocupa el menor espai
Contres
  • Tediós
  • Ocupa molt espai
  • Confús, especialment per a gent amb experiència amb l'HTML
  • Mal delimitat
  • Sintaxi poc coneguda
  • Estructura rígida, no es pot sagnar
  XHTML HTML simplificat Wiki