Hjælp:Tabeller

Pipe-syntaks

Selvom det også er muligt at lave tabeller med HTML, findes der specielle wikikoder til at lave tabeller. De opbygges på følgende måde:

Hele tabellen starter med en linie der indeholder {| valgfrie tabelparametre " og slutter med en linie der indeholder "|}".
En valgfri tabeloverskrift kan sættes ind med en linie, der indeholder "|+ overskrift " efter "{|".
Koden for en tabelrække består af en linie med indholdet "|- valgfrie tabelparametre ", og på næste linie koderne for cellerne adskilt af en ny linie eller "|"
Tabeldata er koder til cellerne; de er sat i formatet "| værdi " eller "| celleparametre | værdi "
En række med kolonneoverskrifter identificeres ved at bruge "!" i stedet for "|", undtagen separatoren imellem cellens parametre og værdi; forskellen fra en normal række afhænger af browseren, kolonneoverskrifter vises ofte som fed tekst.
Den første celle i en række identificeres som en rækkeoverskrift ved at starte linien med "!" i stedet for "|", og starte de almindelige dataceller på en ny linie.

Tabelparametrene og celleparametrene er de samme som i HTML, se [1] og HTML element#Tables. Kodeelementerne thead, tbody, tfoot, colgroup, og col understøttes dog ikke i MediaWiki.

En tabel kan også være nyttig, selv om der ikke er noget indhold i nogen af cellerne, da man ved at bruge baggrundsfarver kan lave diagrammer af tabeller, se f.eks. m:Template talk:Square 8x8 pentomino example. Et "billede" i form af en tabel er meget lettere at redigere end en billedfil, der er lagt op.

Hver række skal have samme antal celler som de andre rækker, så antallet af kolonner er konstant igennem hele tabellen (med mindre der er celler, der strækker sig over flere kolonner eller rækker, se colspan og rowspan i Mélange-eksemplet længere nede). Til tomme celler skal der bruges et ikke-brydende mellemrum   som indhold for at sikre at cellen vises.

Eksempler

Simpelt eksempel

{| 
| Celle 1, række 1 
| Celle 2, række 1 
|- 
| Celle 1, række 2 
| Celle 2, række 2 
|}

og

{| 
| Celle 1, række 1 || Celle 2, række 1 
|- 
| Celle 1, række 2 || Celle 2, række 2 
|}

genererer begge

Celle 1, række 1	Celle 2, række 1
Celle 1, række 2	Celle 2, række 2

Multiplikationstabel

Kildekode

{| border="1" cellpadding="2"
|+Multiplikationstabel
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

Vises som

Multiplikationstabel
× 1 2 3

1 1 2 3

2 2 4 6

3 3 6 9

4 4 8 12

5 5 10 15

Farver og deres parametre

Der er to måder til at specificere tekstens, og baggrundens farve i en enkel celle, måderne er vist i følgende eksempel:

{| 
| bgcolor=red | <font color=white> abc
| def
| style="background:red; color:white" | ghi
| jkl
|}

giver

abc

def

ghi

jkl

Som vist virker "font" kun på én celle, selv uden et stoptag: stoptagget laver systemet selv.

Lige som ved andre parametre kan man specificere farver for en hel række eller for hele tabellen. Parametre for en række er overordnet i forhold til hele tabellens farve, og parametre for en enkel celle er overordnet i forhold til rækkens farve.

{| style="background:yellow; color:green"
|- 
| abc
| def
| ghi
|- style="background:red; color:white"
| jkl
| mno
| pqr
|-
| stu
| style="background:silver" | vwx
| yz
|}

giver

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

HTML 4.01-specifikationen definerer seksten navngivne farver, her er de vist med deres hexadecimale værdier:

black	#000000	silver	#c0c0c0	maroon	#800000	red	#ff0000
navy	#000080	blue	#0000ff	purple	#800080	fuchsia	#ff00ff
green	#008000	lime	#00ff00	olive	#808000	Yellow	#ffff00
teal	#008080	aqua	#00ffff	gray	#808080	white	#ffffff

Se også w:da:Web-sikre farver.

Bredde, højde

Tabellens bredde og højde kan forudbestemmes, det samme kan en rækkes højde. For at sætte en kolonnes bredde, kan man sætte bredden af en af cellerne i den. Hvis bredden for alle kolonner, og/eller højden på alle rækker ikke er specificeret, sættes de af browseren og resultatet kan derfor variere alt efter hvilken browser man bruger.

{| style="width:400px; height:200px" border="1"
|- 
| abc
| def
| ghi
|- style="height:100px" 
| jkl
| style="width:200px" |mno
| pqr
|-
| stu
| vwx
| yz
|}

giver

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

Placering

Man kan specificere placeringen af selve tabellen, hele indholdet i en række og indholdet i en celle. Man kan dog ikke specificere placeringen af hele indholdet i en tabel med en enkelt parameter, se m:Template talk:Table demo. Brug under ingen omstændigheder "float" til at angive placeringen af en tabel, da det kan give problemer med visning af sider med store skriftstørrelser.

Mélange

Her er et mere avanceret eksempel, som viser nogle flere af de muligheder, der er for at lave tabeller. Du kan lege med disse indstillinger i din egen tabel for at se, hvilken effekt indstillingerne har på tabellen. Ikke alle teknikker er relevante i alle tilfælde: Selv om man kan tilføje en baggrundsfarve er det ikke altid en god ide. Prøv at holde formatteringsmetoderne i dine tabeller relativt simple - husk at der også er andre brugere, der redigerer artiklen! Følgende eksempel skulle give en ide om, hvad der er muligt.

Kildekode

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''Et tabeleksempel'''
|-
! style="background:#efefef;" | Første overskrift
! colspan="2" style="background:#ffdead;" | Anden overskrift
|-
| øverst venstre
|  
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
højre side
|-
| style="border-bottom:3px solid grey;" | nederst venstre
| style="border-bottom:3px solid grey;" | nederst midten
|-
| colspan="3" align="center" |
{| border="0"
|+''En tabel i en tabel''
|-
| align="center" width="150px" | [[Fil:Wiktionary-logo-id.png]]
| align="center" width="150px" | [[Fil:Wiktionary-logo-id.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px
          solid red; border-bottom:2px solid red; border-left:1px solid red;" |
To Wikipedialogoer
|}
|}

Vises som

Et tabeleksempel
Første overskrift Anden overskrift

øverst venstre
højre side

nederst venstre nederst midten

En tabel i en tabel

To Wikipedialogoer

Avanceret eksempel

{| align=right border=1
| Celle 1, række 1 
|rowspan=2| Celle 2, række 1 (og 2) 
| Celle 3, række 1 
|- 
| Celle 1, række 2 
| Celle 3, række 2 
|}

Celle 1, række 1	Celle 2, række 1 (og 2)	Celle 3, række 1
Celle 1, række 2	Celle 2, række 1 (og 2)	Celle 3, række 2

Bemærk den flydende tabel til højre.

Indlejret tabel

{| border=1
| &alpha;
|
{| bgcolor=#ABCDEF border=2
|indlejret
|-
|tabel
|}
|den oprindelige tabel igen
|}

giver en indlejret tabel:

α

indlejret

tabel

den oprindelige tabel igen

Indlejrede tabeller skal starte på en ny linie.

Andre tabelsyntakser

Andre typer af tabelsyntakser, der understøttes af MediaWiki:

XHTML
HTML og wiki <td> syntaks

Alle tre er understøttede af MediaWiki og giver (på nuværende tidspunkt) korrekt HTML-output, men pipe-syntaksen er for de fleste den simpleste, måske med undtagelse af folk, der allerede er vant til at bruge HTML. Derudover er det ikke nødvendigvis givet, at HTML- og wiki-<td>-syntakserne vil være browserunderstøttede i al fremtid, især ikke på håndholdte apparater med internetadgang.

Se også HTML element#Tables. Bemærk at HTML-elementerne thead, tbody, tfoot, colgroup, og col på nuværende tidspunkt ikke understøttes af MediaWiki.

Sammenligning

Sammenligning af tabelsyntaks

XHTML

HTML & Wiki-td

Wiki-pipe

Tabel

{| parametre 
|}

Overskrift

|+ overskrift

Række

<tr>

|- parametre

Datacelle

<td>celle1</td>
<td>celle2</td>

<td>celle1
<td>celle2

| celle1
| celle2

Datacelle

<td>celle1</td> <td>celle2</td> <td>celle3</td>

<td>celle1 <td>celle2 <td>celle3

|celle1||celle2||celle3

Overskrift-celle

<th>

! overskrift

Tabeleksempel

1	2
3	4

<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>

<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>

{| 
| 1 || 2
|- 
| 3 || 4
|}

Tabeleksempel

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 
|}

Fordele

Kan forhåndsvises/afluses med alle XHTML-redigeringsprogrammer

Kan formatteres for lettere læsning

Velkendt

Kan forhåndsvises/afluses med alle HTML-redigeringsprogrammer

Kan formatteres for lettere læsning

Velkendt

Bruger mindre plads end XHTML

Let at skrive

Let at læse

Bruger lidt plads

Ulemper

Besværlig

Bruger meget plads

Svært at læse hurtigt

Forvirrende, især for folk med begrænset erfaring med HTML

Dårligt udviklet

Dårligt afgrænset

Ser sært ud

Fremtidig browserunderstøttelse usikker

Uvant syntaks

Stiv struktur

Giver ikke mening

Tekst (som i HTML-tags) kan for nogle være lettere at læse end serier af streger, plustegn, udråbstegn, o.s.v.

XHTML

HTML & Wiki-td

Wiki-pipe

Pipe-syntaks beskrevet ved det resulterende HTML-output

Pipe-syntaksen, der er udviklet af Magnus Manske, erstatter HTML med pipes (|). Der findes et on-line skript, der kan konvertere HTML-tabeller til pipe-syntakstabeller.

Piperne skal starte i begyndelsen af en ny linie, undtagen når de bruges til at adskille parametre fra indhold eller når man bruger || til at adskille celler på en enkelt linie. Parametrene er valgfrie.

Tabeller

En tabel er defineret som {| ''parametre'' |} hvilket svarer til <table ''parametre''>Indsæt uformatteret tekst her </table>

Vigtigt: Du skal medtage mellemrummet mellem {| og parametre, ellers bliver den første parameter ignoreret.

Rækker

<tr> tags genereres automatisk for den første række. For at starte en ny række bruges

|-

der resulterer i

<tr>

Parametre kan tilføjes således:

|- parametre

hvilket resulterer i

<tr parametre>

Bemærk:

<tr> tags vil automatisk blive åbnet ved den første <td> ækvivalent
<tr> tags vil automatisk blive lukket ved <tr> og </table> ækvivalenter

Celler

Celler dannes enten således:

|celle1
|celle2
|celle3

eller således:

|celle1||celle2||celle3

Begge metoder svarer til

<td>celle1</td><td>celle2</td><td>celle3</td>

så "||" svarer til "linieskift" + "|"

Parametre for cellen kan bruges således:

|parametre|celle1||parametre|celle2||parametre|celle3

hvilket vil resultere i

<td parametre>

Overskrifter

Virker på samme måde som TD, bortset fra, at "!" bruges i stedet for den første "|". "!!" kan bruges i stedet for "||". Parametrene skal dog stadig bruge "|". Eksempel:

!parametre|celle1

Et <caption> tag dannes ved

|+ Caption

hvilket genererer

<caption>Overskrift</caption>

Du kan også bruge parametre:

|+ parametre|Overskrift

hvilket genererer

<caption parametre>Overskrift</caption>

Tekst ved siden af en tabel

(For at se de demonstrerede effekter kan det være nødvendigt at forøge eller formindske skriftstørrelsen i din browser. Du kan også variere bredden af browservinduet.)

Du kan bruge align=right (højrestillet), tekst efter tabellens kode vil så vises til venstre for tabellen.

Multiplikationstabel 5*3
×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

her begynder teksten umiddelbart efter 5*3 muliplikationstabellen tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Men indsæt ikke preformatteret tekst der, da teksten så kan overlappe tabellen fordi preformatteret tekst ikke ombrydes. For at undgå dette brug <br style="clear:both;"> eller {{clear}} (skabelon der gør det samme):

Multiplikationstabel 4*3
×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12

Her begynder teksten umiddelbart efter 4*3 multiplikationstabellen... tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst her ender teksten, nu kommer det clearede BR:

her var det så. Preformatteret tekst starter først efter tabellen tekst tekst tekst tekst tekst

Du kan bruge align=left (venstrestillet), tabellen vil så vises til venstre med den efterfølgende tekst til højre for tabellen (men måske for tæt på):

Multiplikationstabel 2*3
×	1	2	3
1	1	2	3
2	2	4	6

her begynder teksten umiddelbart efter 2*3 multiplikationstabellen tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Luft rundt om tabel, billede eller tekst

For at skabe luft rundt om en tabel, et billede eller en tekst kan man lave en 1×1 tabel med cellpadding rundt om det:

Multiplikationstabel
×	1	2	3
1	1	2	3
2	2	4	6

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

tekst i en kasse

tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Sætte kolonnebredde

Hvis du ønsker at tvinge kolonnebredden til en bestemt størrelse frem for bare at acceptere, at kolonnebredden indstilles efter det bredeste tekstelement i kolonnens celler, så følg dette eksempel. Bemærk at fastsættelse af kolonnebredden medfører tvungen tekstombrydning.

{| border="1" cellpadding="2"
!width="50"|Navn
!width="225"|Effekt
!width="225"|Spil findes i
|-
|Pokeball
|Almindelig Pokeball
|Alle versioner
|-
|Great Ball
|Bedre end Pokeball
|Alle versioner
|}

Navn Effekt Spil findes i

Pokeball Almindelig Pokeball Alle versioner

Great Ball Bedre end Pokeball Alle versioner

Sætte parametre

Parametre tilføjes i begyndelsen af en celle, efterfulgt af en enkelt pipe. For eksempel vil width=300px| sætte cellens bredde til 300 pixels. Hvis du vil sætte mere end én parameter skal parametrene adskilles af et mellemrum. Husk, at der skal være et mellemrum før den første parameter, da den ellers vil blive ignoreret.

Wikikode

{|
|-
| bgcolor=red|celle1 || width=300px bgcolor=blue|celle2 || bgcolor=green|celle3
|}

Hvordan det ser ud i browseren

celle1 celle2 celle3

Sætte decimaltal rigtigt over hinanden

Tabeller kan bruges til at justere kolonner af decimaltal, så kommaerne kommer til at stå over hinanden. Et eksempel:

<blockquote>
{| cellpadding=0 cellspacing=0
|align=right| 432 || . || 1
|-
|align=right| 43 || . || 21
|-
|align=right| 4 || . || 321
|}
</blockquote>

giver

432 . 1

43 . 21

4 . 321

I simple tilfælde kan man springe tabellen over og blot starte linierne med mellemrum, og så bruge et passende antal mellemrum til at justere tallene ind i forhold til hinanden:

432.1
 43.21
  4.321

Stilskabeloner

Nogle brugere har lavet skabeloner, der gør det nemmere at lave tabeller med et bestemt udseende. I stedet for at huske tabelparametrene skal du blot indføre den ønskede stilskabelon efter {|. Denne metode gør det nemmere at lave en ensartet tabelformattering, og giver mulighed for ved en enkelt redigering af skabelonen at rette en fejl ved eller forbedre udseendet af alle tabeller, der bruger skabelonen. Eksempelvis bliver dette:

Multiplikationstabel
×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

til dette:

Multiplikationstabel
×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

blot ved at erstatte border="1" cellpadding="2" med {{prettytable}}, fordi Skabelon:Prettytable indeholder følgende stilparametre (på denne wiki):

border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse;"

.

Alle sådanne skabeloner bør samles her i dette afsnit.

Galleri

Som et biprodukt af billedgallerifunktionen kan man lave en simpel tabel med gallery-tagget. Bemærk, at hvis et punkt indeholder et link vil det blive ignoreret. Er det nødvendigt med links må man lave en tabel efter de ovenfor beskrevne metoder.

<gallery>
Drenthe
Flevoland
Friesland
Gelderland
Groningen
Limburg
North Brabant (capital: [[Den Bosch]]) 
North Holland
Overijssel
South Holland
Utrecht
Zeeland
</gallery>

giver:

Navn	Effekt	Spil findes i
Pokeball	Almindelig Pokeball	Alle versioner
Great Ball	Bedre end Pokeball	Alle versioner