Hjelp:Tabeller

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

Bruke verktøylinja

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

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

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

Enkel kode

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

{||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 />.

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

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

{||  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å:

{||Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor inviduntut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo doloreset ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsumdolor 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.

{|! 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:

{| class="wikitable"! 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:

{| class="wikitable"|+ 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:

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

Vertikal justering i celler

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

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

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

Slå sammen celler

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

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

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

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

Du kan også kombinere disse til mer avanserte tabeller:

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

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

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

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

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

Bredde og høyde

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

og

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:

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:

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

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:

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

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

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

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.

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

{| class="mw-collapsible" border="1"|-! 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.

{| class="mw-collapsible mw-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 mw-collapsible".

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

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

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