Hjælp:Tabeller
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 | α | {| bgcolor=#ABCDEF border=2 |indlejret |- |tabel |} |den oprindelige tabel igen |}
giver en 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:
- 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
[redigér]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>celle1 |
| 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 |
| ||||||||
<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 |
| ||||||||
<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
{|
ogparametre
, 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.
× | 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):
× | 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å):
× | 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:
|
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 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:
× | 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:
× | 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: