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.[1]
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
- Cel·les i títol (
- 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>
.
- Caràcter de barra com a contingut. Per a inserir un caràcter de barra (
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:
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
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 |} |
|
- Quan hi ha menys que 4 valors:
- amb tres valors, per exemple,
top
,right
,bottom
: el valor per defecte deleft
és el deright
(segon valor). L'amplada és la mateixa a la part esquerra i dreta. - amb dos valors, per exemple,
top
,right
: el valor per defecte perbottom
és el detop
(primer valor), i per defecte perleft
s'assigna el valor deright
(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 deright
és el detop
i és el mateix per abottom
ileft
. El quatre amples són els mateixos i construeixen una vora regular. Aquesta és una drecera d'escriptura.
- amb tres valors, per exemple,
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 |} |
|
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
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 |} |
|
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" |} |
|
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 |} |
|
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. |
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. |
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. |
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 |} |
|
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.
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é
Notes
- ↑ 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.
- ↑ HTML table cellpadding Attribute