Help:Gebruik van tabellen

Tabellen zijn eenvoudige hulpmiddelen om pagina's netjes in te delen. Ook op Wikibooks wordt hiervan gebruik gemaakt. Naast de standaard html-tabellen, kan ook gebruik worden gemaakt van de opmaakcodering van de Wikisoftware, welke hieronder wordt besproken.

Deze Wiki-opmaak wordt geprefereerd boven html, omdat deze code gemakkelijk begrijpbaar is voor mensen die geen html kennen.

Aan zowel de tabel als aan de rijen en cellen, kunnen bepaalde parameters toegekend worden. Hierbij wordt gebruik gemaakt van gewone html-attributen. Uiteraard is het ook mogelijk om geen parameter mee te geven aan de tabel. Bij het toekennen van parameters om tabellen op te maken wordt het gebruik van css geprefereerd boven html-opmaak. Dit kan door middel van het style-attribuut. Om bijvoorbeeld een witte tekst te krijgen op een blauw achtergrond gebruikt u style="background-color:blue; color:white;".

Wikisyntax

Tabel

**Overzicht Wiki Tabelopbouw**
{\|	tabelstart
\|+	tabelbijschrift, optioneel; alleen tussen tabelstart en eerste tabelrij
\|-	tabelrij
!	tabelkop tabelkopcel, optioneel. opvolgende tabelkopcellen kunnen worden toegevoegd op de zelfde regel gescheiden door dubbele uitroeptekens (!!) of start op een nieuwe regel, elk met zijn eigen enkel uitroepteken (!).
\|	tabeldata tabeldatacel, vereist! opvolgende tabeldatacellen kunnen worden toegevoegd op de zelfde regel gescheiden door dubbele scheidingstekens (\|\|) of start op een nieuwe regel, elk met zijn eigen enkel scheidingsteken (\|).
\|}	tabeleinde
De bovenstaande enkele scheidingstekens (! en \|) moeten op een nieuwe regel starten om extra cellen toe te voegen aan een regel. De dubbele tekens \|\| en !! doen hetzelfde binnen een regel.

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:#abcdef;"	Een achtergrondkleur voor de hele tabel opgeven
style="color:#222244;"	Een tekstkleur voor de hele tabel opgeven
style="float:right;"	De tabel rechts uitlijnen.
style="width:20em;"	De tabel een bepaalde breedte geven.
style="border:1px solid #000000;"	Rand om de tabel.
border="1" style="border-collapse:collapse;border:1px solid silver;"	alle cellen van de tabel een (dun) randje geven
summary="Een samenvatting"	De tabel een samenvatting meegeven (handig voor blinden, gehandicapten, etcetera).

Op de lijst van kleuren vindt u een overzicht van de kleurnamen met bijbehorende RGB-waarde en een kleurvoorbeeld.

De kleuren zijn niet hoofdlettergevoelig en de volgende notaties geven daardoor hetzelfde resultaat:

style="background:#F0F8FF"
style="background:#f0f8ff"
style="background:AliceBlue"
style="background:aliceblue"

Het W3C beveelt echter aan zoveel mogelijk gebruik te maken van kleine letters.

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

Een tabel is opgebouwd uit rijen, die op hun beurt weer opgesplitst zijn in vakjes. U moet dus in horizontale richting denken. Logischerwijs wordt ook de code voor een tabel per rij geschreven.

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:#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 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

Cellen in de tabel kunnen op twee manieren worden gemaakt:

| cel1
| cel2
| cel3

of:

| cel1 || cel2 || cel3

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:#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)

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, enz.) de vorige overzichten.

Koppen

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

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

Een eenvoudige tabel

 {| 
 | Cel 1, rij 1 
 | Cel 2, rij 1 
 |- 
 | Cel 1, rij 2 
 | Cel 2, rij 2 
 |}

maakt:

Cel 1, rij 1	Cel 2, rij 1
Cel 1, rij 2	Cel 2, rij 2

Een wikitable tabel

Met class="wikitable" kunt u eenvoudig een complexe tabel maken. Het voordeel hiervan is tweeledig. De tabel heeft een complexe opmaak, die niet helemaal hoeft te worden ingetypt. Daarnaast is de laadtijd sneller, omdat de tabel wordt opgeroepen vanuit een stylesheet die in het cachegeheugen van uw browser ligt opgeslagen.

Voor geïnteresseerden: de opmaakcode voor deze soort tabellen staat opgeslagen op MediaWiki:Common.css.

{| class="wikitable" width="40%"
! colspan="2" | Titel
|-
| style="width:30%;" | Cel 1
| rowspan="2" style="text-align:center;width:70%;" | Cel 2 - 4
|-
| Cel 3
|}

maakt:

Titel
Cel 1	Cel 2 - 4
Cel 3	Cel 2 - 4

Een meer ingewikkelde tabel

 {| style="float:right;"
 |+ Hier komt een mooie tabel!
 ! style="background:Aqua; color:White;" | Rij 1, kop 1
 ! style="background:Yellow" | Rij 1, kop 2
 |-
 | style="border:1px solid Black;" | Cel 1, rij 1 
 | rowspan="2" style="background:#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 2, rij 1 (en 2)
Cel 1 (en 2), rij 3

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

Maak een samenvatting van de tabel:

HTML
<table summary="Deze tabel geeft een overzicht van de ooievaars en hun Latijnse naam">
Wikisyntax
{\| summary="Deze tabel geeft een overzicht van de ooievaars en hun Latijnse naam"

Geef het kopje van een kolom apart aan en geef de scope (hoort de kop bij de kolom of de rij?) aan:

HTML	Wikisyntax
<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	Wikisyntax
<tr> <td>[[Abdim's ooievaar]]</td> <td>''Ciconia abdimii''</td> </tr>	\|- \| [[Abdim's ooievaar]] \| ''Ciconia abdimii''

Voor "normale" browsers zie je geen verschil, maar iemand met een visuele handicap die gebruik maakt 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, etcetera.

Extra opties

nopadding

De cellen van een tabel zijn altijd voorzien van een z.g. padding, dat is een kleine ruimte rondom de inhoud van de cel, om deze a.h.w. "los" te maken van de rand. Wanneer deze ruimte niet gewenst is - b.v. voor het aaneengesloten weergeven van meerdere afbeeldingen, zoals in {{Schaakdiagram}} - kun je aan de tabel de CSS-class nopadding toekennen:

{| class="nopadding"

sortable

Met de CSS-class sortable worden de kolommen van een tabel sorteerbaar; in elke kolomkop verschijnt een knopje, dat bij herhaald klikken afwisselend zorgt voor een oplopende resp. aflopende sortering van die kolom.

{| class="sortable"

Om een kolom uit te sluiten van de mogelijkheid tot sorteren kan aan de bovenste cel of kop van die kolom de class unsortable toegekend worden:

{| class="sortable"
|-
| class="unsortable"

vatop

Om te zorgen dat de inhoud van naast elkaar liggende cellen altijd bovenaan uitgelijnd is (normaliter wordt de inhoud verticaal gecentreerd) kan de CSS-class vatop toegepast worden op de tabel:

{| class="vatop"

Externe links

Voor meer informatie over de wiki-syntax, zie Help:Table op meta (Engels)
Converteer een HTML-tabel in een wiki-tabel, zie hier
Meer hexadecimale kleurencodes: zie Lijst van HTML-kleuren op Wikipedia.
Meer over het correct gebruik van tabellen met HTML vindt u bijvoorbeeld op CommunityMX.com (Engels).
Converteer een in bijvoorbeeld in MS Excel gemaakte tabel in CSV-formaat in wikisyntax: zie hier