Help:Gebruik van tabellen
In de wikisoftware kunnen 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. Daarnaast is het ook mogelijk om via de visuele tekstverwerker een tabel aan te maken (dit wordt hier verder niet behandeld) - deze wordt dan opgeslagen in wikicode. 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 geprefereerd, door middel van de attributen style en/of class. 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;". CSS-klassen kunnen worden gecombineerd: class="wikitable vatop".
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 | brontekst 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 pipe worden genoemd.
- Iedere tabel wordt gestart met
{|. Achter deze opening kan er een opmaakprofiel (class) worden geplaatst, zodat de tabel met de standaardopmaak wordt getoond die in veel artikelen wordt gebruikt. Een standaard opmaakprofiel dat we veel voor tabellen gebruiken isclass="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 eruitziet:
Code
{|
| Cel 1
| Cel 2
| Cel 3
|-
| Cel 4 || Cel 5 || Cel 6
|}
Resultaat
| 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 | brontekst 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.
Code
{|
! Kop 1
! Kop 2
! Kop 3
|-
| Cel 4 || Cel 5 || Cel 6
|}
Resultaat
| Kop 1 | Kop 2 | Kop 3 |
|---|---|---|
| Cel 4 | Cel 5 | Cel 6 |
Hieronder is een soortgelijke tabel te zien met een andere syntax. In de eerste kolom is een kop toegevoegd.
Code
{|
! Kop 1 !! Kop 2 !! Kop 3
|-
! Kop 4
| Cel 5 || Cel 6
|}
Resultaat
| Kop 1 | Kop 2 | Kop 3 |
|---|---|---|
| Kop 4 | Cel 5 | Cel 6 |
Standaard opmaakprofielen
[bewerken | brontekst bewerken]Wikitable
[bewerken | brontekst bewerken]Een van de standaard opmaakprofielen is wikitable (vroeger prettytable). 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 | brontekst 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 |
Inhoud uitlijnen
[bewerken | brontekst bewerken]Standaard wordt de inhoud van tabelcellen verticaal gecentreerd en horizontaal links uitgelijnd. Tabelkoppen worden standaard gecentreerd. Met de toevoeging class="vatop" (vertical align top) kan de inhoud verticaal bovenin in de cellen worden uitgelijnd. Met de klassen ta-left (text align left), ta-center (text align center) en ta-right (text align right) kan de horizontale uitlijning worden gewijzigd. De klassen kunnen zowel worden toegepast op een cel, als op een rij, als op de tabel. Om kolominhoud uit te lijnen, moet aan elke cel in de kolom de gewenste klasse worden toegevoegd.
Voorbeeld 1: kolominhoud verticaal bovenin uitlijnen met vatop
Code
{| class="wikitable"
! Kop 1
! Kop 2
! Kop 3
|-
| [[Bestand:Cabinet Member.svg|50px]]
| Persoon 1
| class="vatop" | Functie A
|-
| [[Bestand:Cabinet Member.svg|50px]]
| Persoon 2
| class="vatop" | Functie B
|}
Resultaat
| Kop 1 | Kop 2 | Kop 3 |
|---|---|---|
|
Persoon 1 | Functie A |
|
|
Persoon 2 | Functie B |
Voorbeeld 2: regelinhoud verticaal bovenin uitlijnen
Code
{| class="wikitable"
! Kop 1
! Kop 2
! Kop 3
|-
| [[Bestand:Cabinet Member.svg|50px]]
| Persoon 1
| Functie A
|- class="vatop"
| [[Bestand:Cabinet Member.svg|50px]]
| Persoon 2
| Functie B
|}
Resultaat
| Kop 1 | Kop 2 | Kop 3 |
|---|---|---|
|
|
Persoon 1 | Functie A |
|
|
Persoon 2 | Functie B |
Voorbeeld 3: gehele tabelinhoud verticaal bovenin uitlijnen (met uitzondering van de tabelkoppen)
Code
{| class="wikitable vatop"
! Kop 1
! Kop 2
! Kop 3
|-
| [[Bestand:Cabinet Member.svg|50px]]
| Persoon 1
| Functie A
|-
| [[Bestand:Cabinet Member.svg|50px]]
| Persoon 2
| Functie B
|}
Resultaat
| Kop 1 | Kop 2 | Kop 3 |
|---|---|---|
|
|
Persoon 1 | Functie A |
|
|
Persoon 2 | Functie B |
De klassen ta-left, ta-center en ta-right werken op dezelfde manier.
NB In het verleden werden de attributen valign= en align= gebruikt. Deze zijn verouderd en zouden niet meer gebruikt moeten worden. Gebruik in plaats daarvan class= met een van de hierboven genoemde klassen.
Uitgebreide wikisyntaxis
[bewerken | brontekst 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) zoals infoboxen en zijbalken. 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 | brontekst 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 | brontekst 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 | brontekst 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 |- | cel1 || parameters1 | cel2 || cel3
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 | brontekst 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 | brontekst bewerken]Tabelkoppen werken hetzelfde als cellen, maar dan met een ! in plaats van een
|. Parameters voor koppen moeten wel met |worden afgesloten, 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 | brontekst bewerken]Eenvoudige tabel
[bewerken | brontekst bewerken] {|
! Hebreeuws
! Grieks
|-
| Alef || Alfa
|-
| Bet || Bèta
|-
| Gimel || Gamma
|}
geeft:
| Hebreeuws | Grieks |
|---|---|
| Alef | Alfa |
| Bet | Bèta |
| Gimel | Gamma |
Wikitable
[bewerken | brontekst bewerken]Met class="wikitable" kunt u eenvoudig een tabel in de standaard wiki-opmaak maken. Een voorbeeld:
{| class="wikitable" style="width: 30em"
! Planten || Dieren
|-
| Gras || Koe
|-
| Eucalyptus || Koala
|}
geeft:
| Planten | Dieren |
|---|---|
| Gras | Koe |
| Eucalyptus | Koala |
Een iets complexer voorbeeld:
{| class="wikitable" style="width: 30em"
! 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
|}
geeft:
| Dijkgraven per ambacht | |
|---|---|
| Geestmerambacht | Beide ambachten vielen onder dezelfde dijkgraaf |
| Schager en Niedorper Cogge | |
Een ingewikkelder tabel
[bewerken | brontekst bewerken]Code
{| 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
|}
Resultaat
| 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 | brontekst bewerken]Met de aanduiding class="mw-collapsible" wordt de tabel inklapbaar. De toevoeging "mw-collapsed" zorgt ervoor dat de tabel in eerste instantie al ingeklapt is.
Opmerking: in eerdere versies van dit artikel werd de collapsible-klasse aanbevolen, maar deze is vervangen door mw-collapsible. Deze is onderdeel van de MediaWiki-software, en kan ook gebruikt worden om andere elementen dan tabellen inklapbaar te maken.
{| class="wikitable mw-collapsible mw-collapsed" style="width:18em;"
! colspan="2" | Koptekst
|-
| Rij 1, kolom 1
| Rij 1, kolom 2
|-
| Rij 2, kolom 1
| Rij 2, kolom 2
|}
| Koptekst | |
|---|---|
| Rij 1, kolom 1 | Rij 1, kolom 2 |
| Rij 2, kolom 1 | Rij 2, kolom 2 |
Zie ook Sjabloon:Uitklappen.
Inhoud van de kolommen sorteren
[bewerken | brontekst bewerken]
Zie mw:Help:Sortable tables voor het hoofdartikel over dit onderwerp.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.
- Uitsluiten van sortering
- Een kolom die niet sorteerbaar hoeft te zijn, sluit je uit door in de kop van die kolom
class="unsortable"te plaatsen. - Rijen kun je uitsluiten van sortering door ze als titelrij te markeren. Let op: dit werkt alleen voor rijen bovenaan of onderaan. Je kunt bijvoorbeeld twee rijen bovenaan én twee rijen onderaan uitsluiten, maar niet een rij in het midden. Zo'n middenrij krijgt wel de opmaak van een titelrij (gecentreerd, vet), maar wordt toch meegenomen bij het sorteren. Een tabel met verkoopresultaten kan dus wel eindigen met twee rijen voor totalen (als percentages en als bedragen), maar subtotalen geven een onbruikbaar sorteerresultaat.
Code
{| class="wikitable sortable"
! Station
! Bouwjaar
! class="unsortable" | Afbeelding
|-
| [[Station Abcoude|Abcoude]]
| 1871
| [[Bestand:Station Abcoude 2.JPG|80x80px]]
|-
| [[Station Hoorn|Hoorn]]
| 1883
| [[Bestand:Station Hoorn1.jpg|80x80px]]
|-
| [[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 probeer het met 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 |
Slim sorteren
[bewerken | brontekst bewerken]Bij getallen en data wordt slim gesorteerd, maar alleen als alle gegevens in de tabel correct gevormd zijn. De maand kan in letters, desnoods afgekort, of cijfers worden opgegeven. Is er een klein foutje, dan wordt de kolom alfabetisch (of onvoorspelbaar) gesorteerd. Probeer het met de tabel hieronder.
| Getal, vet, cursief, kleur en align zijn toegestaan |
Slecht getal, macht van 10 niet toegestaan |
Slecht getal, spaties i.p.v punten niet toegestaan |
Datum | Slechte datum, oct i.p.v. okt |
Slechte datum, jaartal ontbreekt |
|---|---|---|---|---|---|
| 2 | 2 | 2 | 9 oktober 2018 | 9 oktober 2018 | 9 oktober |
| 5,6 | 5,6 | 5,6 | 12 april 2019 | 12 april 2019 | 12 april |
| 5 | 5 | 5 | 6 3 2019 | 6 maart 2019 | 6 maart |
| 2e10 | 2×1010 | 2e10 | 3 augustus 2017 | 3 augustus 2017 | 3 augustus |
| 299.792.457 | 299.792.457 | 299 792 457 | 12 januari 2019 | 12 jan 2019 | 12 januari |
| 300 | 300 | 300 | 12 apr 2019 | 12 apr 2019 | |
| 6 | 6 | 6 | 3 aug 2017 | 3 aug 2017 | |
| 10 | 10 | 10 | 6 mrt 2019 | 6 mrt 2019 | |
| 2e8 | 2e8 | 2e8 | 9 okt 2018 | 9 oct 2018 |
Soms staan er een paar onvolledige data in een tabel, bijvoorbeeld alleen een jaartal, of alleen maand en jaartal. Goed sorteren is dan niet mogelijk: je weet niet of 1975 eerder of later komt dan 4 juni 1975, maar je kunt proberen er het beste van te maken. Slim sorteren werkt echter helemaal niet, de data moeten volledig zijn. Je kunt een onvolledige datum volledig maken met {{Sorteer|4| juni 1975}} of {{Sorteer|4 juni|1975}}. Er wordt dan slim gesorteerd op de volledige datum, maar alleen het rechter deel wordt getoond.
Tabellen naast elkaar
[bewerken | brontekst bewerken]Twee of meer tabellen (maar ook andere lijsten, afbeeldingen, enz.) kunnen naast elkaar geplaatst worden met de sjablonencombinatie {{BeginKolommen}}, {{NieuweKolom}} en {{EindeKolommen}}.
Code
{{BeginKolommen|compact=ja}}
{| class="wikitable"
!Tabel 1
|-
| Amsterdam
|-
| Groningen
|-
| Utrecht
|-
| Maastricht
|}
{{NieuweKolom}}
{| class="wikitable"
!Tabel 2
|-
| Leeuwarden
|-
| Assen
|-
| Sint Biggeklooster
|}
{{EindeKolommen}}
- Resultaat
| Tabel 1 |
|---|
| Amsterdam |
| Groningen |
| Utrecht |
| Maastricht |
| Tabel 2 |
|---|
| Leeuwarden |
| Assen |
| Sint Biggeklooster |
Lange tabel met vaste kop
[bewerken | brontekst bewerken]Bij langere tabellen verdwijnt de tabelkop makkelijk uit beeld, zodat de betekenis van de kolommen onduidelijk wordt. Er zijn enkele methoden om de rij met koppen in beeld te houden.
Methode 1: Laat de tabel voorafgaan door {{Vastzetten tabelkop}}. Dit werkt alleen met sorteerbare tabellen, die dus de class sortable hebben.
Methode 2: Deze vraagt een paar stappen:
- Een gebied definiëren waarin de tabel getoond wordt en daarbij de scroll-optie vastleggen.
- De tabelrij met koppen markeren als blijvend in het venster.
<div style="height: 600px; overflow-y: scroll; padding: 0;">
{|
|- style=" position: sticky; top: 0; background:white; "
! tabelkop
.
.
|}
</div>
Bovenstaande code beschrijft een schermdeel (<div>) met een hoogte ("height") van 600 pixels. Als de hoogte groter wordt, zal er gescrold worden. De "padding"-parameter geeft aan dat de tabel de hele gereserveerde ruimte kan gebruiken.
De style-toevoeging bij de start van de kopregel zorgt voor het vastleggen ervan bij scrollen. Bij de parameter "top" werkt alleen de waarde 0 (nul). Het opgeven van de background is nodig om te voorkomen dat tijdens het scrollen de gescrolde tekst "achter" de kop door omhoog loopt. De gebruikte kleurnamen en andere zijn te vinden op deze webpagina.
Voorbeeld:
- (Scrol over de elementen aan de rechterkant. Voor het uitproberen is de hoogte op slechts 100 px gezet.)
| Code | Resultaat | |||||||
|---|---|---|---|---|---|---|---|---|
| <div style="height: 100px; overflow-y: scroll; padding: 0;">
{| class="wikitable"
|- style=" position: sticky; top: 0; background:white; "
! Element
|-
| Waterstof
|-
| Helium
|-
| Lithium
|-
| Beryllium
|-
| Boor
|}
|
|
Brede tabel met vaste eerste kolom
[bewerken | brontekst bewerken]Bij brede tabellen met veel kolommen wil de eerste kolom met essentiële rij-informatie uit beeld verdwijnen. Onderstaande code biedt een mogelijkheid om de eerste kolom in beeld te houden.
- Een gebied definiëren waarin de tabel getoond wordt en daarbij de scroll-optie vastleggen.
- De tabelrij met koppen markeren als blijvend in het venster.
<div style="width: 800px; overflow-x: scroll; padding: 0;">
{|
|-
! style=" position: sticky; left: 0; background:white; " | kolom1
! kolom2 !! kolom3
.
.
|}
</div>
Bovenstaande code beschrijft een schermdeel (<div>) met een breedte ("width") van 800 pixels. Als de breedte groter wordt, zal er gescrold worden. De "padding"-parameter geeft aan dat de tabel de hele gereserveerde ruimte kan gebruiken.
De style-toevoeging voor de kop van de eerste kolom zorgt voor het vastleggen ervan bij scrollen. Bij de parameter "left" werkt alleen de waarde 0 (nul). Het opgeven van de background is nodig om te voorkomen dat tijdens het scrollen de gescrolde tekst "achter" de kop door schuift. De gebruikte kleurnamen en andere zijn te vinden op deze webpagina.
Voorbeeld:
- (Gebruik de schuifknop onder de tabel. Voor het uitproberen is de breedte op slechts 100 px gezet.)
| Code | Resultaat | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<div style="width: 100px; overflow-x: scroll; padding: 0;">
{| class="wikitable"
|-
! style=" position: sticky; left: 0; background:white; " | Element
! Symb. !! Z !! M !!
|-
| style=" position: sticky; left: 0; background:white; " | Waterstof || H || 1 || 1
|-
| style=" position: sticky; left: 0; background:white; " | Helium || He || 2 || 4
|-
| style=" position: sticky; left: 0; background:white; " | Lithium || Li || 3 || 7
|-
| style=" position: sticky; left: 0; background:white; " | Beryllium || Be || 4 || 9
|-
| style=" position: sticky; left: 0; background:white; " | Boor || B || 5 || 11
|}
</div>
|}
|
|
Grote tabel met vaste kop en vaste eerste kolom
[bewerken | brontekst bewerken]Bovenstaande tabelopties kunnen voor een erg grote tabel in principe gecombineerd worden, maar dat lijkt voor de tabelcel links boven niet goed te werken.
HTML
[bewerken | brontekst bewerken]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
[bewerken | brontekst bewerken]| HTML | Wikisyntaxis |
|---|---|
<table class="wikitable">
<tr>
<th>Kop één</th>
<th>Kop twee</th>
</tr>
<tr>
<td>Onderwerp één</td>
<td>Onderwerp twee</td>
</tr>
<tr>
<td>Onderwerp drie</td>
<td>Onderwerp vier</td>
</tr>
</table>
|
{| class="wikitable"
! Kop één
! Kop twee
|-
| Onderwerp één
| Onderwerp twee
|-
| Onderwerp drie
| Onderwerp vier
|}
|
maakt:
| Kop één | Kop twee |
|---|---|
| Onderwerp één | Onderwerp twee |
| Onderwerp drie | Onderwerp vier |
Iets ingewikkeldere tabel
[bewerken | brontekst bewerken]| HTML | Wikisyntaxis |
|---|---|
<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>
|
|- | Onderwerp één | Onderwerp twee |- | rowspan="2" | Onderwerp drie | Onderwerp vier |- | Onderwerp vijf |
geeft:
| Onderwerp één | Onderwerp twee |
| Onderwerp drie | Onderwerp vier |
| Onderwerp vijf |
Toegankelijkheid
[bewerken | brontekst bewerken]Enkele tips om een tabel geschikt te maken voor een zogenaamde braillelezer of browser die de tekst voorleest:
- 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 | brontekst 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.
Externe links
[bewerken | brontekst bewerken]- Voor meer informatie over de wikisyntaxis, zie mw:Help:Tables (Engels)
- Meer over het correct gebruik van tabellen met HTML vindt u bijvoorbeeld op CommunityMX.com (Engels).
- (en) Copy and Paste Excel-to-Wiki Converter
- (en) This page allows you to enter a table in CSV-format and convert it to HTML or the WikiMedia format for tables