Nota: Quan modifiqueu aquesta pàgina, esteu acceptant que la vostra contribució es publiqui en el marc de CC0. Mireu Pàgines d'ajuda de domini públic per a més informació.
Taules redirigeix aquí; per informació referent a l'estructura de les taules de la base de dades, vegeu Manual:Database layout.
Les taules poden ser creades en pàgines wiki.
Com a regla general, el millor és evitar l'ús d'una taula tret que realment es necessiti,
doncs la inclusió de taules complica l'edició de la pàgina.[1]
títol, opcional; només entre l'inici de la taula i la primera fila
|-
fila de la taula, opcional en la primera fila - el programari del wiki assumeix la primera fila
!
cel·la d'encapçalament de la taula, opcional. Les cel·les consecutives d'encapçalaments de la taula poden ser afegides en la mateixa línia separada per marques dobles (!!) o en en el mode d'una línia per cada cel·la, iniciant cadascuna solament amb la marca (!).
|
cel·la de dades de la taula, opcional. Les cel·les consecutives de dades de la taula poden ser afegides en la mateixa línia separada per marques dobles (||) o en en el mode d'una línia per cada cel·la, iniciant cadascuna solament amb la marca (|).
|}
final de la taula, requerit
Les marques anteriors han de començar en una nova línia excepte els dobles || i !! per opcionalment afegir cel·les consecutives en una mateixa línia. No obstant això, els espais en blanc a l'inici d'una línia s'ignoren.
Atributs HTML. Cada marca, excepte el final de la taula, opcionalment accepta un o més atributs HTML. Els atributs han de ser en la mateixa línia que la marca. Separeu els atributs amb un espai senzill.
Cel·les i títol (| o ||, ! o !!, i |+) pel contingut. Separeu qualsevol atribut del contingut amb una barra simple (|). El contingut de la cel·la pot seguir en la mateixa línia o en les línies següents.
Les marques de taula i fila ({| i |-) no poden contenir contingut directament. No afegiu la barra (|) després dels atributs opcionals. Si per error afegiu una barra després dels atributs per a una marca de taula o una marca de fila, l'analitzador l'eliminarà i l'atribut final, si n'hi ha, s'aplicarà a la barra incorrecta
El contingut pot (a) seguir a la seva pròpia marca de cel·la en la mateixa línia després de qualsevol atribut HTML opcional, o (b) en les línies sota de la marca de la cel·la. Un contingut que utilitzi codi wiki i que necessiti iniciar-se en una nova línia, com llistes, encapçalaments o taules aniuades, ha d'estar en la seva pròpia línia nova.
Caràcter de barra com a contingut. Per a inserir un caràcter de barra com a contingut en una taula (|), utilitzeu el format de marcatge d'escapament <nowiki>|</nowiki>.
Conceptes bàsics
La següent taula no té vores i ni un bon espaiat, però mostra l'estructura de taula en el format wiki més simple.
Les cel·les de la mateixa fila poden llistar-se en una línia separant-les amb || (dues barres verticals).
Si el text a la cel·la ha de contenir un salt de línia, pode utilitzar també <br/>.
Els espais extres entre cel·les en "codi wiki", com en el mostrat a sota, no afecta el disseny de la taula.
Si escriviu
Obteniu
{|
| Taronja || Poma || més
|-
| Pa || Pastís || més
|-
| Mantega || Gelat || I més
|}
Taronja
Poma
més
Pa
Pastís
més
Mantega
Gelat
I més
També podeu tenir textos més llargs o sintaxi wiki més complexa dins de les cel·les:
Si escriviu
Obteniu
{|
|Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat,
sed diam voluptua.
At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet.
Lorem ipsum dolor sit amet
consetetur sadipscing elitr
sed diam nonumy eirmod tempor invidunt
Encapçalaments d'una taula
Els encapçalaments de la taula poden ser creats utilitzant el símbol de exclamació "!" en comptes de la barra vertical "|".
Els encapçalaments normalment es mostren, per defecte, en negreta i centrats.
Un estil bàsic (fons gris clar, vores, espaiat entre cel·les i alineació a l'esquerra) es poden aconseguir afegint la classe wikitable (class="wikitable")
També podeu utilitzar atributs de cel·la quan estigueu posant diverses cel·les en una sola línia.
Cal observar que les cel·les se separen amb || i dins de cada cel·la els atributs i valors se separen amb |.
Si "border-width:" té més d'un número, els quatre números són per part superior, dreta, baix, esquerra (RECORDEU en el sentit de les agulles del rellotge en ↑→↓←):
Si escriviu
Obteniu
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
Hola
|}
Hola
Quan hi ha menys que 4 valors:
amb tres valors, per exemple, top, right, bottom: el valor per defecte de left és el de right (segon valor). L'amplada és la mateixa a la part esquerra i dreta.
amb dos valors, per exemple, top, right: el valor per defecte per bottom és el de top (primer valor), i per defecte per left s'assigna el valor de right (segon valor). L'amplada de la part de dalt és igual a la de baix; l'amplada a l'esquerra és la mateixa que a la dreta.
amb un valor, per exemple, top: el valor per defecte de right és el de top i és el mateix per a bottom i left. El quatre amples són els mateixos i construeixen una vora regular. Aquesta és una drecera d'escriptura.
Un altre mètode per definir l'amplada dels quatre costats d'una cel·la és utilitzar "border-left", "border-right", "border-top" i "border-bottom":
Els atributs d'HTML (com "width=", "border=", "cellspacing=", "cellpadding=") no necessiten una unitat de longitud assignada (per defecte la unitat és el píxel).
Són també invàlids en HTML 5.
"Cellpadding" serveix per establir l'espai entre la paret de la cel·la i el seu contingut.[2]
Les propietats dels estils CSS (que anul·len els atributs HTML) requereixen una unitat de mesura específica (si el valor no és cero) com a px per a indicar els píxels.
Amb atributs d'HTML i estils CSS
És possible afegir atributs d'estil CSS, amb o sense altres atributs HTML.
{|class=wikitable
| style="padding: 10px" | Exemple de style="padding:10px"
|-
| style="padding: 50px" | Exemple de style="padding:50px"<br/><br/>Especifica el ''padding'' a '''CADA CEL·LA'''
|-
| style="padding:100px" | Exemple de style="padding:100px"
|}
Exemple de style="padding:10px"
Exemple de style="padding:50px"
Especifica el padding a CADA CEL·LA
Exemple de style="padding:100px"
Amplada de columna
L'amplada de columna es pot afegir de la següent manera.
Si escriviu
{| class="wikitable" style="width: 85%;"
| colspan="2" | Aquesta columna té una amplada del 85% de l'amplada de pantalla
|-
| style="width: 30%"| '''Aquesta columna té un 30% a comptar dins del 85% de l'amplada de pantalla'''
| style="width: 70%"| '''Aquesta columna té un 70% a comptar dins del 85% de l'amplada de pantalla'''
|}
Obteniu
Aquesta columna té una amplada del 85% de l'amplada de pantalla
Aquesta columna té un 30% a comptar dins del 85% de l'amplada de pantalla
Aquesta columna té un 70% a comptar dins del 85% de l'amplada de pantalla
Accessibilitat de les cel·les d'encapçalament de la taula
Les cel·les de l’encapçalament de la taula no especifiquen explícitament a quines cel·les de dades de la taula s’apliquen (les de la seva dreta en la mateixa fila o les que estan a sota de la mateixa columna).
Quan la taula es mostra en un entorn visual 2D, normalment és fàcil d'inferir.
Tanmateix, quan es mostren les taules en suports no visuals, podeu ajudar el navegador a determinar quina cel·la de l’encapçalament de la taula s’aplica a la descripció de qualsevol cel·la seleccionada (per tal de que algun assistent d’accessibilitat repeteixi el seu contingut) mitjançant els atributs scope="row" o scope="col" a les cel·les de capçalera de la taula.
En la majoria dels casos amb taules simples, utilitzeu scope="col" a totes les cel·les de capçalera de la primera fila i scope="row" a la primera cel·la de les files següents:
Si escriviu
Obteniu
{| class="wikitable"
|-
! scope="col"| Element
! scope="col"| Quantitat
! scope="col"| Preu
|-
! scope="row"| Pa
| 0.3 kg
| $0.65
|-
! scope="row"| Mantega
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| Total
| $1.90
|}
Element
Quantitat
Preu
Pa
0.3 kg
$0.65
Mantega
0.125 kg
$1.25
Total
$1.90
Alineació
Alineació de la taula
L’alineació de la taula s’estableix mitjançant CSS.
L’alineació de la taula està controlada pels marges.
Un marge fix en un costat farà que la taula estigui alineada amb aquest costat, si al costat oposat el marge es defineix com a "automàtic".
Per tenir una taula alineada al centre, hauríeu de definir els dos marges com a "auto"
Si alineeu una taula a la part dreta o esquerra de la pàgina, el text que surt després de la taula s’inicia al final d’aquesta, deixant un espai buit al voltant de la taula.
Podeu fer que el text aparegui al voltant de la taula fent que la taula "floti" al voltant del text en lloc d'alinear-la.
Això pot ser aconseguit utilitzant l'atribut de CSS float, els qual pot especificar si taula flota al costat dret o l'esquerre.
Quan s'utilitza float, els marges no controlen l'alineació de la taula i es poden utilitzar per especificar el marge entre la taula i el text circumdant.
Si escriviu
Obteniu
{| class="wikitable" style="float:right; margin-left: 10px;"
| Taronja
| Poma
|-
| Pa
| Pastís
|-
| Mantega
| Gelat
|}
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
Taronja
Poma
Pa
Pastís
Mantega
Gelat
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
Alineació del contingut de la cel·la
L’alineació del contingut de les cel·les es pot controlar amb dues propietats CSS diferents: text-align i vertical-align.
El text-align es pot especificar per la taula, una fila o cel·les individuals, mentre que vertical-align només es pot especificar per les files o cel·les individuals.
Si escriviu
Obteniu
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A
B
C
D
E
F
G
H
I
Advertències
Números negatius
Si inicieu una cel·la en una nova línia amb un número negatiu amb un signe menys (o un paràmetre que s’avalua a un nombre negatiu), la taula es pot trencar, ja que els caràcters |- seran analitzats com a marca wiki per a la fila de taula, no per a la cel·la de taula.
Per evitar-ho, inseriu un espai abans del valor (| -6) o utilitzeu la marca de cel·les en línia (|| -6).
CSS vs atributs
Les vores de la taula especificades a través de CSS en lloc de l’atribut de la vora es mostren de forma incorrecta en un petit subconjunt de navegadors de text.
Atributs comuns per columnes, grups de columnes i grups de files
La sintaxi de MediaWiki per a taules actualment no ofereix cap suport per especificar atributs comuns per a columnes (amb l’element HTML <col />), grups de columnes (element HTML <colgroup></colgroup>) i grups de files (elements HTML <thead></thead>, <tbody></tbody> i <tfoot></tfoot>).
Aquests elements HTML estàndards no s’accepten ni en la sintaxi HTML o XHTML.
Totes les files i cel·les (capçalera o dades) de la taula es mostren dins d’un únic grup de files implícit (element HTML <tbody></tbody>) sense atributs o estils.
Vegeu Phab: T108245: "Fully support basic table editing in the visual editor".
Consulteu la llista de tasques. Les tasques finalitzades estan struck. Pot ser difícil esbrinar del llenguatge tècnic allà què hi ha millorat exactament o quines funcions s’han afegit. Afegiu a continuació la informació explicativa.
Per moure o suprimir columnes i files
Cliqueu en un encapçalament de columna o de fila.
Llavors cliqueu en la fletxa.
Al menú emergent, feu clic a "Moure" o "Suprimeix".
Per inserir una fila o columna en blanc
Des del mateix menú emergent, cliqueu a "Insereix".
Per copiar una taula d'una pàgina web amb l'Editor Visual
És possible de copiar i enganxar una taula d'una pàgina web directament amb l'Editor Visual (EV).
Per fer-ho de manera segura, utilitzeu una caixa de sorra i comproveu que la taula tingui una codificació adequada en el mode editor de codi i una visualització adequada en l'editor visual i en el mode de previsualització.
↑
Les taules poden ser creades utilitzant qualsevol dels elements de taula d'HTML directament, o utilitzant format de codi wiki per definir la taula.
Els elements de la taula HTML i el seu ús es descriuen en diverses pàgines web i no se'n parlarà aquí.
El benefici de codi wiki és que la taula està constituïda per símbols de caràcters que solen facilitar la percepció de l'estructura de la taula a la vista d'edició de l'article en comparació amb els elements de la taula HTML.
