Hjelp:Tabeller

Fra Wikipedia, den frie encyklopedi
Gå til: navigasjon, søk
Bruke Wikipedia
Guider
Utforske Wikipedia
Hvordan søke
Bruk av Gå-knappen
Hvordan bruke diskusjonssiden
Se siste endringer
Se relaterte endringer
Hvordan logge inn
Endre personlige innstillinger
Redigere Wikipedia
Hvordan redigere en side
Hvordan starte en artikkel
Kategorisering av artikler
Interwikilenker
Opprettelse av maler
Hvordan laste opp bilder
Hvordan bruke bilder
Hvordan bruke tabeller
Omdirigere en side
Flytte en side
Hvordan tilbakestille artikler
Hvordan slette en side
Flertydige sider
Lenke til søsterprosjekter
Hvordan redigere forsiden
Hvordan skrive bedre artikler
Bruk av maler
Wikipedia:Stilmanual
Hjelp:Maler

På denne siden kan du lære det grunnleggende om hvordan man bruker tabeller på Wikipedia. For mer avansert hjelp, kan du se den engelske m:MediaWiki_User's_Guide:_Using_tables, fra Meta.

Koden[rediger | rediger kilde]

{| tabell start
|+ tabelloverskrift, valgfri; plasseres mellom tabell start og første tabellrad
|- tabellrad, valgfri for første rad -- wikiprogramvaren tar den for gitt for første rad
! kolonneoverskrift celle, valgfri. Flere kolonneoverskrifter kan legges til på samme kodelinje separert med doble utropstegn (!!) eller starte på en ny kodelinje som begynner med ett enkelt utropstegn (!).
| tabelldata celle, obligatorisk! Flere celler med tabelldata kan legges til på samme kodelinje separert med doble lodrette linjer (||) eller starte på en ny kodelinje som begynner med en enkel lodrett strek (|).
|} tabell slutt
  • Tegnene over må begynne på en ny linje, med unntak av doble || og !!, som brukes for å sette flere påfølgende celler på en kodelinje.
  • XHTML attributter. Alle tegnene, med unntak av tabell slutt ( |} ) godtar én eller flere XHTML attributter. Attributtene må være på samme linje som tegnet. Separer attributter fra hverandre med et enkelt mellomrom.
    • Celler og overskrifter (| eller ||, ! eller !! og |+) har innhold. Separer derfor attributter fra innhold med en enkel loddrett linje (|). Innholdet i celler kan følge på samme linje eller på en ny linje.
    • Tabellstart- og radtegn ({| og |-) har ikke innhold direkte. Legg derfor ikke til loddrett strek (|) etter deres valgfrie attributter. En feilaktig plassert loddrett strek her vil slettes av programvaren sammen med den siste atributten dersom den er i kontakt med det feilaktige tegnet.
  • Innhold kan (a) følge celletegnet på samme linje etter eventuelt valgfrie attributter eller (b) på linjer under celletegnet. Innhold som bruker wikiformatering som selv må begynne på en ny linje, som lister, overskrifter eller flettede tabeller, må være på en egen linje.
    • Lodrett strek som innhold. For å sette inn en lodrett strek (|) som en del av innholdet i en celle bruk <nowiki>|</nowiki>

Grunnleggende koding[rediger | rediger kilde]

Bruke verktøylinja[rediger | rediger kilde]

For nybegynnere kan det være greit å bruke tabellknappen på verktøylinjen i redigeringsvinduet:

Tabell



Et trykk på denne setter inn en standardtabell på 3 x 3 celler der den første raden er en overskriftsrad:

Kode   Slik ser det ut
{| class="wikitable" border="1"
|-
! overskrift 1
! overskrift 2
! overskrift 3
|-
| rad 1, celle 1
| rad 1, celle 2
| rad 1, celle 3
|-
| rad 2, celle 1
| rad 2, celle 2
| rad 2, celle 3
|}
 
overskrift 1 overskrift 2 overskrift 3
rad 1, celle 1 rad 1, celle 2 rad 1, celle 3
rad 2, celle 1 rad 2, celle 2 rad 2, celle 3

Enkel kode[rediger | rediger kilde]

Den følgende tabellen mangler kantlinjer, men viser den enkleste strukturen i wikikoden for tabeller:

Kode Slik ser det ut
{|
|Appelsin
|Eple
|-
|Brød
|Pai
|-
|Smør
|Italiensk salat
|}
Banan Eple
Brød Pai
Smør Italiensk salat

Cellene på samme rad kan listes på en kodelinje separert av || (to lodrette linjer). Hvis teksten i en celle inneholder et linjeskift, bruk <br />.

Kode Slik ser det ut
{| align="left"
|Banan||Eple||mer
|-
|Brød||Pai||mer
|-
|Smør||Italiensk<br />salat||og<br />mer
|}
Banan Eple mer
Brød Pai mer
Smør Italiensk
salat
og
mer

Ekstra mellomrom mellom tabelltegnene vil ikke påvirke utseendet på tabellen:

Kode Slik ser det ut
{|
|  Banan  ||   Eple    ||   mer
|-
|  Brød   ||   Pai    ||   mer
|-
|  Smør    || Italiensk salat ||  og mer
|}
Banan Eple mer
Brød Pai mer
Smør Italiensk salat og mer

Du kan ha lenger tekst eller mer avansert wikisyntaks i celler også:

Kode Slik ser det ut
{|
|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
|}
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

Kolonneoverskrift[rediger | rediger kilde]

Du kan sette kolonneoverskrifter ved å bruke "!" (utropstegn) istedet for "|" (lodrett strek). Kolonneoverskrifter vises med fet type og er sentrert i kolonnen.

Kode Slik ser det ut
{|
! Vare
! Antall
! Pris
|-
|Banan
|10
|7,00
|-
|Brød
|4
|3,00
|-
|Smør
|1
|5,00
|-
!Total
|
|15,00
|}
Vare Antall Pris
Banan 10 7,00
Brød 4 3,00
Smør 1 5,00
Total 15,00

class="wikitable"[rediger | rediger kilde]

En standardformatert tabell (lys grå bakgrunn, kantlinjer og venstrejustering) oppnås ved å legge til class="wikitable" etter tabellstartkoden:

Kode Slik ser det ut
{| class="wikitable"
! Vare
! Antall
! Pris
|-
|Banan
|10
|7,00
|-
|Brød
|4
|3,00
|-
|Smør
|1
|5,00
|-
!Total
|
|15,00
|}
Vare Antall Pris
Banan 10 7,00
Brød 4 3,00
Smør 1 5,00
Total 15,00

Tabelloverskrift[rediger | rediger kilde]

Du gir tabellen en overskrift ved å legge til "|+" på linjen mellom tabellstart og første tabellrad:

Kode Slik ser det ut
{| class="wikitable"
|+ Kassalapp
! Vare
! Antall
! Pris
|-
|Banan
|10
|7,00
|-
|Brød
|4
|3,00
|-
|Smør
|1
|5,00
|-
!Total
|
|15,00
|}
Kassalapp
Vare Antall Pris
Banan 10 7,00
Brød 4 3,00
Smør 1 5,00
Total 15,00

Mer avansert koding[rediger | rediger kilde]

Du kan sette parametre for enkeltceller, rader av celler eller for hele tabellen. Om du ønsker en egenskap for hele tabellen plasserer du den etter {| i begynnelsen av tabellen. Skal det gjelde for raden må det plasseres etter linjeskiftparameteret |- . Skal det kun gjelde for én celle plasseres det mellom to piper |...| rett før aktuelle celle. Husk at egenskaper for enkeltceller overstyrer egenskaper for raden og egenskaper for rad overstyrer egenskaper satt for hele tabellen. La oss se hvordan det fungerer i neste avsnitt.

Horisontal tekstplassering[rediger | rediger kilde]

Dersom ingen parametre blir satt blir innholdet i cellene venstrejustert. I eksemplet under skal vi midtstille teksten i hele tabellen, overstyre dette ved å venstrejustere teksten i rad 2 og overstyre dette igjen ved å høyrejustere teksten i rad 2 celle 2:

Kode Slik ser det ut
{| style="text-align: center;" border="1"
|- 
|
! Kolonne 1
! Kolonne 2
|- 
! Rad 1
| abc
| def
|- style="text-align: left;"
! Rad 2
| ghi
| style="text-align: right;" | jkl
|}
Kolonne 1 Kolonne 2
Rad 1 abc def
Rad 2 ghi jkl

Vertikal justering i celler[rediger | rediger kilde]

Standardinnstillingen for vertikal justering i celler er midtstilt, noe som kan resultere i merkelig utseende tabeller som dette:

Radoverskrift Et lengre stykke tekst. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. kort tekst
Radoverskrift Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tenk deg når noen scroller nedover siden og bare ser toppen av "tomme" kolonner. Bruk "valign=top" for å justere teksten til toppen av kolonnen.
kort tekst

For å rette på dette pruker du parameteret valign="top" på radene (dessverre ser det ut til at det er nødvendig å bruke dette på hver enkelt rad).

Kode Slik ser det ut
{| border="1" cellpadding="2" width="400"
|- valign="top"
! scope="row" width="10%" | Radoverskrift
| width="70%" | Et lengre stykke tekst. Lorem ipsum...
| width="20%" | kort tekst
|- valign="top"
! scope="row" | Radoverskrift
| Excepteur sint occaecat...
| kort tekst
|}
Radoverskrift Et lengre stykke tekst. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. kort tekst
Radoverskrift Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tenk deg når noen scroller nedover siden og bare ser toppen av "tomme" kolonner. Bruk "valign=top" for å justere teksten til toppen av kolonnen.
kort tekst

Slå sammen celler[rediger | rediger kilde]

Du kan slå sammen celler over flere kolonner ved hjelp av parameteret colspan="x" hvor x er antallet kolonner.

Kode Slik ser det ut
{| style="text-align:center" border="1" cellpadding="5"
|-
|Kolonne 1 || Kolonne 2 || Kolonne 3
|-
| 1 || colspan="2" | 2 og 3
|}
Kolonne 1 Kolonne 2 Kolonne 3
1 2 og 3

Vil du slå sammen celler over flere rader bruker du parametret rowspan="x".

Kode Slik ser det ut
{| style="text-align:center" border="1" cellpadding="5"
|-
| Rad 1 || 1
|-
| Rad 2 || rowspan="2" | 2 og 3
|-
| Rad 3
|}
Rad 1 1
Rad 2 2 og 3
Rad 3

Du kan også kombinere disse til mer avanserte tabeller:

Kode Slik ser det ut
{| border="1" cellpadding="5" 
|-
| Kolonne 1 
| Kolonne 2 
| Kolonne 3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C <!-- Kolonne 1 opptatt av celle A -->
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" |F
|-
| G <!-- Kolonne 2+3 opptatt av celle F -->
|-
| colspan="3" style="text-align: center;" | H
|}
Kolonne 1 Kolonne 2 Kolonne 3
A B
C D
E F
G
H

Sortering[rediger | rediger kilde]

Tabeller kan gjøres sorterbare ved å legge til class="sortable" i første linje (etter {|), eller class="wikitable sortable" dersom du vil bruke Wikipedias standardformatering av tabeller. Innholdet i en kolonne kan da sorteres ved hjelp av pilene som dukker opp etter kolonneoverskriften.

Siden dette kan være svært nyttig er det viktig å ha muligheter og begrensninger for dette valget i bakhodet når man skal lage tabeller. For eksempel:

  • Ikke del inn tabellen i seksjoner med underoverskrifter som går over flere rader. Lag heller en ekstra kolonne som viser innholdet i disse overskriftene i kortform.
  • Ikke ha elementer som spenner over flere kolonner
  • I en kolonne som inneholder tall kan du ikke skrive tekst (som f.eks. "ca" eller "kg") eller andre tegn (som "+" eller "$") før eller etter tallet. Dette ødelegger for numerisk sortering. Bruk heller skjulte sorteringsnøkler (se lenger ned).
Kode Slik ser det ut
{| class="wikitable sortable" border="1"
|+ Sorterbar tabell
|-
! scope="col" | Alfabetisk
! scope="col" | Numerisk
! scope="col" class="unsortable" | Ikke sorterbar
|-
| d || 20 || Denne 
|-
| b || 8 || kolonnen
|-
| a || 6 || kan
|-
| c || 4 || ikke
|-
| e || 0 || sorteres.
|}
Sorterbar tabell
Alfabetisk Numerisk Ikke sorterbar
d 20 Denne
b 8 kolonnen
a 6 kan
c 4 ikke
e 0 sorteres.

Legg merke til at i kolonnen til høyre er sorteringsmuligheten fjernet ved å legge til class="unsortable" før kolonneoverskriften.

Sorteringsnøkler

Noen verdier kan være vanskelige å sortere. Dette kan være datoer, verdier som går over ett spenn (100-200), verdier med benevning (100 kg) eller navnelister som skal sorteres på etternavn. Da kan du legge inn skjulte sorteringsnøkler, verdier som det skal sorteres etter, men som ikke vises i tabellen. Dette gjøres ved hjelp av sorteringsmaler. Her følger en liste over sorteringsmaler, klikk på navnet for å få utfyllende informasjon om hvordan de brukes.

Kode

{| class="sortable" border="1"
|+ Sorteringseksempler
|-
! Navn<br />uten nøkkel !! Navn<br />med nøkkel
|-
| [[Hans Anton Ålien]] || {{SortNavn|Hans Anton|Ålien}}
|-
| [[Marianne Fredbo]]|| {{SortNavn|Marianne|Fredbo}}
|-
| [[Roger Aandalen]] || {{SortNavn|Roger|Aandalen||Åndalen, Roger}}
|- 
| [[Andreas Strand (svømmer)|Andreas Strand]] || {{SortNavn|Andreas|Strand|Andreas Strand (svømmer)}}
|}

Slik ser det ut

Sorteringseksempler
Navn
uten nøkkel
Navn
med nøkkel
Hans Anton Ålien Ålien, Hans AntonHans Anton Ålien
Marianne Fredbo Fredbo, MarianneMarianne Fredbo
Roger Aandalen Åndalen, RogerRoger Aandalen
Andreas Strand Strand, AndreasAndreas Strand

Formatering av utseende[rediger | rediger kilde]

Bredde og høyde[rediger | rediger kilde]

I utgangspunktet blir størrelsen på tabellen bestemt av innholdet i cellene.

Lite innhold
gir liten tabell

og

mye innhold i cellene
gir en større tabell

Det går allikevel an å tilpasse størrelsen dersom dette er ønskelig.

Ønsker du å angi størrelsen på hele tabellen gjøres dette slik (merk at størrelsen kan oppgis enden i prosent eller piksler):

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

Dette vil da se slik ut i nettleseren:

abc def ghi
jkl mno pqr
stu vwx yz

I tillegg kan du endre bredden på bestemte kolonner. Endrer du kolonnebredden i en hvilken som helst rad vil dette endre bredden på kolonnen i alle radene.

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

Dette vil se slik ut:

abc def ghi
jkl mno pqr
stu vwx yz

Merk at når du bruker prosent for å angi høyde eller bredde for hele tabellen (etter {|) oppgir du størrelse i prosent av nettsiden (minus navigasjonskolonnen til venstre), mens høyde på rad (etter |-) eller kolonnebredde (mellom | og |) er forholdet mellom raden/kolonnen og resten av tabellen. Å angi radhøyde i prosent vil dessuten bare fungere om du har oppgitt høyde for hele tabellen.

{| style="width:50%; height:100px" border="1"
|-
| colspan="2" | Tabellen dekker 50% av nettsiden
|-
| style="width:50%" | 50% av tabellbredden || er 25 % av nettsiden
|- style="height: 50%;"
| colspan="2" | 50% av tabellhøyden
|}
Tabellen dekker 50% av nettsiden
50% av tabellbredden er 25 % av nettsiden
50% av tabellhøyden

Rammer[rediger | rediger kilde]

Tabellrammene er satt til en en skyggelagt dobbellinje (default i HTML). Disse rammene kan settes til en tynnere enkeltlinje ved å bruke et style-parameter (style="border: 1px solid darkgray"), som i følgende eksempel (Merk: hvis du skal bruke 'cellpadding' or 'cellspacing' kombinert med ramme MÅ du bruke dette formatet):

Kode Slik ser det ut
{| cellpadding="2" style="border: 1px solid darkgray;"
! width="140" | Venstre
! width="150" | Senter
! width="130" | Høyre
|- border="0"
| [[Fil:StarIconBronze.png|120px]]
| [[Fil:StarIconGold.png|120px|Tekst ved mouse-over]]
| [[Fil:StarIconGreen.png|120px|Grønt stjerneikon]]
|- align="center"
| Bronsestjerne || Gullstjerne || Grønn stjerne
|}
Venstre Senter Høyre
StarIconBronze.png Tekst ved mouse-over Grønt stjerneikon
Bronsestjerne Gullstjerne Grønn stjerne

Merk at teksten i nederste rad er sentrert ved hjelp av align="center" mens bildecellene ikke er sentrert.

Rammefargen "darkgray" er typisk den som brukes i tabeller eller infobokser i artikler, men den kan erstattes med et hvilket som helst fargenavn (som style="border: 1px solid darkgreen;") eller du kan bruke en hex-farge (som #DDCCBB).

Du kan også sette egenskaper (mellom |og|) for hver enkelt celle: Kode

{| cellpadding="2" style="border: 1px solid darkgray;"
! width="140" | Venstre
! width="150" | Senter
! width="130" | Høyre
|- align="center"
| style="border: 1px solid blue;"| [[Fil:StarIconBronze.png|120px]]
| style="border: 1px solid #777777;"| [[Fil:StarIconGold.png|120px|Tekst ved mouse-over]]
| style="border: 1px solid #22AA55;"| [[Fil:StarIconGreen.png|120px|Grønt stjerneikon]]
|- align="center"
| Bronsestjerne || Gullstjerne || Grønn stjerne
|}

Slik ser det ut

Venstre Senter Høyre
StarIconBronze.png Tekst ved mouse-over Grønt stjerneikon
Bronsestjerne Gullstjerne Grønn stjerne

Merk at kun bildecellene har individuelle rammer, ikke teksten. Legg også merke til at bildene nå er midtstilt med 'align="center"' slik at bildeteksten kommer midt under bildene.

De lavere hex-fargene (som #616161) er nærmere svart. Helst bør alle rammene i en tabell ha samme farge.

Farger[rediger | rediger kilde]

Fargeverdier kan oppgis ved hjelp av fargenavn (for eksempel "sienna" eller ved hjelp av hex-farger (for eksempel "#A0522D"). Se Webfarger (sortert etter farge) for godkjente fargenavn og Webfarger (websikker) for en liste over websikre hex-farger.

Du kan endre tekstfarge, bakgrunnsfarge eller begge deler på en av to følgende måter:

Kode Slik ser det ut
{| border="1"
|- <!-- Metode 1 -->
| style="background: cyan" | abc
| def
| style="color: blue" | ghi
| jkl
| style="background: red; color: white" | mno
| pqr
|- <!-- Metode 2 -->
| bgcolor="cyan" | abc
| def
| <span style="color:blue;"> ghi </span>
| jkl
| bgcolor="red" | <span style="color:white;"> mno </span>
| pqr
|}
abc def ghi jkl mno pqr
abc def ghi jkl mno pqr

Som med andre parametre kan farger også settes for en hel rad eller for hele tabellen. Parametre for en rad overstyrer verdien for tabellen, parametre for en celle overstyrer verdien for en rad. (Merk at det ikke er noen lettvint måte å sette parametre for en kolonne - hver celle i kolonnen må spesifiseres individuelt.)

Kode Slik ser det ut
{| style="background: yellow; color: green"
|-
| stu || style="background: silver" | vwx || yz
|- style="background: red; color: white"
| stu || style="background: silver" | vwx || yz
|-
| stu || style="background: silver" | vwx || yz
|}
stu vwx yz
stu vwx yz
stu vwx yz

For å få tabellen til å gå i ett bed bakgrunnen bruker du style="background: none;" eller style="background: transparent;".

For at en celle skal se ut som tabeller med formatet class="wikitable", bruk style="background: #f2f2f2" for den mørkere overskriftsraden og style="background: #f9f9f9" for resten av tabellen.

Se også Webfarger for mer om fargebruk.

Avanserte funksjoner[rediger | rediger kilde]

Skjul/vis tabell[rediger | rediger kilde]

Du kan lage tabeller som kan skjules ved å legge til class="collapsible" i første linje av tabellen (etter {|). Denne kan kombineres med class="wikitable" ved å skrive class="wikitable collapsible".

Kode Slik ser det ut
{| class="collapsible" border="1"
|-
! Overskrift
|-
| Skjul innholdet med lenken
|-
| ved siden av overskriften
|}
Overskrift
Skjul innholdet med lenken
ved siden av overskriften

Standard innstilling for denne funksjonen er at tabellen vises når siden åpnes. Du kan endre dette ved å legge til parameteret "collapsed". Du kan også velge å legge til parameteret autocollapse, tabellen skjules da bare når det er 3 andre skjulbare tabeller på siden.

Kode Slik ser det ut
{| class="collapsible collapsed" border="1"
|-
! Overskrift
|-
| Innholdet vises først
|-
| når du trykker "Vis"
|}

Du kan også lage skjulbare tabeller som er sorterbare. Dette gjør du ved å skrive class="sortable collapsible".

Kode Slik ser det ut
{| class="sortable collapsible" border="1"
|+ Sorterbar og skjulbar tabell
|-
! scope="col" | Alfabetisk
! scope="col" | Numerisk
! scope="col" class="unsortable" | Ikke sorterbar
|-
| d || 20 || Denne
|-
| b || 8 || kolonnen
|-
| a || 6 || kan
|-
| c || 4 || ikke
|-
| e || 0 || sorteres
|}
Sorterbar og skjulbar tabell
Alfabetisk Numerisk Ikke sorterbar
d 20 Denne
b 8 kolonnen
a 6 kan
c 4 ikke
e 0 sorteres

Igjen, hvis du vil at tabellen skal være skjult når du åpner siden bruker du parameteret "collapsed" (slik: {| class="sortable collapsible collapsed")

Se også[rediger | rediger kilde]

For en mer utfyllende brukermanual for tabeller, se den engelske Help:Table.