Wikinieuws

Help:Tabelontwerp

(Doorverwezen vanaf Help:Tabel)
Zie H:TABEL

In de wikisoftware kunnen tabellen niet alleen in {{w|HyperText Markup Language|HTML{{w|-code maar ook in een eenvoudigere wikicode worden opgemaakt. De HTML-codes werken nog steeds, maar wikicodes zijn vaak eenvoudiger te lezen en maken het makkelijker om foutloze tabellen te maken. Daarnaast is het ook mogelijk om via de visuele tekstverwerker of de nieuwe wikitekstmodus (in te stellen via betafuncties) een tabel aan te maken, deze wordt dan opgeslagen in wikicode. De visuele tekstverwerker geeft ook het voordeel dat je tabellen van andere websites kunt kopiëren, en vervolgens hier plakken zonder zelf handmatig gegevens in te voeren. De delen van een tabel moeten altijd op een nieuwe regel beginnen (er is één uitzondering, die verderop wordt besproken).

Aan zowel de tabel zelf, als aan de rijen en cellen kunnen parameters worden toegekend. Deze zijn hetzelfde als de attributen die kunnen worden gebruikt bij HTML. Alle parameters kunnen worden weggelaten. Voor opmaak-specifieke attributen wordt het gebruik van CSS door middel van het style-attribuut geprefereerd. Parameters die via een style-attribuut worden gegeven, kunnen worden samengevoegd: style="background-color:#ffaaff;" en style="color: #006622;" worden dan style="background-color:#ffaaff; color:#006622;".

Houd bij het gebruik van tabellen rekening met de toegankelijkheid van Wikipedia. Voor mensen met alternatieve of aangepaste browsers (bv. browsers voor blinden, gsm-browsers enz.) zijn tabellen vaak zeer moeilijk begrijpbaar. Ook zijn eendimensionale data vaker beter weer te geven in een lijst (* ; #) dan in een tabel.

Wikisyntaxis

bewerken

Tabellen in de wikisyntaxis worden altijd volgens een bepaalde standaardopzet opgebouwd, waarbij met het bewerken van een tabel in (tabel)regels gedacht moet worden. In de wikisyntaxis worden tabellen opgebouwd door veel gebruik te maken van verticale streepjes ( "|" ) die een sluisteken worden genoemd.

  • Iedere tabel wordt gestart met {| . Achter deze opening kan er een opmaakprofiel (class) worden geplaatst, zodat de tabel met de standaard opmaak wordt getoond die in veel artikelen wordt gebruikt. Een standaard opmaakprofiel dat we veel voor tabellen gebruiken is class="wikitable".
  • Na de opening van de tabel kan de tabel cel voor cel worden opgebouwd. Iedere toegevoegde cel kan bij het bewerken van een pagina zowel achter de voorgaande cel worden geplaatst, als op een nieuwe regel. Iedere cel van een tabel begint met een | . Indien een tabelcel achter een voorgaande tabelcel wordt geplaatst, worden deze van elkaar gescheiden door twee pipes direct achter elkaar: || .
  • Wanneer in een tabel een nieuwe regel moet beginnen wordt er op een eigen regel |- geplaatst. Hierna kunnen op een nieuwe regel weer nieuwe tabelcellen worden toegevoegd, zoals beschreven onder het vorige punt.
  • Iedere tabel wordt afgesloten met |} .

Een voorbeeld van hoe een eenvoudige tabel in wikisyntax er uit ziet: 

{| class="wikitable"
| Cel 1
| Cel 2
| Cel 3
|-
| Cel 4 || Cel 5 || Cel 6
|}

Door de tekst in een cel weg te laten wordt er een lege cel gecreëerd.

Koppen in een tabel

bewerken

In een tabel kunnen koppen worden toegevoegd. Dit kan door het vervangen van de pipes door een uitroepteken van die cellen die tot de kop moeten behoren. Indien cel 1, cel 2 en cel 3 van de bovenstaande tabel tot de kop van de tabel moeten gaan behoren ziet dat er als volgt uit. Afhankelijk van het gebruikte opmaakprofiel wordt de kop automatisch een standaardopmaak voor koppen gegeven. 

{| class="wikitable"
! Cel 1
! Cel 2
! Cel 3
|-
| Cel 4 || Cel 5 || Cel 6
|}

Standaard opmaakprofielen

bewerken

Wikitable

bewerken

Een van de standaard opmaakprofielen is wikitable en vroeger ook wel prettytable genoemd. Dit opmaakprofiel zorgt voor een uniforme nette lay-out in tabellen, waardoor alle tabellen dezelfde neutrale kleurstijl gebruiken en de artikelen (net als andere encyclopedieën) een eenduidige nette stijl van een neutrale professionele encyclopedie hebben. In wikisyntax ziet zo'n tabel er uit als volgt: 

{| class="wikitable"
! Cel 1
! Cel 2
! Cel 3
|-
| Cel 4
| Cel 5
| Cel 6
|-
| Cel 7 || Cel 8 || Cel 9
|}

en dat geeft:

Cel 1 Cel 2 Cel 3
Cel 4 Cel 5 Cel 6
Cel 7 Cel 8 Cel 9

Toccolours

bewerken

Een ander standaard opmaakprofiel is toccolours. Dit opmaakprofiel lijkt sterk op wikitable en gebruikt dezelfde neutrale kleurstijl, maar het grote verschil met wikitable is dat alleen de buitenste tabelrand wordt weergegeven en alle binnenste randen van cellen zijn weggelaten. In wikisyntax ziet zo'n tabel er uit als volgt: 

{| class="toccolours"
! Cel 1
! Cel 2
! Cel 3
|-
| Cel 4
| Cel 5
| Cel 6
|-
| Cel 7 || Cel 8 || Cel 9
|}

en dat geeft:

Cel 1 Cel 2 Cel 3
Cel 4 Cel 5 Cel 6
Cel 7 Cel 8 Cel 9

Zonder opmaakprofiel

bewerken

Een andere manier waarop tabellen worden toegepast in artikelen is wanneer we bijvoorbeeld opsommingen naast elkaar willen tonen in kolommen, zonder de aanwezigheid van randen en zonder achtergrondtinten. De tabelelementen zelf zijn dan onzichtbaar en alleen de inhoud van de cellen van de tabel wordt dan getoond. Dit soort "onzichtbare" tabellen wordt veel gebruikt bij lange opsommingen onder elkaar, die zo opgesplitst kunnen worden in meerdere opsommingen die naast elkaar getoond worden. Met een dergelijke opsomming die opgesplitst wordt in meerdere kolommen, wordt iedere kolom in een eigen tabelcel geplaatst. In wikisyntax ziet zo'n tabel er uit als volgt: 

{|
|
* België
* Bulgarije
* Cyprus
* Denemarken
* Duitsland
* Estland
* Finland
* Frankrijk
* Griekenland
|
* Hongarije
* Ierland
* Italië
* Letland
* Litouwen
* Luxemburg
* Malta
* Nederland
* Oostenrijk
|
* Polen
* Portugal
* Roemenië
* Slovenië
* Slowakije
|}

en dat geeft:

  • België
  • Bulgarije
  • Cyprus
  • Denemarken
  • Duitsland
  • Estland
  • Finland
  • Frankrijk
  • Griekenland
  • Hongarije
  • Ierland
  • Italië
  • Letland
  • Litouwen
  • Luxemburg
  • Malta
  • Nederland
  • Oostenrijk
  • Polen
  • Portugal
  • Roemenië
  • Slovenië
  • Slowakije

Als niet alle kolommen even lang zijn, worden de kortere standaard verticaal gecentreerd. Dit kan voorkomen worden door de cellen in een rij te plaatsen met |- valign="top", of door het meegeven van de eigenschap | valign="top" | of door alle cellen bovenaan uit te lijnen door in de kop van de tabel de {| class="vatop" mee te geven.

Optie 1: hele regel bovenin verticaal uitgelijnd 

{| 
|- valign="top"
|
* België
* Denemarken
* Duitsland
* Frankrijk
|
* Italië
* Luxemburg
* Malta
* Nederland
|
* Oostenrijk
* Portugal
|}

geeft:

  • België
  • Denemarken
  • Duitsland
  • Frankrijk
  • Italië
  • Luxemburg
  • Malta
  • Nederland
  • Oostenrijk
  • Portugal

Optie 2: alleen een cel bovenin verticaal uitgelijnd 

{| 
|
* België
* Denemarken
* Duitsland
* Frankrijk
|
* Italië
* Luxemburg
* Malta
* Nederland
| valign="top" |
* Oostenrijk
* Portugal
|}

geeft:

  • België
  • Denemarken
  • Duitsland
  • Frankrijk
  • Italië
  • Luxemburg
  • Malta
  • Nederland
  • Oostenrijk
  • Portugal

Optie 3: de hele tabelinhoud bovenin verticaal uitgelijnd 

{| class="vatop"
|
* België
* Denemarken
* Duitsland
* Frankrijk
|
* Italië
* Luxemburg
* Malta
* Nederland
|
* Oostenrijk
* Portugal
|}

en dat geeft:

  • België
  • Denemarken
  • Duitsland
  • Frankrijk
  • Italië
  • Luxemburg
  • Malta
  • Nederland
  • Oostenrijk
  • Portugal

Deze class is ook te combineren met een andere class, zoals wikitable. De tabelkop wordt dan: 

{| class="wikitable vatop"

Uitgebreide wikisyntaxis

bewerken

Naast de eenvoudige tabellen kunnen tabellen worden uitgebreid met allerlei parameters. Deze uitgebreidere wikisyntax wordt met name toegepast op sjablonen (die bestaan uit complexe tabellen). In tabellen op artikelen wordt de uitgebreide wikisyntax slechts beperkt gebruikt om tabellen eenvoudig te houden en niet te veel te laten afwijken van het standaard opmaakprofiel dat zorgt voor een rustige, neutrale, nette en professionele uitstraling. Daarom wordt kleurgebruik op artikelen in de praktijk slechts beperkt toegepast (waar dat functioneel is) om deze nette neutrale uitstraling te waarborgen. Een afwijkend kleurgebruik kan al gauw afleiden van waar het om gaat: de informatie in tekst en afbeeldingen waar de bezoeker van een artikel voor komt.

Tabel

bewerken

Een tabel wordt gedefinieerd door de volgende code:

{| parameters
...
|} Op de plek van de puntjes komt de eigenlijke inhoud van de tabel, op de plek van "parameters" de parameters. Hieronder volgt een aantal mogelijke parameters:

Parameter Effect
style="background-color:#abcdef;" Een achtergrondkleur voor de hele tabel opgeven.
style="color:#222244;" Een tekstkleur voor de hele tabel opgeven.
style="float:right;" De hele tabel   rechts uitlijnen op de pagina.
style="width:20em;" De tabel een bepaalde breedte geven.
style="border:1px solid #000000;" Een zwarte rand om de tabel.
summary="Een samenvatting" De tabel een samenvatting meegeven (handig voor bijvoorbeeld blinden).

Het artikel lijst van kleuren geeft een overzicht van de kleurnamen met bijbehorende RGB-waarde en een kleurvoorbeeld. De volgende notaties geven hetzelfde resultaat:

  • style="background-color:#F0F8FF;"
  • style="background-color:#f0f8ff;"
  • style="background-color:AliceBlue;"
  • style="background-color:aliceblue;"

Het gebruik van kleurnamen in de brontekst in plaats van de RGB-codes verhoogt de leesbaarheid. De kleurnaam maakt direct duidelijk welke kleur op het scherm komt. Het verdient echter de aanbeveling om toch de hex-codes te gebruiken wanneer de kleurnaam niet in de W3C HTML 4.01-standaard voorkomt. Deze standaard bevat alleen de kleurnamen aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white en yellow.

Rijen

bewerken

Bij een tabel moet u telkens in rijen denken. De code houdt een volgorde aan waarbij telkens van links naar rechts wordt gegaan, rij voor rij.

De eerste rij in de tabel hoeft u niet aan te geven. Voor het scheiden van de rijen gebruikt u: 

|- parameters

Ook hier kunt u kiezen parameters toe te voegen of niet. Enkele mogelijkheden:

Parameter Effect
style="background-color:#abcdef;" Een achtergrondkleur voor de hele rij opgeven.
style="color:#222244;" Een tekstkleur voor de hele rij opgeven.
style="text-align:right;" De tekst in alle cellen van deze rij rechts uitlijnen.
style="text-align:center;" De tekst in deze rij in het midden uitlijnen.
style="border:1px solid black;" De rij randen geven.

Cellen

bewerken

Cellen in de tabel kunnen worden gemaakt door: 

| cel1
| cel2
| cel3

of, als alternatief: 

| cel1 || cel2 || cel3

Hier zien we de uitzondering op de regel dat de delen van een tabel steeds op een nieuwe regel moeten staan: twee verticale strepen kunnen worden gebruikt, en dan hoeft niet elke cel op een nieuwe regel.

Als u aan een cel parameters mee wilt geven, kan dat als volgt: 

| parameters | inhoud

Een overzicht van een aantal mogelijke parameters:

Parameter Effect
style="background-color:#abcdef;" Een achtergrondkleur voor de cel opgeven.
style="color:#222244;" Een tekstkleur voor de cel opgeven.
style="text-align:right;" De tekst in de cel   rechts uitlijnen.
style="text-align:center;" De tekst in de cel centreren.
colspan="2" De cel de huidige cel en de volgende cel laten beslaan.
rowspan="2" De cel de huidige cel en de onderliggende cel laten beslaan.
style="border:1px solid black;" De cel randen geven.

Uitleg (caption)

bewerken

Uitleg kan aan de tabel worden toegevoegd door: 

|+ uitleg

Let op: de uitleg geldt voor de hele tabel en kan niet toegepast worden op een enkele cel of rij!

Ook hieraan mogen weer parameters worden toegevoegd: 

|+ parameters| uitleg

Zie voor mogelijke parameters (achtergrondkleur, tekstkleur, uitlijning, et cetera) de vorige overzichten.

Koppen

bewerken

Tabelkoppen werken hetzelfde als cellen, maar dan met een ! in plaats van een |. Parameters voor koppen moeten wel met |, dus ! parameters | inhoud.

Let op: het wordt geprefereerd daadwerkelijk de code voor koppen te gebruiken, in plaats van gewone cellen op te maken tot koppen. Dit in verband met de bereikbaarheid voor mensen met een handicap, blinden of met tekstbrowsers.

Voorbeelden van tabellen

bewerken

Een eenvoudige tabel

bewerken 
 {|
 !Hebreeuws
 !Grieks
 |-
 |Alef||Alfa
 |-
 |Bet||Bèta
 |-
 |Gimel||Gamma
 |}

maakt:

Hebreeuws Grieks
Alef Alfa
Bet Bèta
Gimel Gamma

Een wikitable

bewerken

Met class="wikitable" kunt u eenvoudig een tabel in de standaard wiki-opmaak maken. Een voorbeeld: 

{| class="wikitable" width="40%"
! Planten || Dieren
|-
| Gras || Koe
|-
| Eucalyptus || Koala
|}

maakt:

Planten Dieren
Gras Koe
Eucalyptus Koala

Een wat complexer voorbeeld: 

{| class="wikitable" width="40%"
! colspan="2" | Dijkgraven per ambacht
|-
| style="width:30%;" | Geestmerambacht
| rowspan="2" style="text-align:center;width:70%;" | Beide ambachten vielen onder dezelfde dijkgraaf
|-
| Schager en Niedorper Cogge
|}

maakt:

Dijkgraven per ambacht
Geestmerambacht Beide ambachten vielen onder dezelfde dijkgraaf
Schager en Niedorper Cogge

Een ingewikkelder tabel

bewerken 
{| style="float:right;"
|+ Hier komt een mooie tabel!
! style="background-color:aqua; color:white;" | Rij 1, kop 1
! style="border:dotted 3px #090; background-color:yellow" | Rij 1, kop 2
|-
| style="border:solid 1px black; background-color:#FC9;" | Cel 1, rij 1
| rowspan="2" style="background-color:#6F2;" | Cel 2, rij 1 (en 2)
|-
| style="background-color:#9CF;" | Cel 1, rij 2
|-
| colspan="2" style="border:dashed 2px #f00; background-color:#F9C;" | Cel 1 (en 2), rij 3
|}

maakt een tabel aan de rechterkant:

Hier komt een mooie tabel!
Rij 1, kop 1 Rij 1, kop 2
Cel 1, rij 1 Cel 2, rij 1 (en 2)
Cel 1, rij 2
Cel 1 (en 2), rij 3

In- of uitklapbare tabel

bewerken

Met de aanduiding class="collapsible" wordt de tabel inklapbaar. De toevoeging "collapsed" zorgt ervoor dat de tabel in eerste instantie al ingeklapt is. 

{| class="wikitable collapsible collapsed" style="width: 18em;"
! colspan="2"| Koptekst
|-
| Rij 1, kolom 1
| Rij 1, kolom 2
|-
| Rij 2, kolom 1
| Rij 2, kolom 2
|}

Zie ook Sjabloon:Uitklappen.

De inhoud van de kolommen sorteren

bewerken

Met de aanduiding class="sortable" verschijnt in de kop van elke kolom een knopje waarmee de tabel op de inhoud van die kolom gesorteerd kan worden. Om dit voor een bepaalde kolom uit te sluiten kan in de kop van die kolom class="unsortable" geplaatst worden. Plaats de omvattende tabel in de CSS-klasse "vatop", om de inhoud van beide cellen op gelijke hoogte te krijgen in het geval dat deze niet even hoog zijn.

Code
{| class="wikitable sortable"
! Station
! Bouwjaar
! class="unsortable" | Afbeelding
|-
| {{w|Station Abcoude|Abcoude}}
| 1871
| [[Bestand:Station Abcoude 2.JPG|80x80px]]
|-
| {{w|Station Hoorn|Hoorn}}
| 1883
| [[Bestand:Station Hoorn1.jpg|80x80px]]
|-
| {{w|Station Utrecht Maliebaan|Utrecht Maliebaan}}
| 1873
| [[Bestand:Spoorwegmuseum na renovatie.jpg|80x80px]]
|}
Resultaat
Station Bouwjaar Afbeelding
Abcoude 1871  
Hoorn 1883  
Utrecht Maliebaan 1873  

N.B.: Gebruik {{Sorteer}} of {{SortNaam}} om de sorteervolgorde door een ander dan het eerste van meerdere woorden te laten bepalen, bijvoorbeeld om namen van mensen op de achternaam te laten sorteren.

MediaWiki:Common.js bevat aanpassingen waardoor de mogelijkheden van m:Help:Sorting van toepassing zijn, alsmede de aanpassing dat wordt uitgegaan van een decimale komma in plaats van een decimale punt.

Je zou verwachten dat het sorteren niet goed gaat als rowspan in de tabel voorkomt, maar dat blijkt erg mee te vallen. Bekijk het ontwerp en het resultaat van de volgende tabel:

Code
{| class="wikitable sortable" 
! Naam
! Functie
|-
| Juliana || rowspan="3" | Koningin
|-
| Wilhelmina
|-
| Beatrix
|-
| Margriet || rowspan="2" | Prinses
|-
| Amalia
|}
Resultaat
Naam Functie
Juliana Koningin
Wilhelmina
Beatrix
Margriet Prinses
Amalia

Tabellen naast elkaar

bewerken

Twee of meer tabellen (maar ook andere lijsten, afbeeldingen, enz.) kunnen naast elkaar geplaatst worden door ze samen in een tabel op te nemen.

Code
{| class="vatop"
|
 {| class="wikitable"
  !Tabel 1
  |-
  |Amsterdam
  |-
  |Groningen
  |-
  |Utrecht
  |-
  |Maastricht
 |}
|
 {| class="wikitable"
  !Tabel 2
  |-
  |Leeuwarden
  |-
  |Assen
  |-
  |Sint Biggeklooster
 |}
|}
Resultaat
Tabel 1
Amsterdam
Groningen
Utrecht
Maastricht
Tabel 2
Leeuwarden
Assen
Sint Biggeklooster

HTML

bewerken

Eerdere versies maakten gebruik van HTML voor tabelopmaak. Deze vorm van tabelopmaak is nog steeds mogelijk omwille van compatibiliteit, maar wordt voor nieuwe artikelen ontraden. Voor wie desondanks nog tabellen in HTML wil gebruiken, hieronder een aantal aanwijzingen daarvoor. Ter vergelijking is ook de wikisyntaxis gegeven voor dezelfde tabel.

Een eenvoudige tabel

bewerken
HTML wikisyntaxis 
 <table style="border:1px solid red;">
 <tr>
 <td>Onderwerp één</td>
 <td>Onderwerp twee</td>
 </tr>
 <tr>
 <td>Onderwerp drie</td>
 <td>Onderwerp vier</td>
 </tr>
 </table>

{| style="border:1px solid red;"
 | Onderwerp één
 | Onderwerp twee
 |-
 | Onderwerp drie
 | Onderwerp vier
 |}

maakt:

Onderwerp één Onderwerp twee
Onderwerp drie Onderwerp vier

Iets ingewikkeldere tabel

bewerken
HTML wikisyntaxis 
 <table style="border:1px solid black;">
 <tr>
 <td>Onderwerp één</td>
 <td>Onderwerp twee</td>
 </tr>
 <tr>
 <td rowspan="2">Onderwerp drie</td>
 <td>Onderwerp vier</td>
 </tr>
 <tr>
 <td>Onderwerp vijf</td>
 </tr>
 </table>

{| style="border:1px solid black;"
 | Onderwerp één
 | Onderwerp twee
 |-
 | rowspan="2" | Onderwerp drie
 | Onderwerp vier
 |-
 | Onderwerp vijf
 |}

geeft:

Onderwerp één Onderwerp twee
Onderwerp drie Onderwerp vier
Onderwerp vijf

Een tabel geschikt maken voor een zogenaamde braillelezer of browser die de tekst voorleest

bewerken
  • Maak een samenvatting van de tabel:
HTML wikisyntaxis 
<table summary="Overzicht van de ooievaars">
 
{| summary="Overzicht van de ooievaars"
  • Geef het kopje van een kolom apart aan en geef de scope (hoort de kop bij de kolom of de rij?) aan:
HTML wikisyntaxis 
 <tr>
 <th scope="col">Nederlandse naam</th>
 <th scope="col">Latijnse naam</th>
 </tr>

 |-
 ! scope="col" | Nederlandse naam
 ! scope="col" | Latijnse naam
  • En noem de naam van een kopje ook in de cel zelf:
HTML wikisyntaxis 
 <tr>
 <td>[[Abdims ooievaar]]</td>
 <td>''Ciconia abdimii''</td>
 </tr>

 |-
 | [[Abdims ooievaar]]
 | ''Ciconia abdimii''

In "normale" browsers zie je geen verschil, maar voor iemand met een visuele handicap die gebruikmaakt van een braillelezer of een browser die de tekst voorleest, is het een wereld van verschil.

En dan is er nog niet eens gedetailleerd gesproken over scopes, headers, summary, caption, thead, abbr, tbody, et cetera. Het is aan te bevelen de wikisyntaxis te gebruiken.

Kleuren

bewerken

Zie voor een overzicht van de kleuren en de bijbehorende codes: Lijst van HTML-kleuren

Met de kleurcode style="background:transparent;" neemt de tabel de oorspronkelijke achtergrondkleur over.

Zie ook

bewerken
bewerken
Overgenomen van "https://nl.wikinews.org/w/index.php?title=Help:Tabelontwerp&oldid=135966"