Help:Tabellen

Uit Wouda's Wiki

Om tabellen te maken zijn er een aantal specifieke wikicode instructies beschikbaar. Tabellen kunnen ook gemaakt worden met de visuele tekstverwerker, deze tabellen worden dan door de visuele tekstverwerker omgezet in wikicode instructies. Deze pagina gaat in op het maken van tabellen in wikicode en laat de visuele tekstverwerker buiten beschouwing.

Tabel syntax

Wikisyntaxis voor Tabellen
Code Betekenis
{| Tabel start (verplicht)
|+ Tabel titel (optioneel)
|- Tabel rij scheiding
!  Tabel kop (optioneel)
|  Tabel data
|} Tabel einde (verplicht)

Scheidingstekens:

  • |: Scheidingsteken tussen cel opmaak en cel inhoud.
  • ||: Scheidingsteken tussen meerdere cellen als deze op één regel staan.
  • !!: Scheidingsteken tussen meerdere kop cellen als deze op één regel staan.

Speciale tabel commando's:

  • colspan="n": Om meerdere cellen naast elkaar samen te voegen (n is het aantal cellen).
  • rowspan="n": Om meerdere cellen boven elkaar samen te voegen.

De cellen worden van links naar rechts en regel voor regel gedefinieerd. Er mogen meerdere cellen op één regel gedefinieerd worden maar moeten dan wel met || van elkaar gescheiden worden. Ze mogen ook onder elkaar gedefinieerd worden of gecombineerd, een aantal cellen naast elkaar en dan meerdere regels met cellen boven elkaar. Door een regel niet heel lang te maken wordt de leesbaarheid vergroot.

Voor koppen geldt iets vergelijkbaars die mogen ook naast of boven elkaar of gecombineerd gedefinieerd worden. Als scheidingsteken kan zowel || als !! gebruikt worden, de laatste is mooier en geeft een betere leesbaarheid. Als er naast een cel die opgemaakt is als kop een gewone cel moet komen dan moet deze op een nieuwe regel gedefinieerd worden.

Tabelopmaak

Wikitable opmaakprofiel

Met de code class="wikitable" wordt de tabel opgemaakt volgens het wikitable opmaakprofiel. In dit profiel zijn in één klap een heleboel opmaak zaken geregeld. Een tabel ziet er dan meteen uit als veel tabellen op Wikipedia. Er kunnen binnen Wouda's Wiki ook eigen opmaakprofielen gemaakt worden mochten we dat graag willen.

De volgende wikicode: 

{|
|+ Tabel zonder opmaakprofiel
|-
! Kop 1 !! Kop 2 !! Kop 3
|-
| Cel 1.1 || Cel 2.1 || Cel 3.1
|-
| Cel 1.2 || Cel 2.2 || Cel 3.2
|-
| Cel 1.3 || Cel 2.3 || Cel 3.3
|-
| Cel 1.4 || Cel 2.4 || Cel 3.4
|-
|}

Geeft deze tabel:

Tabel zonder opmaakprofiel
Kop 1 Kop 2 Kop 3
Cel 1.1 Cel 2.1 Cel 3.1
Cel 1.2 Cel 2.2 Cel 3.2
Cel 1.3 Cel 2.3 Cel 3.3
Cel 1.4 Cel 2.4 Cel 3.4


De volgende wikicode: 

{| class="wikitable"
|+ Tabel met Wikitable opmaakprofiel
|-
! Kop 1 !! Kop 2 !! Kop 3
|-
| Cel 1.1 || Cel 2.1 || Cel 3.1
|-
| Cel 1.2 || Cel 2.2 || Cel 3.2
|-
| Cel 1.3 || Cel 2.3 || Cel 3.3
|-
| Cel 1.4 || Cel 2.4 || Cel 3.4
|-
|}

Geeft deze tabel:

Tabel met Wikitable opmaakprofiel
Kop 1 Kop 2 Kop 3
Cel 1.1 Cel 2.1 Cel 3.1
Cel 1.2 Cel 2.2 Cel 3.2
Cel 1.3 Cel 2.3 Cel 3.3
Cel 1.4 Cel 2.4 Cel 3.4

Style attribuut

Voor het opmaken van een tabel zijn er zeer veel mogelijkheden. Met het style attribuut kunnen allerlei eigenschappen worden aangepast. Het style attribuut is niet specifiek voor het opmaken van tabellen maar kan gebruikt worden om allerlei zaken te stylen, hier gaan we alleen in op de toepassing voor het stylen van tabellen. Met het style attribuut kunnen één of meerdere eigenschappen tegelijk aangepast worden door ze na elkaar te zetten gescheiden met een puntkomma.

Syntax: style="eigenschap_1: waarde; eigenschap_2: waarde; eigenschap_3: waarde;"

Afhankelijk waar het style attribuut staat in de tabel definitie heeft het betrekking op de gehele tabel, één hele regel of een individuele cel.

  • Een style attribuut op de eerste regel heeft betrekking op de gehele tabel.
  • Staat het style attribuut op een regel met een rij scheiding |-, dan heeft het betrekking op alle cellen van de volgende rij.
  • Elke individuele cel kan opgemaakt worden door het style attribuut voor de cel inhoud te plaatsen, opmaak en inhoud moeten dan gescheiden worden door een door een enkele |.
Een aantal style eigenschappen voor opmaak van tabellen
Eigenschap: waarde Opmerking
text-align: left; Horizontale tekst uitlijning binnen een cel;
links, midden of rechts
text-align: center;
text-align: right;
vertical-align: top; Vertikale tekst uitlijning binnen een cel;
boven, midden of onder
vertical-align: middle;
vertical-align: bottom;
width: 1.5em; breedte van kolom of hele tabel
(afhankelijk van plaatsing),
ook in % of em mogelijk
font-style: italic; Maakt de cel tekst itallic
font-family: monospace; Forceert gebruik van een monospace font
color: green; Tekstkleur
color: #e76700; Tekstkleur in HEX RGB waarde
background-color: #abcdef; achtergrondkleur

Bovenstaande tabel is verre van volledig, zo is de opmaak van randen hier bijvoorbeeld niet behandeld. Wanneer er wensen zijn voor andere opmaak opties kan deze sectie verder uitgewerkt worden.

Uitlijning op de pagina

Met het style attribuut kan ook de plaatsing van de gehele tabel op de pagina bepaald worden alsmede of de tekst er langs doorloopt of niet. Standaard wordt een tabel links op de pagina uitgeleid zonder tekst ernaast. In de tabel genoemde eigenschappen moeten op de eerste regel van de tabel gedefinieerd worden (ze hebben immers betrekking op de gehele tabel).

Style eigenschappen om een tabel uit te lijnen
Eigenschappen en waarden Resultaat
margin-left: 0px; margin-right: auto; Tabel links uitgelijnd, geen tekst ernaast
margin-left: auto; margin-right: 0px; Tabel rechts uitgelijnd, geen tekst ernaast
margin: auto; Tabel centreren, geen tekst ernaast
float:right; margin-left: 10px; Tabel rechts uitgelijnd, met tekst links ernaast
float:left; margin-right: 10px; Tabel links uitgelijnd, met tekst rechts ernaast

Voorbeelden

Vermenigvuldigingstabel

De volgende wikicode: 

{| class="wikitable" style="text-align: center;"
|+ Vermenigvuldigingstabel
|-
! style="width: 1.5em" | ×
! style="width: 1.5em" | 1
! style="width: 1.5em" | 2
! style="width: 1.5em" | 3
! style="width: 1.5em" | 4
|-
! 1
| 1 || 2 || 3 || 4
|-
! 2
| 2 || 4 || 6 || 8
|-
! 3
| 3 || 6 || 9 || 12
|-
! 4
| 4 || 6 || 12 || 16
|-
|}

Geeft deze tabel:

Vermenigvuldigingstabel
× 1 2 3 4
1 1 2 3 4
2 2 4 6 8
3 3 6 9 12
4 4 6 12 16

In deze tabel staat in alle cellen de inhoud gecentreerd, dit is gedaan met de opmaakcode style="text-align: center;" in de eerste regel. Opmaak codes in de eerste regel hebben betrekking op de gehele tabel. Standaard staan alle koppen in de Wikitable opmaak in het midden van de cel gecentreerd en alle data staat links uitgelijnd in de cellen. Voor een dergelijke tabel ziet dat er wat vreemd uit.

Bij de opmaak van de koppen is een breedte opgenomen (style="width: 1.5em"), dit is gedaan zodat alle kolommen dezelfde breedte krijgen. Als je dit niet doet krijgen de kolommen waar getallen met meer dan één cijfers in staan een veel grotere breedte dan de andere kolommen.


Tabel met datareeksen in kolommen

De volgende wikicode: 

{| class="wikitable" style="text-align: center;"
|+ Opbouw schoorsteen wand
|-
! Wanddikte <br/> in cm !! Vakhoogte <br/> in m
|-
| 26 || 5,00
|-
| 33 || 5,00
|-
| 38 || 5,00
|-
| 43 || 5,00
|-
| 48 || 5,00
|-
| 53 || 5,00
|-
| 58 || 5,00
|-
| 65 || 5,00
|-
| 70 || 4,00
|-
| 75 || 4,00
|-
| 80 || 4,00
|-
| 100 || 6,50
|-
| 115 || 1,50
|-
|}

Geeft deze tabel:

Opbouw schoorsteen wand
Wanddikte
in cm		 Vakhoogte
in m
26 5,00
33 5,00
38 5,00
43 5,00
48 5,00
53 5,00
58 5,00
65 5,00
70 4,00
75 4,00
80 4,00
100 6,50
115 1,50

In bovenstaande tabel zijn de kolom koppen over twee regels verdeeld dit is gedaan door een "break" (<br/>) in de titel op te nemen.

Datareeksen in kolommen is gebruikelijk in tabellen. Als er echter weinig kolommen zijn in combinatie met een wat langere datareeks leidt dit tot een hoge smalle tabel. In de standaard plaatsing van de tabel tussen de tekst leidt dit tot grote witvlakken naast de tabel. Een oplossing hiervoor kan zijn om de tekst om de tabel heen te laten lopen, bijvoorbeeld de tabel rechts te plaatsen en dan links ernaast de tekst te laten doorlopen. Een ander bezwaar voor een smalle tabel is dat er voor voor de titel van de tabel maar weinig ruimte is, een korte tabel titel is dan noodzakelijk.


Tabel met datareeksen in rijen

Om bovenstaande bezwaren bij een smalle hoge tabel te voorkomen kan de tabel natuurlijk ook op zijn kant gedraaid worden. Hieronder is dezelfde data gebruikt als hierboven maar is de tabel liggend weergegeven.

De volgende wikicode: 

{| class="wikitable" style="margin: auto; text-align: center;"
|+ Wanddikte en vakhoogte van de 13 trommels, te beginnen met de onderste trommel
|-
! style="text-align: left;" | Wanddikte in cm
| 115 || 100 || 80 || 75 || 70 || 65 || 58 
| 53 || 48 || 43 || 38 || 33 || 26
|-
! style="text-align: left;" | Vakhoogte in m 
| 1,50 || 6,50 || 4,00 || 4,00 || 4,00 || 5,00 || 5,00 
| 5,00 || 5,00 || 5,00 || 5,00 || 5,00 || 5,00
|-
|}

Geeft deze tabel:

Wanddikte en vakhoogte van de 13 trommels, te beginnen met de onderste trommel
Wanddikte in cm 115 100 80 75 70 65 58 53 48 43 38 33 26
Vakhoogte in m 1,50 6,50 4,00 4,00 4,00 5,00 5,00 5,00 5,00 5,00 5,00 5,00 5,00

Door de marge links en rechts naast de tabel op auto te zetten met de instructie margin: auto wordt de tabel gecentreerd.


Cellen samenvoegen, colspan & rowspan

De volgende wikicode: 

{| class="wikitable" style="text-align: center;"
|+ Wanddikten en vakhoogten schoorsteen
|-
! colspan="2" | Schoorsteen wand
! colspan="2" | Schutwand
|- style="vertical-align:top;"
! Wanddikte <br/> (cm) !! Vakhoogte <br/> (m)
! Wanddikte <br/> (cm) !! Vakhoogte <br/> (m)
|-
| 26 || 5,00 || rowspan="7" | || rowspan="7" |
|-
| 33 || 5,00
|-
| 38 || 5,00
|-
| 43 || 5,00
|-
| 48 || 5,00
|-
| 53 || 5,00
|-
| 58 || 5,00
|-
| 65 || 5,00 || 11 || 6,00
|-
| 70 || 4,00 || 14 || 6,00
|-
| 75 || 4,00 || 16 || 5,00
|-
| 80 || 4,00 || 21 || 5,00
|-
| 100 || 6,50 || 26 || 4,00
|-
| 115 || 1,50 || 31 || 4,00
|-
|}

Geeft deze tabel:

Wanddikten en vakhoogten schoorsteen
Schoorsteen wand Schutwand
Wanddikte
(cm)		 Vakhoogte
(m) 		Wanddikte
(cm)		 Vakhoogte
(m)
26 5,00
33 5,00
38 5,00
43 5,00
48 5,00
53 5,00
58 5,00
65 5,00 11 6,00
70 4,00 14 6,00
75 4,00 16 5,00
80 4,00 21 5,00
100 6,50 26 4,00
115 1,50 31 4,00

Met colspan="2" zijn hierbij op de eerste regel cellen samengevoegd voor de titels "Schoorsteen wand" en "Schutwand". Daarnaast zijn er met het commando rowspan="7" cellen samengevoegd in de rechter twee kolommen. De inhoud van deze samengevoegde cellen zijn in dit voorbeeld leeg gelaten.


Tekst naast een tabel

De volgende samengevatte wikicode: 

{| class="wikitable" style="float:right; margin-left: 10px;"
|+ Tabel met Wikitable opmaakprofiel
|-
! Kop 1 !! Kop 2 !! Kop 3
|-
| Cel 1.1 || Cel 2.1 || Cel 3.1
|-
| Cel 1.2 || Cel 2.2 || Cel 3.2
|-
| Cel 1.3 || Cel 2.3 || Cel 3.3
|-
| Cel 1.4 || Cel 2.4 || Cel 3.4
|-
|}

Lorem ipsum ... dui. {Alinea 1}

Etiam rhoncus ... lacinia. {Alinea 2}

Geeft deze alinea's met tabel aan rechter zijde:

Tabel met Wikitable opmaakprofiel
Kop 1  Kop 2  Kop 3
Cel 1.1 Cel 2.1 Cel 3.1
Cel 1.2 Cel 2.2 Cel 3.2
Cel 1.3 Cel 2.3 Cel 3.3
Cel 1.4 Cel 2.4 Cel 3.4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

Als de tekst niet lang genoeg is zal een volgend hoofdstuk ook al naast de tabel beginnen, de tekst loopt gewoon door. Dit ziet er minder fraai uit, mooier is dat een nieuw hoofdstuk ook de volledige breedte krijgt. Om dit te bereiken dient er een <br clear="all"> ingevoegd te worden net voor de tekst die weer de hele breedte moet krijgen.

Links

Op de Mediawiki site is een uitgebreide handleiding te vinden over het maken van tabellen:

Ook op Wikipedia zijn er diverse hulp pagina's te vinden over het bewerken van pagina's, ook over het maken van tabellen. Op de Wikipedia sites is er veel aandacht besteed aan het scheiden van inhoud (de tekst van een pagina) en de opmaak. Veel opmaak zaken zijn bijvoorbeeld geregeld in sjablonen. Een gevolg hiervan is dat op Wikipedia genoemde oplossingen om tabellen vorm te geven niet altijd direct werkt op Wouda's Wiki. Als een een genoemde oplossing bijvoorbeeld begint met {{ wordt er een sjabloon gebruikt. Dit zal dan waarschijnlijk niet zomaar werken op Wouda's wiki. Er is dan meer voor nodig om het werkend te krijgen op deze Wiki. Als je iets op de Wikipedia pagina's ziet dat je op een pagina wilt gebruiken maar niet werkt, laat dat dan weten zodat we kunnen kijken hoe we dit kunnen implementeren op Wouda's Wiki.


Overgenomen van "https://wiki.woudagemaal.nl/w/index.php?title=Help:Tabellen&oldid=10177"