Taules

autores (bàsic)

Taules bàsiques

PmWiki té dos tipus de sintaxi per a les taules; la que es descriu en aquesta pàgina és útil per a crear taules simples amb moltes cel·les, mentre que la directiva de taules és de gran ajuda amb taules de gran escala. Si voleu ampliar coneixements sobre donar format a les taules, vegeu Cookbook:Rowspan in simple tables i Cookbook:Formatting tables.

Les taules es creen usant dos barres verticals: ||. Les línies que comencen amb aquesta marca indiquen files d'una taula, o una línia de format. A dintre de les línies que indiquen files d'una taula, les barres verticals dobles delimiten les cel·les. Als exemples de sota, s'ha afegit una vora per tal d'il·lustrar-ho millor (per defecte les taules no tenen bora).

La primera línia conté ordres per a donar format a la taula. Només té barres verticals dobles al principi de la línia.

Taula bàsica
|| border=1
|| cel·la 1 || cel·la 2 || cel·la 3 ||
|| cel·la 1 || cel·la 2 ||
cel·la 1cel·la 2cel·la 3
cel·la 1cel·la 2

Es poden crear cel·les d'encapçalament col·locant ! com a primer caràcter d'una cel·la. Fixeu-vos que açò produeix capçaleres per a les taules, no pas encapçalaments normals, per tant no és extensible a !!, !!!, etc.

Encapçalaments de les taules
|| border=1
||! cel·la 1 ||! cel·la 2 ||! cel·la 3 ||
|| cel·la 1  ||  cel·la 2 ||  cel·la 3 ||
cel·la 1cel·la 2cel·la 3
cel·la 1cel·la 2cel·la 3

Una taula pot tenir un peu, indicat amb ||!peu de taula!||. Un peu ha d'apareixer necessàriament abans que qualsevol fila de la taula.

Peu de taula
|| border=1
||! Una taula especial !||
||! cel·la 1 ||! cel·la 2 ||! cel·la 3 ||
|| cel·la 1  ||  cel·la 2 ||  cel·la 3 ||
Una taula especial
cel·la 1cel·la 2cel·la 3
cel·la 1cel·la 2cel·la 3

Formatar els continguts de les cel·les

Els continguts d'una cel·la poden alinear-se a l'esquerra, centrar-se, o alinear-se a la dreta.

  • Per alinear a l'esquerra els continguts, col·loqueu els continguts junt a les || inicials.
  • Per a centrar els continguts, afegiu un espai al davant i al darrere dels continguts de la cel·la.
  • Per a alinear a la dreta els continguts, Col·loqueu un espai al davant dels continguts de la cel·la i deixeu els continguts apegats (sense espais de per mig) a les || finals.
Alineaments de cel·la
|| border=1 width=100%
||!cel·la 1      ||! cel·la 2  ||!       cel·la 3||
||alineat a l'esquerra || centrart || alineat a la dreta||
cel·la 1cel·la 2cel·la 3
alineat a l'esquerracentrartalineat a la dreta
Alineaments de cel·la per defecte
|| border=1 width=100%
||!Alineat per defecte||!Alineat a l'esquerra ||
||alineat per defecte||alienat a l'esquerra ||
Alineat per defecteAlineat a l'esquerra
alineat per defectealienat a l'esquerra

Fixeu-vos que l'alineament per defecte de les cel·les d'encapçalament i les cel·les normals difereix.

Per a que una cel·la s'expandeixi per diverses columnes, prosseguiu la cel·la amb cel·les buides. (Ara per ara no hi ha cap marca per a expandir les files.)

Expansió entre columnes
|| border=1 width=100%
|| |||| columna dreta ||
|| || columna central ||||
|| columna esquerra ||||||
|| columna esquerra || columna central || columna dreta ||
 columna dreta
 columna central
columna esquerra
columna esquerracolumna centralcolumna dreta

Atributs per a les taules

Qualsevol línia que comença amb || però no té unes || al final, defineix els atributs de la taula per a qualsevol taula posterior. Aquests atributs poden controlar la mida i la posició de la taula, bora, color de fons, i espaiat entre les cel·les. (De fet, aquests són atributs HTML estàndards que s'estableixen a l'etiqueta <table>.)

Feu servir l'atribut width= per a establir l'amplada de la taula, bé fent servir un valor en percentatge, una mida absoluta, o *.

Amplada de la taula
|| border=1 width=100% 
|| cel·la 1 || cel·la 2 || cel·la 3 ||
|| c1 || cel·lacel·lacel·lacel·la2 || cel·la 3 ||
cel·la 1cel·la 2cel·la 3
c1cel·lacel·lacel·lacel·la2cel·la 3

L'atribut border= defineix la mida de les bores de la taula.

Taula amb bores
|| border=10 width=70%
||!cel·la 1      ||! cel·la 2  ||!       cel·la 3||
||alineat a l'esquerra || centrat || alineat a la dreta||
cel·la 1cel·la 2cel·la 3
alineat a l'esquerracentratalineat a la dreta
Taula sense bores
|| border=0 width=70%
||!cel·la 1      ||! cel·la 2  ||!       cel·la 3||
||alineat a l'esquerra || centrat || alineat a la dreta||
cel·la 1cel·la 2cel·la 3
alineat a l'esquerracentratalineat a la dreta

Feu servir align=center, align=left, i align=right per a centrar, alinear a l'esquerra, o alinear a la dreta una taula. Fixeu-vos que align=left i align=right creen una taula flotant, així que el text es talla al voltant de la taula.

Alineament de la taula: centre
|| border=1 align=center width=50%
||!cel·la 1      ||! cel·la 2  ||!       cel·la 3||
||alineat a l'esquerra || centrat || alineat a la dreta||
Fixeu-vos que el text no es talla envoltant la taula alineant-la al centre amb "align=center".
cel·la 1cel·la 2cel·la 3
alineat a l'esquerracentratalineat a la dreta

Fixeu-vos que el text no es talla envoltant la taula alineant-la al centre amb "align=center".

Alineament de la taula: esquerra
|| border=1 align=left width=50%
||!cel·la 1      ||! cel·la 2  ||!       cel·la 3||
||alineat a l'esquerra || centrat || alineat a la dreta||
Fixeu-vos com el text es talla al costat dret de la taula amb "align=left".
cel·la 1cel·la 2cel·la 3
alineat a l'esquerracentratalineat a la dreta

Fixeu-vos com el text es talla al costat dret de la taula amb "align=left".

Alineament de la taula: dreta
|| border=1 align=right width=50%
||!cel·la 1      ||! cel·la 2  ||!       cel·la 3||
||alineat a l'esquerra || centrat || alineat a la dreta||
Fixeu-vos com el text es talla al costat esquerre de la taula amb "align=right".
cel·la 1cel·la 2cel·la 3
alineat a l'esquerracentratalineat a la dreta

Fixeu-vos com el text es talla al costat esquerre de la taula amb "align=right".

Nota: per tal d'aconseguir que una taula s'alineï a l'esquerra (sense "float left") és necessari usar CSS, per exemple així:

||style="margin-left:0px;"

L'atribut bgcolor= estableix el color de fons d'una taula. Ara per ara, en aquest tipus de taules no hi ha manera d'especificar el color d'una fila o de cel·les individuals (però vegeu Cookbook:FormattingTables).

|| border=1 align=center bgcolor=yellow width=70%
||!cel·la 1    ||! cel·la 2 ||!     cel·la 3||
||alineat a l'esquerra || centrat  || alineat a la dreta||
cel·la 1cel·la 2cel·la 3
alineat a l'esquerracentratalineat a la dreta

Com puc crear una taula bàsica?

Les taules es creen usant la marca amb dues barres verticals: ||. Les línies que comencen amb aquesta marca indiquen files d'una taula; en eixes línies s'usa dos barres verticals per a delimitar les cel·les. A l'exemple de sota s'ha afegit una vora per il·lustrar-ho (per defecte les taules no tenen bora).

Taula bàsica
|| border=1 rules=rows frame=hsides
|| cel·la 1 || cel·la 2 || cel·la 3 ||
|| cel·la 1 || cel·la 2 || cel·la 3 ||
cel·la 1cel·la 2cel·la 3
cel·la 1cel·la 2cel·la 3

Com puc crear cel·les d'encapçalament?

Les cel·les d'encapçalament es creen ficant una ! com a primer caràcter de la cel·la. Fixeu-vos que això són encapçalaments de taula, no pas encapçalaments normals, per tant no és extensible a !!, !!!, etc.

Encapçalaments de taula
|| border=1 rules=cols frame=vsides
||! cel·la 1 ||! cel·la 2 ||! cel·la 3 ||
|| cel·la 1  ||  cel·la 2 ||  cel·la 3 ||
cel·la 1cel·la 2cel·la 3
cel·la 1cel·la 2cel·la 3

Com puc aconseguir una taula amb línies fines i més distància entre els continguts?

És difícil aconseguir "línies fines" amb un mateix aspecte a tots els navegadors, però el següent exemple funciona per a Firefox i IE (Nov. 2009):

Línies fines i emplenat de cel·les
||border="1" style="border-collapse:collapse" cel·lapadding="5" width=66%
||!Capçalera ||! Capçalera || '''Capçalera'''||
||cel·les   ||  amb   ||      emplenat||
||        ||         ||             ||
CapçaleraCapçaleraCapçalera
cel·lesambemplenat
   

Com puc crear una taula més avançada?

Vegeu Directives per a taules

Les meues taules estan centrades per defecte. Quan intento usar '||align=left' no s'alineen a l'esquerra com cabria esperar.

En lloc d'això, useu ||style="margin-left:0px;".

Com put especificar l'ample de les columnes?

Podeu definir-ne l'ample mitjançant un estil personalitzat, vegeu Cookbook:FormattingTables i $Tablecel·laAttrFmt. Afegiu al fitxer config.php: $Tablecel·laAttrFmt = 'class=col$Tablecel·laCount';

I afegiu a pub/css/local.css:
table.column td.col1 { width: 120px; }
table.column td.col3 { width: 40px; }

Com puc mostrar dos barres verticals "||" a dintre d'una cel·la amb la sintaxi bàsica de taula?

Escapeu-les amb [=||=] per tal de mostrar || tal qual.

Com puc aplicar estils als elements d'una taula, com un ID a una fila, o una classe/estil al TD?

Vegeu $WikiStyleApply.



Traducció de PmWiki.Tables - Pàgina original a PmWikiCa.Tables - Backlinks