Hjelp:Tabeller

Bruke Wikipedia

Guider
Utforske Wikipedia
Hvordan søke
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
Hvordan redigere på Wikidata
Introduksjon på bokmål
Omvisning
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 hjelpen på MediaWiki.

Koden

{|	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 attributten 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 loddrett strek (|) som en del av innholdet i en celle bruk <nowiki>|</nowiki>

Grunnleggende koding

Bruke verktøylinja

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

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

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"

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

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

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 linjeskiftparameteren |- . 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

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

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

Du kan slå sammen celler over flere kolonner ved hjelp av parameteren 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 parameteren 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

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.

• {{Sorter}} for å legge inn skjulte sorteringsnøkler
• {{Sorterbar dato}} og {{sd}} brukes for å sortere datoer
• {{Sorterbart tall}} og {{st}} for å sortere tall
• {{Sorterbart navn}} og {{SortNavn}} for å sortere navn

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

Bredde og høyde

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

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

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

Skjul/vis tabell

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

Kode	Slik ser det ut
{| class="mw-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 parameteren "collapsed". Du kan også velge å legge til parameteren autocollapse, tabellen skjules da bare når det er 3 andre skjulbare tabeller på siden.

Kode	Slik ser det ut
{| class="mw-collapsible mw-collapsed" border="1" |- ! Overskrift |- | Innholdet vises først |- | når du trykker "Vis" |}	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 mw-collapsible".

Kode	Slik ser det ut
{| class="sortable mw-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 parameteren "collapsed" (slik: {| class="sortable mw-collapsible mw-collapsed")

Se også

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