Hjälp:Tabeller

From mediawiki.org
Jump to navigation Jump to search
This page is a translated version of the page Help:Tables and the translation is 100% complete.
PD 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.
PD
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.[1]

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

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
|Danska
|colspan="2"|Croissant
|-
|Ost
|colspan="2"|Glass
|Smör
|Yogurt
|}
Handlarlista
Smör och bröd Tårta Bullar Danska Croissant
Ost Glass Smör 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

Enkel tabellram på en pixel

Ett exempel på en tabellram med en pixel:

Inmatning Resultat
{| border="1" style="border-collapse:collapse"
| Apelsin
| Äpple
|-
| Bröd
| Tårta
|}
Apelsin Äpple
Bröd Tårta

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.[2]

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

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 
|}
Apelsin Äpple
Bröd Tårta
Smör Glass

Och en centrerad tabell:

Inmatning Resultat
{| class="wikitable" style="margin: auto;"
| Apelsin
| Äpple
|-
| Bröd
| Tårta
|-
| Smör
| Glass 
|}
Apelsin Äpple
Bröd Tårta
Smör Glass

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.

Se även

Anteckningar

  1. Tabeller kan antingen skapas direkt med HTML-tabellelement eller med wikiformatering för att bestämma tabellen. HTML-tabellelement och deras användning är noggrant beskrivna på diverse webbsidor och kommer inte diskuteras här. Fördelen med wikikod är att tabellen konstrueras av tecken som tenderar att förenkla uppfattningen av tabellens struktur i artikelns visningsläge till skillnad från HTML-tabellelement.
  2. HTML table cellpadding Attribute