Ajuda:Taules

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.

Sumari de format de taules en codi wiki

{|	inici de la taula, requerit
|+	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 (|) en una taula, utilitzeu el marcatge d'escapament <nowiki>|</nowiki>.

Conceptes bàsics

Crear una taula amb barra d'eines d'editor

A l'editor de codi wiki, col·loqueu el cursor on voleu inserir una taula. Després, a la barra d'eines, premeu “Avançat”, després trieu el botó Taula. S'obre un diàleg.

Des del diàleg, podeu triar si voleu habilitar una fila de capçalera de taula, estilitzar la taula amb una vora i fer que la taula sigui ordenable. Es mostra un exemple de vista prèvia. També podeu establir el recompte de files i columnes que necessiteu. A continuació, premeu el botó "Insereix".

Per defecte, es genera el codi següent:

Cod wiki:

{| class="wikitable" style="margin:auto"
|+ Caption text
|-
! Text de capçalera !! Text de capçalera !! Text de capçalera
|-
| Text de cel·la || Text de cel·la || Text de cel·la
|-
| Text de cel·la || Text de cel·la || Text de cel·la
|-
| Text de cel·la || Text de cel·la || Text de cel·la
|}

Resultat:

Caption text

Text de capçalera	Text de capçalera	Text de capçalera
Text de cel·la	Text de cel·la	Text de cel·la
Text de cel·la	Text de cel·la	Text de cel·la
Text de cel·la	Text de cel·la	Text de cel·la

Sintaxi mínima

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.

Si escriviu	Obteniu
{| |Taronja |Poma |- |Pa |Pastís |- |Mantega |Gelat |}	Taronja Poma Pa Pastís Mantega Gelat

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 />.

Si escriviu	Obteniu
{| |Taronja||Poma||més |- |Pa||Pastís||més |- |Mantega||Gelat<br/>cremós||i<br/>més |}	Taronja Poma més Pa Pastís més Mantega Gelat cremós i més

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 d'exclamació) en comptes de "|" (la barra vertical). Els encapçalaments normalment es mostren, per defecte, en negreta i centrats.

Si escriviu	Obteniu
{| ! style="text-align:left;"| Element ! Quantitat ! Cost |- |Taronja |10 |7.00 |- |Pa |4 |3.00 |- |Mantega |1 |5.00 |- !Total | |15.00 |}	Element Quantitat Cost Taronja 10 7.00 Pa 4 3.00 Mantega 1 5.00 Total 15.00

Quan s'utilitzen atributs en l'encapçalament 'Element', s'utilitza una barra vertical '|' per separació. No un caràcter d'exclamació '!'.

Títol

Es pot afegir un títol per la taula al capdamunt de qualsevol taula com es mostra a continuació.

Si escriviu	Obteniu
{| |+Complements alimentaris |- |Taronja |Poma |- |Pa |Pastís |- |Mantega |Gelat |}	Complements alimentaris Taronja Poma Pa Pastís Mantega Gelat

class="wikitable"

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")

Si escriviu	Obteniu
{| class="wikitable" |+Complements alimentaris |- |Taronja |Poma |- |Pa |Pastís |- |Mantega |Gelat |}	Complements alimentaris Taronja Poma Pa Pastís Mantega Gelat

Combinació HTML de cel·les en columnes o files

Podeu utilitzar els atributs HTML colspan i rowspan a les cel·les per a realitzar combinacions de cel·les en un disseny avançat.

Si escriviu	Obteniu
{| class="wikitable" !colspan="6"|Llista de la compra |- |rowspan="2"|Pa i mantega |Pastís |Panets |Pa danès |colspan="2"|Croissant |- |Formatge |colspan="2"|Gelat |Mantega |Iogurt |}	Llista de la compra Pa i mantega Pastís Panets Pa danès Croissant Formatge Gelat Mantega Iogurt

Note about large tables (noresize class)

The use of the wrapping div.noresize will ensure your table is optimized for mobile and is extremely important for large tables e.g. tables with more than 4 columns or large columns. Failure to use this element will cause your content to overlap UI elements e.g. the Vector 2022 sidebar or to break mobile display. This will cause the table to have a horizontal scroll bar when the table is too big for the content.

Shopping List
Areallyreallyreallyreallylongstringwillcauseyourtableto	Pie	Buns	Danish	Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
	Cheese	Ice cream		Butter	Yogurt

Atributs HTML

Podeu afegir atributs HTML a les taules. Per obtenir la font d'autorització sobre atributs HTML, consulteu la pàgina d'Especificació HTML del W3C sobre les taules.

Atributs en les taules

Si es col·loquen atributs després del codi d'inici de la taula ({|), els atributs s'aplicaran a tota la taula.

Si escriviu	Obteniu
{| class="wikitable" style="text-align: center; color: green;" |Taronja |Poma |12,333.00 |- |Pa |Pastís |500.00 |- |Mantega |Gelat |1.00 |}	Taronja Poma 12,333.00 Pa Pastís 500.00 Mantega Gelat 1.00

Atributs en les cel·les

Podeu incloure atributs en cel·les individuals. Per exemple, podeu fer que els números estiguin correctament alineats a la dreta.

Si escriviu	Obteniu
{| class="wikitable" | Taronja | Poma | style="text-align:right;" | 12,333.00 |- | Pa | Pastís | style="text-align:right;" | 500.00 |- | Mantega | Gelat | style="text-align:right;" | 1.00 |}	Taronja Poma 12,333.00 Pa Pastís 500.00 Mantega Gelat 1.00

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 l'atribut (o atributs) i valor(s) estan separats per |.

Si escriviu	Obteniu
{| class="wikitable" | Taronja || Poma || style="text-align:right;" | 12,333.00 |- | Pa || Pastís || style="text-align:right;" | 500.00 |- | Mantega || Gelat || style="text-align:right;" | 1.00 |}	Taronja Poma 12,333.00 Pa Pastís 500.00 Mantega Gelat 1.00

Atributs en les files

També podeu posar atributs en files individuals.

Si escriviu	Obteniu
{| class="wikitable" | Taronja | Poma | style="text-align:right;"| 12,333.00 |- | Pa | Pastís | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | Mantega | Gelat | style="text-align:right;"| 1.00 |}	Taronja Poma 12,333.00 Pa Pastís 500.00 Mantega Gelat 1.00

Atributs pel títol i els encapçalaments

Es poden afegir atributs als encapçalaments i als títols com s'indica a continuació.

Si escriviu	Obteniu
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|''Complements alimentaris'' |- ! style="color:green" | Fruites ! style="color:red" | Greixos |- |Taronja |Mantega |- |Pera |Pastís |- |Poma |Gelat |}	Complements alimentaris Fruites Greixos Taronja Mantega Pera Pastís Poma Gelat

Amplada de la vora

Si "border-width:" només té un número, aquest s'aplica per als quatre costats de la vora:

Si escriviu	Obteniu
{|style="border-style: solid; border-width: 20px" | Hola |}	Hola

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":

Si escriviu	Obteniu
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" | Hola |}	Hola

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.

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

Es poden afegir els atributs d'estil CSS amb o sense els altres atributs HTML.

Si escriviu	Obteniu
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |Taronja |Poma |- |Pa |Pastís |- |Mantega |Gelat |}	Taronja Poma Pa Pastís Mantega Gelat

Marges pel contingut de la cel·la

Representa el marge intern entre el contingut i la vora de la cel·la.

Si escriviu	Obteniu
{|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"

Per exemple, una taula alineada a la dreta:

Si escriviu	Obteniu
{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | 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.	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.

I una taula alineada al centre:

Si escriviu	Obteniu
{| class="wikitable" style="margin: auto;" | 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.	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.

Taula flotant al voltant del text

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, el 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. 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

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.

Taules i l'Editor Visual (EV)

Vegeu també: Help:EditorVisual/Guia d'usuari

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ó.

Eines d'ajuda

• Excel2Wiki us permet copiar un full d'estils des d'Excel, Apache OpenOffice, LibreOffice o Gnumeric per convertir-lo en una taula de codi wiki.

Vegeu també

• Ordenant files d'una taula
• ca:Ajuda:Taules
• Una eina visual que ajuda a generar taules