Hjælp:Tabeller

Fra Wikisource, det frie bibliotek

Pipe-syntaks[redigér]

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[redigér]

Simpelt eksempel[redigér]

{| 
| 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[redigér]

Kildekode[redigér]

{| border="1" cellpadding="2"
|+Multiplikationstabel
|-
! × !! 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[redigér]

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[redigér]

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[redigér]

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[redigér]

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[redigér]

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[redigér]

{| 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[redigér]

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[redigér]

{| 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 3, række 2

Bemærk den flydende tabel til højre.


Indlejret tabel[redigér]

{| 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[redigér]

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

  1. XHTML
  2. 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[redigér]

Sammenligning af tabelsyntaks
 XHTML HTML & Wiki-td Wiki-pipe
Tabel <table></table> <table></table>
{| parametre 
|}
Overskrift <caption></caption> <caption></caption>
|+ overskrift
Række <tr></tr> <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></th> <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[redigér]

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[redigér]

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[redigér]

<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[redigér]

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[redigér]

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[redigér]

(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[redigér]

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[redigér]

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[redigér]

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[redigér]

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

Hvordan det ser ud i browseren[redigér]

celle1 celle2 celle3

Sætte decimaltal rigtigt over hinanden[redigér]

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[redigér]

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[redigér]

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: