Wikia


In de wikisoftware kunnen vanaf december 2003 tabellen niet alleen in HTML-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. 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 (blinden, gsm-browsers, ...) zijn tabellen vaak zeer moeilijk begrijpbaar. Ook zijn eendimensionale data vaker beter weer te geven in een lijst (* ; #) dan in een tabel.

Wikisyntaxis Edit

Tabel Edit

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 tabel 15px rechts uitlijnen.
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 blinden, gehandicapten, et cetera).

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, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white en yellow.

Rijen Edit

Bij een tabel moet u telkens in rijen denken. De code houdt een volgorde aan waarbij telkens van links naar 15px 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

Dit kan met net zoveel horizontale streepjes als u zelf wilt: |- en |-------------- hebben dezelfde uitwerking. 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 de rij telkens 15px rechts uitlijnen.
style="text-align:center;" De tekst in de rij telkens in het midden uitlijnen.
style="border:1px solid black;" De rij randen geven.

Cellen Edit

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 15px 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) Edit

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 Edit

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.

Tabellen in tabellen Edit

Het is mogelijk een tabel te maken in een andere tabel, dat wil zeggen in een cel van een andere tabel. Houd er echter rekening mee dat dit een tabel (vaak onnodig) zeer ingewikkeld maakt om te begrijpen.

Voorbeelden van tabellen Edit

Een eenvoudige tabel Edit

 {| 
 | Jan
 | Piet
 |- 
 | Joris
 | Corneel
 |}

maakt:

Jan Piet
Joris Corneel

Een Prettytable-tabel Edit

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

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

maakt:

Planten Dieren
Gras Koe
Eucalyptus Koala

Een wat complexer voorbeeld:

{| class="prettytable" 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 meer ingewikkelde tabel Edit

 {| style="float:right;"
 |+ Hier komt een mooie tabel!
 ! style="background-color:aqua; color:white;" | Rij 1, kop 1
 ! style="background-color:yellow" | Rij 1, kop 2
 |-
 | style="border:1px solid black;" | Cel 1, rij 1 
 | rowspan="2" style="background-color:#66ff22;" | Cel 2, rij 1 (en 2)
 |-
 | Cel 1, rij 2
 |- 
 | colspan="2" | 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 tabelEdit

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

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


De inhoud van de kolommen sorterenEdit

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.

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

N.B.: Gebruik {{Sorteer}} of {{Sorteer naam}} 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.

Het sorteren van tabellen lijkt in Safari 2.0.4 (419.3) op Mac OSX 10.4.10 niet goed te functioneren; zie ook bug 9414.

HTML Edit

Wikipedia is steeds in ontwikkeling. 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 Edit

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 ingewikkelder tabel Edit

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 Edit

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

Voor "normale" browsers zie je geen verschil, maar 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.

KleurenEdit

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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

Around Wikia's network

Random Wiki