Manual

Tabeller är ett verktyg för att komplettera artiklar med information som inte lämpar sig att skrivas i löpande text. Denna artikel beskriver hur tabeller utformas, och även när de är lämpliga att använda.

När tabeller bör användas redigera

Tabeller kan med fördel användas i artiklar för att göra en stor mängd information mer lättöverskådlig. En tabell kan i många fall ställa upp information på ett sätt som gör den lättare att uppfatta än om den skulle skrivas i löpande text.

En generell regel är dock att undvika använda tabeller så länge de inte verkligen behövs. Detta eftersom tabeller ofta gör redigering svårare för ovana användare. En lista kan vara ett bättre alternativ till exempel om tabellen bara ska innehålla en eller två kolumner. En fördel med tabeller är å andra sidan, att de kan ställas in så, att läsaren kan sortera om dem i enlighet med de olika kolumnerna (till exempel Land – alfabetiskt, eller Folkmängd – störst först), så som läsaren vill se informationen vid ett visst tillfälle, medan en lista bara visas i den ordningen, som den skrivits in.

Tabeller används även ibland för bildgallerier, när bilderna behöver kunna justeras exakt i storlek.

Wikikod redigera

Grunder redigera

För att skapa en tabell behöver man först förstå grunden i hur en tabell är uppbyggd. Delarna i en tabell är:

  • Titel – En rubrik ovanför tabellen
  • Rader – De horisontella delarna i en tabell
  • Kolumner – De vertikala delarna i en tabell
  • Celler – Vad som blir där en rad och en kolumn möts
  • Rubrikceller – En speciell typ av celler som fungerar som rubriker för att förklara innehållet i en kolumn eller rad

Endast tre av dem är nödvändiga:

  • Rader
  • Kolumner
  • Celler

En klurig sak när man skapar tabeller är att alla rader måste ha lika många kolumner. Om man vill ha en annan layout, kan det dock lösas genom att ge en cell attributet colspan med ett värde motsvarande antalet kolumner den ska ta upp, men mer om det längre ner.

Användning redigera

För att starta en tabell med wikisyntax skriver man {| och för att avsluta den skriver man |}. Båda dessa måste skrivas på nya rader, annars vet inte wikisyntaxtolken hur den ska tolka koden och det blir fel.

För att starta en ny rad i en tabell med wikisyntax använder man sig av |-. Detta behövs dock inte på den första raden då wikisyntaxtolken själv förstår att det ska vara en ny rad där. Även denna måste placeras på en ny rad.

För att skapa en cell eller kolumn skriver man | om man gör det på en ny rad. Om den istället skrivs på samma rad som en annan cell skriver man ||.

Att skapa rubrikceller liknar sättet att skapa vanliga celler, men i stället för | använder man sig av !. En rubrikcell som kommer efter en annan cell, på samma rad i koden, inleds med !!.

När man ger en tabell ett attribut med ett värde så skriver man dessa direkt efter och på samma rad som {|, dvs {| class="wikitable" style="float: right;" för att skapa en tabell som är formaterad efter standarden för Wikipediatabeller och som i desktopvyn lägger sig till höger. För mer information om style-attributen, se Cascading Style Sheets.

En titelrubrik, som normalt visas centrerad över tabellen, kan anges. Detta görs på en ny rad nedanför {|, med syntaxen |+ (lodrätt streck och plustecken).

Enkel tabell redigera

Nedan följer ett exempel på en tabell med grundläggande egenskaper. Exemplet visar båda de sätt på vilket man kan avdela celler. Vilket sätt som är lämpligast att använda väljer man själv.

Exempel redigera

Wikikod (lodrätt upplägg): Wikikod (vågrätt upplägg):
{| class="wikitable"
|+Titel
|-
! Rubrik för kolumn 1
! Rubrik för kolumn 2
! Rubrik för kolumn 3
|-
| Cell på rad 1 under kolumn 1
| Cell på rad 1 under kolumn 2
| Cell på rad 1 under kolumn 3
|-
| Cell på rad 2 under kolumn 1
| Cell på rad 2 under kolumn 2
| Cell på rad 2 under kolumn 3
|}
{| class="wikitable"
|+Titel
|-
! Rubrik för kolumn 1 !! Rubrik för kolumn 2 !! Rubrik för kolumn 3
|-
| Cell på rad 1 under kolumn 1 || Cell på rad 1 under kolumn 2 || Cell på rad 1 under kolumn 3
|-
| Cell på rad 2 under kolumn 1 || Cell på rad 2 under kolumn 2 || Cell på rad 2 under kolumn 3
|}

Resultat:

Titel
Rubrik för kolumn 1 Rubrik för kolumn 2 Rubrik för kolumn 3
Cell på rad 1 under kolumn 1 Cell på rad 1 under kolumn 2 Cell på rad 1 under kolumn 3
Cell på rad 2 under kolumn 1 Cell på rad 2 under kolumn 2 Cell på rad 2 under kolumn 3

Tabell med celler av varierande storlek redigera

Ibland kan det vara önskvärt att vissa celler i en tabell upptar flera rader eller kolumner. Detta kan på ett relativt enkelt sätt åstadkommas genom att skriva in parametrar på de berörda cellernas rader. Om man vill att en cell ska ta upp mer än en rad skriver man in rowspan= "x", där x är en siffra som anger det antal rader som cellen ska uppta. Vill man att en cell ska ta upp mer än en kolumn skriver man in colspan= "x" där x är en siffra som anger hur många kolumner cellen ska uppta. Efter dessa parametrar måste man avdela med ett | innan man skriver tabellens innehåll, samma tecken används även i rubrikceller.

När man använder dessa parametrar är det viktigt att tänka på att inte skriva något på raderna för de celler som ersätts av dem som har en annan storlek. Om man exempelvis använder en cell som tar upp två kolumner ska man alltså inte skriva något på raden för cellen till höger om denna. På samma sätt ska man om man använder en cell som tar upp två rader inte skriva något på raden för cellen under denna.

Exempel redigera

Wikikod (lodrätt upplägg): Wikikod (vågrätt upplägg):
{| class="wikitable"
! Rubrik för kolumn 1
! colspan= "2" | Rubrik som upptar två kolumner (kolumn 2–3)
|-
| colspan= "2" | Cell som tar upp två kolumner (kolumn 1–2)
| rowspan= "3" | Cell som tar upp tre rader (rad 1–3)
|-
| Cell på rad 2 under kolumn 1
| Cell på rad 2 under kolumn 2
|-
| Cell på rad 3 under kolumn 1
| Cell på rad 3 under kolumn 2
|}
{| class="wikitable"
! Rubrik för kolumn 1 !! colspan= "2" | Rubrik som upptar två kolumner (kolumn 2–3)
|-
| colspan= "2" | Cell som tar upp två kolumner (kolumn 1–2) || rowspan= "3" | Cell som tar upp tre rader (rad 1–3)
|-
| Cell på rad 2 under kolumn 1 || Cell på rad 2 under kolumn 2
|-
| Cell på rad 3 under kolumn 1 || Cell på rad 3 under kolumn 2
|}

Resultat:

Rubrik för kolumn 1 Rubrik som upptar två kolumner (kolumn 2–3)
Cell som tar upp två kolumner (kolumn 1–2) Cell som tar upp tre rader (rad 1–3)
Cell på rad 2 under kolumn 1 Cell på rad 2 under kolumn 2
Cell på rad 3 under kolumn 1 Cell på rad 3 under kolumn 2

Tabeller med celler i olika stilar redigera

För att anpassa tabeller efter vad man vill använda dem till kan man ge celler olika stilar. Exempel på sådant är var i cellen man vill att texten ska stå, cellens storlek, och speciell bakgrunds- eller textfärg i cellen.

För att ge en cell en stil skriver man vid cellens start style="x: y;", där x är vilken stilegenskap man vill påverka och y det önskade värdet för denna. Flera stilegenskaper kan anges efter style=. Dessa skall då vara åtskilda av semikolon och stå inom samma citationstecken, alltså style="x1: y1; x2: y2; xn: yn;". Mellan detta och cellinnehållet sätter man ett avgränsande |. Exempel:

| style="width: 6em; background: #f8f9fa; font-weight: bold;" | exempelinnehåll

Om man ändrar bredden på en cell kommer hela kolumnen att få samma bredd, och ändrar man höjden på en cell kommer hela raden att den inställda höjden.

Färger kan skrivas in antingen som text, exempelvis "blue" eller som HTML-färger med nummertecken före, exempelvis "#0000ff".

På samma sätt som i föregående exempel måste man avdela med ett | innan man skriver tabellens innehåll.

Nedan följer ett exempel på en tabell som innehåller celler med olika stilar. Vissa av cellerna har flera stil-parametrar, och även varierande storlek, för att beskriva hur man kombinerar olika parametrar.

Exempel redigera

Wikikod:

{| class="wikitable"
! Rubrik 1
! Rubrik 2
! Rubrik 3
|-
| style="color: purple;" | Cell med lila textfärg
| style="background-color: yellow;" | Cell med gul bakgrundsfärg
| style="color: purple; background-color: yellow;" | Cell med lila text och gul bakgrund
|-
| style="text-align: center;" | Centrerad text
| style="text-align: right;" | Högerjusterad text
| rowspan= "2" style="text-align: center; vertical-align: bottom;" | Centrerad i botten
|-
| colspan= "2" style="text-align: center; color: purple;" | Centrerad lila text
|-
| colspan= "2" style="height: 70px"| Ruta med inställd höjd 
| style="width: 400px;" | Ruta med inställd bredd
|}

Resultat:

Rubrik 1 Rubrik 2 Rubrik 3
Cell med lila textfärg Cell med gul bakgrundsfärg Cell med lila text och gul bakgrund
Centrerad text Högerjusterad text Centrerad i botten
Centrerad lila text
Ruta med inställd höjd Ruta med inställd bredd

Sorterbar tabell redigera

Det går att skapa tabeller som är sorterbara efter innehållet i de olika kolumnerna. En sådan skapas enkelt genom att man i tabellstarten skriver class="sortable wikitable".

Man kan undanta en kolumn från sortering, genom att ge dess rubrik klassen unsortable; se exemplet nedan.

Sorteringen sker i numerisk eller alfabetisk ordning. Tills dess att man tryckt på knappen som sorterar, kommer tabellen att visa den ursprungliga ordning i vilken den är skriven. Sorteringsknappen växlar mellan tre lägen: stigande, fallande och ursprunglig ordning.

Nedan följer ett exempel på hur man skapar en sorterbar tabell och hur den sorterar.

Wikikod:

{| class="wikitable sortable"
! Rubrik 1 !! Rubrik 2 !! Rubrik 3 !! Rubrik 4 !! class="unsortable" | Rubrik för icke sorterbar kolumn
|-
| 1
| 2
| 15
| Adam
| 1
|-
| 2
| 13
| 30
| Bertil
| 2
|-
| 3
| 1
| 45
|Ceasar
| 3
|}

Resultat:

Rubrik 1 Rubrik 2 Rubrik 3 Rubrik 4 Rubrik för icke sorterbar kolumn
1 2 45 Adam 1
2 13 15 Bertil 2
3 1 30 Ceasar 3

Styra sorteringsvärden redigera

Mjukvaran väljer automatiskt sortering efter alfabetisk eller numerisk ordning. Det är dock inte alltid detta är önskvärt, och det går att styra på olika vis.

Man kan ange önskat sorteringsvärde för en tabellruta, med attributet data-sort-value

Exempel:

{| class="wikitable sortable"
! Rubrik
|-
| data-sort-value="2" | Andra
|-
| data-sort-value="3" | Tredje
|-
| data-sort-value="1" | Första
|}


Rubrik
Andra
Tredje
Första

Mallen {{Sortering}} använder denna metod och ger samma resultat.

Exempel enligt ovan: | {{sortering|2|Andra}}

Sortering av tal med tusenavgränsare redigera

data-sort-value är den rekommenderade metoden även vid sortering av stora tal med tusentalsavgränsare. Den gör att tabellcellen endast innehåller det presenterade värdet och fortsätter vara läsbar även för datorprogram som t.ex. sökmotorer. Den kan även användas för enstaka celler/rutor utan att störa kolumnens sortering.

Exempel: | data-sort-value="100000" | 100 000

eller med mall: | {{sortering|100000|100 000}}


Ett möjligt alternativ är användning av det magiska ordet {{formatnum: }}. Det lägger här på svwp till   som tusenavgränsare i tabellcellen, men det fungerar tillsammans med sortering och åtminstone mjukvarans egen sökfunktion.

Mallen {{nts}} har länge använts för samtidig formatering av tal med tusenavgränsare och sortering. En nackdel med den metoden är att tabellcellen får en mängd osynlig kod tillagd, vilken hindrar t.ex. sökmotorer att tolka innehållet. En annan nackdel är att alla kolumnens celler måste förses med denna mall för att bibehålla sorteringsordningen, även om bara enstaka behöver den för formateringens skull.

Tabell med statiska radnummer redigera

I tabeller med flera sorterbara kolumner och där man önskar att se rangordningen beroende på vad man sorterat på, t ex de 10 största kommunerna med avseende på folkmängd, yta, befolkningstäthet, kan man använda mallen {{Statiska radnummer}}. Lägg till mallen före den tabell som ska ha automatiska radnummer. Lägg till klassen static-row-numbers i tabellen enligt nedanstående exempel:

{{Statiska radnummer}}
{| class="wikitable sortable static-row-numbers"|

Hopfällbar tabell redigera

En hopfällbar tabell kan skapas om man vill göra det möjligt att dölja en tabell som tar upp mycket plats. Denna skapas enkelt genom att man efter class skriver "wikitable mw-collapsible".

Vill man tvärtom att mallen ska vara dold till dess att man valt att visa den skriver man istället in "wikitable mw-collapsible mw-collapsed".

Nedan visas en tabell som är dold till dess att den visas.

Exempel redigera

Wikikod:

{| class="wikitable mw-collapsible mw-collapsed" style="width: 55%;"
! colspan=3 | Döljbar tabell
|-
! Rubrik 1 !! Rubrik 2 !! Rubrik 3
|-
| Cell på rad 1 under rubrik 1
| Cell på rad 1 under rubrik 2
| Cell på rad 1 under rubrik 3
|-
| Cell på rad 2 under rubrik 1 || Cell på rad 2 under rubrik 2 || Cell på rad 2 under rubrik 3
|}

Resultat:

Döljbar tabell
Rubrik 1 Rubrik 2 Rubrik 3
Cell på rad 1 under rubrik 1 Cell på rad 1 under rubrik 2 Cell på rad 1 under rubrik 3
Cell på rad 2 under rubrik 1 Cell på rad 2 under rubrik 2 Cell på rad 2 under rubrik 3

Förbjudna tecken i celler redigera

Vid fall där tecken såsom lodstreck (|) eller dito ska stå i celler behövs klamrarna <nowiki></nowiki> runt tecknet för att det inte ska reagera med tabellens funktion.

Externa länkar redigera