Hjälp:Tabeller

OBS: När du redigerar denna sida samtycker du till att släppa ditt bidrag under CC0. Se hjälpsidorna för Public Domain för mer information.

Tables omdirigerar hit; för information om databasers tabellstrukturer, läs Manual:Database layout .

Tabeller kan skapas i wikisidor, men det är i regel bäst att undvika dem så länge man inte behöver en då tabellmarkering oftast krånglar till redigering.

Sammanfattning av tabellmarkering

{|	tabellbörjan, obligatorisk
|+	tabelltitel, valfri; endast mellan tabellbörjan och tabellrad
|-	tabellrad, valfri på första raden
!	tabellrubrik-cell, valfri. Flera tabellrubrik-celler kan läggas till efter varandra på samma rad genom att särskildas av dubbla markörer (!!) eller börja på en rad, med en markör var (!).
|	tabelldata-cell, valfri. Flera tabelldata-celler kan läggas till efter varandra på samma rad genom att särskildas av dubbla markörer (!!) eller börja på en rad, med en markör var (!).
|}	tabellslut, obligatorisk

• Alla markörer, förutom de dubbla || och !!, måste börja på ny rad för att kunna lägga till celler efter varandra på samma rad. Mellanslag i början av rader ignoreras däremot.
• HTML-attribut. Alla markörer, förutom tabellslut, kan acceptera en eller fler HTML-attribut. Attributen måste vara på samma rad som markören och särskiljas från varandra med ett mellanslag.
  • Celler och titeln (| eller ||, ! eller !!, och |+) har innehåll. Så alla attribut måste särskiljas från innehåll med ett lodstreck (|). Cellinnehåll kan följa på samma rad eller på följande rader.
  • Tabell- och radmarkörer ({| och |-) innehåller inget direkt innehåll. Lägg inte till lodstreck (|) efter deras valfria attribut. Skulle du av misstag lägga till ett lodstreck efter attribut för tabellmarkören eller radmarkören kommer parsern radera det och ditt sista attribut om det av misstag rör det felaktiga lodstrecket!
• Innehåll kan (a) följa sin cellmarkör på samma rad efter valfria HTML-attribut eller (b) på rader under cellmarkören. Innehåll som använder wikimarkering som i sig behöver börja på en ny rad, som listor, rubriker eller inkapslade mallar, måste börja på en egen ny rad.
  • Lodstreck som innehåll. För att skriva ett lodstreck (|) i en tabell, används markeringen <nowiki>|</nowiki>.

Grunderna

Skapa en tabell med redigeringsverktygsfält

I wikitextredigeraren, lägg markören där du vill lägga in en tabell. Sedan, i verktygsfältet, tryck på "Avancerad", välj sen Tabell-knappen. En ruta öppnas.

I rutan kan du välja att aktivera en tabellrubrik, stilisera tabellen med ram och göra tabellen sorterbar. En förhandsgranskning visas. Du kan också ange rad och kolumn om du behöver. Tryck sedan på "Infoga"-knappen.

Som standard genereras följande kod:

Wikikod:

{| class="wikitable" style="margin:auto"
|+ Bildtext
|-
! Överskriftstext !! Överskriftstext !! Överskriftstext
|-
| Celltext || Celltext || Celltext
|-
| Celltext || Celltext || Celltext
|-
| Celltext || Celltext || Celltext
|}

Resultat:

Bildtext

Överskriftstext	Överskriftstext	Överskriftstext
Celltext	Celltext	Celltext
Celltext	Celltext	Celltext
Celltext	Celltext	Celltext

Minimal syntax

Följande tabell saknar ramar och bra avstånd men visar en enklare wikimarkeringsstruktur.

Inmatning	Resultat
{| |Apelsin |Äpple |- |Bröd |Tårta |- |Smör |Glass |}	Apelsin Äpple Bröd Tårta Smör Glass

Cellerna på samma rad kan listas på en rad separerade av || (två lodstreck). Om texten i en cell skulle innehålla en radbrytning, ska ‎<br /> användas istället.

Inmatning	Resultat
{| |Apelsin||Äpple||mer |- |Bröd||Tårta||mer |- |Smör||Glass||och<br />mer |}	Apelsin Äpple mer Bröd Tårta mer Smör Glass och mer

Extra mellanrum inom celler i wikimarkeringen, som i wikimarkeringen nedan, påverkar inte själva tabellens utseende.

Inmatning	Resultat
{| | Apelsin || Äpple || mer |- | Bröd || Tårta || mer |- | Smör || Glass || och mer |}	Apelsin Äpple mer Bröd Tårta mer Smör Glass och mer

Man kan även ha längre text eller mer komplex wikisyntax inuti tabellceller:

Inmatning

Resultat

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

Tabellrubriker

Tabellrubriker kan skapas med "!" (utropstecken) istället för "|" (lodstreck). Rubriker visas oftast i fettext och centreras som standard.

Inmatning	Resultat
{| ! style="text-align:left;"| Objekt ! Mängd ! Kostnad |- |Apelsin |10 |7.00 |- |Bröd |4 |3.00 |- |Smör |1 |5.00 |- !Totalt | |15.00 |}	Objekt Mängd Kostnad Apelsin 10 7.00 Bröd 4 3.00 Smör 1 5.00 Totalt 15.00

När man använder attribut som 'rubrik' används ett lodrätt streck '|' för att särskilja. Och inte utropstecken '!'.

Tabelltitel

Man kan lägga till en titel i toppen av en tabell på följande sätt:

Inmatning	Resultat
{| |+Matprodukter |- |Apelsin |Äpple |- |Bröd |Tårta |- |Smör |Glass |}	Matprodukter Apelsin Äpple Bröd Tårta Smör Glass

class="wikitable"

Grundläggande design (ljusgrå bakgrund, ram, fyllning och justerad till vänster) kan uppnås genom att lägga till class="wikitable".

Inmatning	Resultat
{| class="wikitable" |+Matprodukter |- |Apelsin |Äpple |- |Bröd |Tårta |- |Smör |Glass |}	Matprodukter Apelsin Äpple Bröd Tårta Smör Glass

HTML, colspan och rowspan

Man kan använda HTML-attributen colspan och rowspan i celler för avancerad utformning.

Inmatning	Resultat
{| class="wikitable" !colspan="6"|Handlarlista |- |rowspan="2"|Smör och bröd |Tårta |Bullar |Wienerbröd |colspan="2"|Croissant |- |Ost |colspan="2"|Glass |Smör |Yogurt |}	Handlarlista Smör och bröd Tårta Bullar Wienerbröd Croissant Ost Glass Smör Yogurt

Note about large tables (noresize class)

The use of the wrapping div.noresize will ensure your table is optimized for mobile and is extremely important for large tables e.g. tables with more than 4 columns or large columns. Failure to use this element will cause your content to overlap UI elements e.g. the Vector 2022 sidebar or to break mobile display. This will cause the table to have a horizontal scroll bar when the table is too big for the content.

Shopping List
Areallyreallyreallyreallylongstringwillcauseyourtableto	Pie	Buns	Danish	Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
	Cheese	Ice cream		Butter	Yogurt

HTML-attribut

Man kan lägga till HTML-attribut i tabeller. För den auktoritativa källan för HTML-attribut, läs W3C:s HTML-specifikationer för tabeller.

Attribut i tabeller

Attribut placerade efter tabellens inledande tagg ({|) tillämpas i hela tabellen.

Inmatning	Resultat
{| class="wikitable" style="text-align: center; color: green;" |Apelsin |Äpple |12,333.00 |- |Bröd |Tårta |500.00 |- |Smör |Glass |1.00 |}	Apelsin Äpple 12,333.00 Bröd Tårta 500.00 Smör Glass 1.00

Attribut i celler

Man kan lägga attribut i enskilda celler. Nummer ser kanske, till exempel, bättre ut justerade till höger.

Inmatning	Resultat
{| class="wikitable" | Apelsin | Äpple | style="text-align:right;" | 12,333.00 |- | Bröd | Tårta | style="text-align:right;" | 500.00 |- | Smör | Glass | style="text-align:right;" | 1.00 |}	Apelsin Äpple 12,333.00 Bröd Tårta 500.00 Smör Glass 1.00

Man kan också använda cell-attribut när man listar flera celler på samma rad. Notera att cellerna separeras av ||, och att inom varje cell separeras attributen och värdena av |.

Inmatning	Resultat
{| class="wikitable" | Apelsin || Äpple || style="text-align:right;" | 12,333.00 |- | Bröd || Tårta || style="text-align:right;" | 500.00 |- | Smör || Glass || style="text-align:right;" | 1.00 |}	Apelsin Äpple 12,333.00 Bröd Tårta 500.00 Smör Glass 1.00

Attribut i rader

Man kan också lägga attribut i enskilda rader.

Inmatning	Resultat
{| class="wikitable" | Apelsin | Äpple | style="text-align:right;"| 12,333.00 |- | Bröd | Tårta | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | Smör | Glass | style="text-align:right;"| 1.00 |}	Apelsin Äpple 12,333.00 Bröd Tårta 500.00 Smör Glass 1.00

Attribut i titeln och rubriker

Attribut kan läggas till i titeln och rubriker på följande sätt.

Inmatning	Resultat
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|''Matprodukter'' |- ! style="color:green" | Frukt ! style="color:red" | Fetter |- |Apelsin |Smör |- |Päron |Tårta |- |Äpple |Glass |}	Matprodukter Frukt Fetter Apelsin Smör Päron Tårta Äpple Glass

Rambredd

Om "border-width:" bara har ett nummer, fungerar den för alla fyra sidor:

Inmatning	Resultat
{|style="border-style: solid; border-width: 20px" | Hej |}	Hej

Om "border-width:" har fler än ett nummer, står de fyra numren för topp, höger, nedre, vänster (KOM IHÅG ordningen som medurs ↑→↓←):

Inmatning	Resultat
{|style="border-style: solid; border-width: 10px 20px 100px 0" | Hej |}	Hej

När det finns färre än 4 värden:

• tre värden t.ex. top, right, bottom: då är det antagna värdet för left samma som right (det andra värdet). Bredden är då detsamma på höger och vänster sida.
• två värden t.ex. top, right: då är det antagna värdet för bottom samma som top (det första värdet), och left får samma värde som right (det andra värdet). Bredden i toppen är detsamma som i botten; bredden till vänster är detsamma som till höger.
• ett värde tex. top: då är det antagna värdet för right samma som för top, bottom och left. Den fjärde bredden är densamma och bildar en vanlig ram. Detta är en genväg.

En annat sätt att definiera bredden för de fyra sidorna i en cell är att använda "border-left", "border-right", "border-top" och "border-bottom":

Inmatning	Resultat
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" | Hej |}	Hej

HTML-attributen (som "width=", "border=", "cellspacing=", "cellpadding=") behöver ingen längdenhet (då det underförstått är en pixelenhet). De är dessutom ogiltiga i HTML 5.

"Cellpadding" (cellfyllning) finns för att bestämma mellanrummet mellan cellväggen och cellens innehåll.

CSS-stilegenskaper (som överskrider HTML-attribut) kräver en uttalad längdenhet (om värdet inte är 0) som till exempel px för pixel.

Med HTML-attribut och CSS-stilar

CSS -stilattribut kan läggas till med eller utan andra HTML-attribut.

Inmatning	Resultat
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |Apelsin |Äpple |- |Bröd |Tårta |- |Smör |Glass |}	Apelsin Äpple Bröd Tårta Smör Glass

Fyllning

Den representerar den interna marginalen mellan innehållet och ramen kring cellen.

Inmatning	Resultat
{|class=wikitable | style="padding: 10px" | Exempel på style="padding:10px" |- | style="padding: 50px" | Exempel på style="padding:50px"<br/><br/>Ange fyllningen i '''VARJE CELL''' |- | style="padding:100px" | Exempel på style="padding:100px" |}	Exempel på style="padding:10px" Exempel på style="padding:50px" Ange fyllningen i VARJE CELL Exempel på style="padding:100px"

Kolumnbredd

Kolumnbredd kan läggas till på följande sätt.

Inmatning:

{| class="wikitable" style="width: 85%;"
| colspan="2" | Denna kolumns bredd är 85% av skärmbredden
|-
| style="width: 30%"| '''Denna kolumn är 30% räknad från 85% av skärmbredden'''
| style="width: 70%"| '''Denna kolumn är 70% räknat från 80% av skärmbredden'''
|}

Resultat:

Denna kolumns bredd är 85% av skärmbredden
Denna kolumn är 30% räknat från 85% av skärmbredden	Denna kolumn är 70% räknat från 85% av skärmbredden

Tillgänglighet av rubrikceller i tabeller

Rubrikceller anger inte uttryckligen vilka tabelldataceller de tillämpas på (de till höger på samma rad eller de under dem i samma kolumn). När tabellen renderas i en visuell 2D-miljö är det oftast bäst att inte blanda sig i.

När tabeller däremot renderas i icke-visuell media kan man hjälpa webbläsaren bestämma vilken rubrikcell som tillämpas till beskrivningen av valfri cell (för att upprepa dess innehåll i vissa hjälpverktyg) med hjälp av attributen scope="row" eller scope="col" i rubrikceller. För det mesta behöver man med enkla tabeller använda scope="col" i alla rubrikceller i den första raden och scope="row" i den första cellen på följande rader:

Inmatning	Resultat
{| class="wikitable" |- ! scope="col"| Objekt ! scope="col"| Antal ! scope="col"| Pris |- ! scope="row"| Bröd | 0.3 kg | $0.65 |- ! scope="row"| Smör | 0.125 kg | $1.25 |- ! scope="row" colspan="2"| Totalt | $1.90 |}	Objekt Antal Pris Bröd 0.3 kg $0.65 Smör 0.125 kg $1.25 Totalt $1.90

Fixering

Fixera tabeller

Tabeller kan fixeras med CSS och kontrolleras av marginaler. En fast marginal på den ena sidan fixerar tabellen till den sidan om marginalen på den andra sidan definierats som "auto". För att fixera en tabell i mitten ska man sätta båda marginalerna på "auto".

Till exempel, en högerfixerad tabell:

Inmatning	Resultat
{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | Apelsin | Äpple |- | Bröd | Tårta |- | Smör | Glass |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Apelsin Äpple Bröd Tårta Smör Glass Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Och en centrerad tabell:

Inmatning	Resultat
{| class="wikitable" style="margin: auto;" | Apelsin | Äpple |- | Bröd | Tårta |- | Smör | Glass |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Apelsin Äpple Bröd Tårta Smör Glass Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tabell som svävar kring text

Om man fixerar tabellen till höger eller till vänster på sidan, kommer texten efter tabellen att börja i slutet av den, vilket lämnar en tomt utrymme runt tabellen. Man kan få texten att vecklas runt tabellen genom att få den att "sväva" runt texten istället för att fixera den. Det gör man med CSS-attributet float, vilket anger var tabellen svävar, till vänster eller till höger. När man använder "float", kontrollerar inte marginaler tabellfixeringar och kan användas för att ange marginalen mellan tabellen och den omgivande texten.

Inmatning

Resultat

{| class="wikitable" style="float:right; margin-left: 10px;" | Apelsin | Äpple |- | Bröd | Tårta |- | Smör | Glass |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Apelsin Äpple Bröd Tårta Smör Glass Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Fixering av cellinnehåll

Man kan kontrollera fixeringen av cellinnehåll med 2 olika CSS-egenskaper: text-align och vertical-align. text-align kan anges i tabellen, på rader eller i individuella celler, medan vertical-align endast kan anges i individuella rader eller celler.

Inmatning

Resultat

{| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |}

A B C D E F G H I

Förbehåll

Negativa tal

Om man börjar en cell på en ny rad med ett negativt tal med ett minus-tecken (eller en parameter som värderar ett negativt tal) kan din tabell förstöras av att kombinationen |- kommer parsas som wikimarkering för tabellrad och inte som tabellcell. För att undvika detta kan man lägga in ett mellanrum innan värdet (| -6) eller använda cellmarkering på raden (|| -6).

CSS gentemot attribut

Tabellramar som utformats via CSS och inte i ramattribut kommer visas på fel sätt i vissa webbläsare.

Vanliga attribut för kolumner, kolumngrupper och radgrupper

MediaWikis syntax för tabeller erbjuder för tillfället inget stöd för att ange vanliga attribut för kolumner (med HTML-elementet ‎<col />), kolumngrupper (HTML-element ‎<colgroup>‎</colgroup>) eller radgrupper (HTML-elementen ‎<thead>‎</thead>, ‎<tbody>‎</tbody> och ‎<tfoot>‎</tfoot>). Dessa standard HTML-element accepteras inte ens i deras HTML- eller XHTML-syntax.

Alla rader och celler (rubriker eller data) i tabellen renderas inom en enda uttalad radgrupp (HTML-element ‎<tbody>‎</tbody>) utan några attribut eller stilar.

Tabeller och VisualEditor (VE)

Se även: Hjälp:VisualEditor/Användarguide

Se Phab: T108245: "Fully support basic table editing in the visual editor". Läs listan över uppgifter. Uppgifter som är färdiga stryks. Det kan vara svårt att räkna ut från det tekniska språkbruket där exakt vad som har förbättrats eller vilka funktioner som lagts till. Var god lägg till förklaringar nedan.

Kan nu flytta eller radera kolumner och rader

Klicka på en kolumn och radrubrik. Klicka sen på pilen. Klicka sen från popupmenyn på "Flytta" eller "Radera".

Skriv in blankrad eller kolumn

Klicka sedan från samma popupmeny på "Klistra in"

Kopiera tabell från webbsidor till VisualEditor

Det går att kopiera och klistra från en tabell direkt till VisualEditor (VE). Använd sandlådan för att göra det på ett säkert sätt och kontrollera att tabellen ser bra ut i wikitexten och visas ordentligt i VisualEditor och i förhandvisningarna.

Hjälpverktyg

• Excel2Wiki möjliggör för dig att kopiera ett kalkylblad från Excel, Apache OpenOffice, LibreOffice eller Gnumeric för att omvandla det till en wikikodtabell.

Se även

• Sortera rader i en tabell
• sv:Wikipedia:Tabeller
• Ett visuellt verktyg som gör det enklare att generera tabeller