Help:Kolommen: verschil tussen versies

Uit Wouda's Wiki
VisueelWikitekst
(Nieuwe hulp pagina met instructies voor het maken van tabellen)
 
k (Cierick Goos heeft de pagina Help/Kolommen hernoemd naar Help:Kolommen zonder een doorverwijzing achter te laten)
 
(8 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
{{Help/Navigatie}}
{{Help/Navigatie}}
Om kolommen te maken zijn zijn er een aantal opmaakprofielen (classes) aangemaakt. De opmaak van de kolom hoeft hiermee niet meer met in-line opmaakistructies in de wikicode gedaan te worden, de opmaakinstructies zijn nu overgbracht overgebracht naar [[MediaWiki:Common.css]] en [[MediaWiki:Mobile.css]]. In de wiki code hoeft slechts de tekst die in kolommen gezet moet worden tussen <code>&lt;div>...&lt;/div></code> instructies gezet te worden en aan de <code>&lt;div></code> moet een opmaakprofiel (class) gekoppeld worden.


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.
__TOC__
==Tabel syntax==
{| class="wikitable" style="text-align: center;"
|+ Wikisyntaxis voor Tabellen
|-
! Code !! Betekenis
|-
| style="font-family: monospace;" | {&#x7C; || style="text-align: left;" | Tabel start (verplicht)
|-
| style="font-family: monospace;" | &#x7C;+ || style="text-align: left;" | Tabel titel (optioneel)
|-
| style="font-family: monospace;" | &#x7C;- || style="text-align: left;" | Tabel rij scheiding
|-
| style="font-family: monospace;" | &#x21;&nbsp; || style="text-align: left;" | Tabel kop (optioneel)
|-
| style="font-family: monospace;" | &#x7C;&nbsp; || style="text-align: left;" | Tabel data
|-
| style="font-family: monospace;" | &#x7C;}  || style="text-align: left;" | Tabel einde (verplicht)
|-
|}
Scheidingstekens:
* <code>&#x7C;</code>: Scheidingsteken tussen cel opmaak en cel inhoud.
* <code>&#x7C;&#x7C;</code>: Scheidingsteken tussen meerdere cellen als deze op één regel staan.
* <code>&#x21;&#x21;</code>: Scheidingsteken tussen meerdere kop cellen als deze op één regel staan.
Speciale tabel commando's:
* <code>colspan="<var>n</var>"</code>: Om meerdere cellen naast elkaar samen te voegen (<code><var>n</var></code> is het aantal cellen).
* <code>rowspan="<var>n</var>"</code>: 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 <code>&#x7C;&#x7C;</code> 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 <code>&#x7C;&#x7C;</code> als <code>&#x21;&#x21;</code> 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 <code>class="wikitable"</code> 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.
{{BeginFlexKolommen}}
<u>De volgende wikicode:</u>
<pre>
<pre>
{|
<div class="kolommen-2">
|+ Tabel zonder opmaakprofiel
Tekst...
|-
</div>
! 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
|-
|}
</pre>
</pre>
{{NieuweFlexKolom}}
<u>Geeft deze tabel:</u>
{|
|+ 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
|-
|}
{{EindeFlexKolommen}}


De inhoud van de kolommen hoeft overigens niet alleen uit platte tekst te bestaan. Alle normale inhoud kan in kolommen geplaatst worden. Op de [[index]] pagina is deze techniek gebruikt om de lijsten met wiki pagina's in kolommen te zetten.


{{BeginFlexKolommen}}
De volgende opmaakprofielen zijn er beschikbaar:
<u>De volgende wikicode:</u>
* <code>class="kolommen-2"</code>
<pre>
* <code>class="kolommen-3"</code>
{| class="wikitable"
* <code>class="kolommen-4"</code>
|+ 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
|-
|}
</pre>
{{NieuweFlexKolom}}
<u>Geeft deze tabel:</u>
{| 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
|-
|}
{{EindeFlexKolommen}}


===Style attribuut===
Het cijfer geeft het <u>maximale</u> aantal kolommen aan. Als er niet voldoende ruimte beschikbaar is (als de pagina breedte onvoldoende is) en de kolommen te smal dreigen te worden wordt het aantal kolommen automatisch verminderd. Zo zal het opmaakprofiel "kolommen-4" vier smalle kolommen geven op een desktop in een voldoende groot venster. Op een telefoon zal dit herschalen naar drie kolommen als de telefoon in landscape mode staat (telefoon over dwars), en nog maar twee kolommen in portret mode (telefoon rechtop).
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: <code>style="eigenschap_1: waarde; eigenschap_2: waarde; eigenschap_3: waarde;"</code>
Bovenstaande opmaakprofielen kunnen nog gecombineerd worden met het opmaakprofiel <code>krant</code>. Dit zorgt ervoor dat de kolom opgemaakt wordt als in een krant; de tekst wordt uitgevuld en tussen de alinea's komt geen extra witruimte meer maar bij elke alinea springt de eerste regel een stukje in. Combineren van opmaakprofielen gaat als volgt:
* <code>class="kolommen-2 krant"</code>
* <code>class="kolommen-3 krant"</code>
* <code>class="kolommen-4 krant"</code>


Afhankelijk waar het style attribuut staat in de tabel definitie heeft het betrekking op de gehele tabel, één hele regel of een individuele cel.
==Voorbeelden==
* Een style attribuut op de eerste regel heeft betrekking op de gehele tabel.
===Kolommen-4===
* Staat het style attribuut op een regel met een rij scheiding <code>&#x7C;-</code>, dan heeft het betrekking op alle cellen van de volgende rij.
Alleen tekst:
* 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 <code>&#x7C;</code>.
<div class="kolommen-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.


{| class="wikitable"
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.
|-
|+ Een aantal style eigenschappen voor opmaak van tabellen
|-
! Eigenschap: waarde !! Opmerking
|-
| text-align: left; || rowspan="3" | Horizontale tekst uitlijning binnen een cel; <br/> links, midden of rechts
|-
| text-align: center;
|-
| text-align: right;
|-
| vertical-align: top; || rowspan="3" | Vertikale tekst uitlijning binnen een cel; <br/> boven, midden of onder
|-
| vertical-align: middle;
|-
| vertical-align: bottom;
|-
| width: 1.5em; || breedte van kolom of hele tabel <br/> (afhankelijk van plaatsing), <br/> 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.
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.
</div>


===Uitlijning op de pagina===
Een lijst:
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).
<div class="kolommen-4">
* Item 1: Mandarijnen
* Item 2: Appels
* Item 3: Peren
* Item 4: Fruit met echt een heel lange naam
* Item 5: Kiwi's
* Item 6: Druiven
* Item 7: Bananen
* Item 8: Papaja's
* Item 9: Ananas
* Item 10: Bosbessen
</div>


{| class="wikitable"
===Kolommen-3===
|-
<div class="kolommen-3">
|+ Style eigenschappen om een tabel uit te lijnen
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.
|-
! 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==
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.
===Vermenigvuldigingstabel===
{{BeginFlexKolommen}}
<u>De volgende wikicode:</u>
<pre>
{| class="wikitable" style="text-align: center;"
|+ Vermenigvuldigingstabel
|-
! style="width: 1.5em" | &times;
! 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
|-
|}
</pre>
{{NieuweFlexKolom}}
<u>Geeft deze tabel:</u>
{| class="wikitable" style="text-align: center;"
|+ Vermenigvuldigingstabel
|-
! style="width: 1.5em" | &times;
! 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
|-
|}
{{EindeFlexKolommen}}


In deze tabel staat in alle cellen de inhoud gecentreerd, dit is gedaan met de opmaakcode <code>style="text-align: center;"</code> 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.
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.
</div>


Bij de opmaak van de koppen is een breedte opgenomen (<code>style="width: 1.5em"</code>), 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.
===Kolommen-2===
<div class="kolommen-2">
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.
===Tabel met datareeksen in kolommen===
</div>
{{BeginFlexKolommen}}
<u>De volgende wikicode:</u>
<pre>
{| 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
|-
|}
</pre>
{{NieuweFlexKolom}}
<u>Geeft deze tabel:</u>
{| 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
|-
|}
{{EindeFlexKolommen}}


In bovenstaande tabel zijn de kolom koppen over twee regels verdeeld dit is gedaan door een "break" (<code>&lt;br/></code>) in de titel op te nemen.
===Kolommen-3 krant===
<div class="kolommen-3 krant">
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.


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.
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.
</div>


----
===Kolommen-2 krant===
===Tabel met datareeksen in rijen===
<div class="kolommen-2 krant">
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.
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.


<u>De volgende wikicode:</u>
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.
<pre>
{| 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
|-
|}
</pre>


<u>Geeft deze tabel:</u>
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.
{| class="wikitable" style="margin: auto; text-align: center;"
</div>
|+ 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
|-
|}


Door de marge links en rechts naast de tabel op <code>auto</code> te zetten met de instructie <code>margin: auto</code> wordt de tabel gecentreerd.
==Kolommen op basis van FlexBox==
Maakt twee kolommen met controle over het einde van de eerste kolom. Als er te weinig ruimte is zoals op een kleiner scherm worden de twee kolommen onder elkaar geplaatst en lijkt het een doorlopende tekst.


Om het voor de gebruiker gemakkelijker te maken om te gebruiken en te lezen is de wikicode verplaatst naar een aantal sjablonen.
* <code>&#x7B;{BeginFlexKolommen}}</code>
* <code>&#x7B;{NieuweFlexKolom}}</code>
* <code>&#x7B;{EindeFlexKolommen}}</code>


----
===Cellen samenvoegen, colspan & rowspan===
{{BeginFlexKolommen}}
<u>De volgende wikicode:</u>
<u>De volgende wikicode:</u>
<pre>
<pre>
{| class="wikitable" style="text-align: center;"
{{BeginFlexKolommen}}
|+ Wanddikten en vakhoogten schoorsteen
Lorem ipsum ... arcu. {Alinea 1}
|-
! 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
|-
|}
</pre>
{{NieuweFlexKolom}}
<u>Geeft deze tabel:</u>
{| 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
|-
|}
{{EindeFlexKolommen}}


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


Quisque rutrum. ... ipsum. {Alinea 3}
{{NieuweFlexKolom}}
Nam quam ... libero. {Alinea 4}


----
Fusce vulputate ... lacinia. {Alinea 5}
===Tekst naast een tabel===
{{EindeFlexKolommen}}
<u>De volgende samengevatte wikicode:</u>
<pre>
{| 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}
</pre>
</pre>
<u>Geeft deze alenea's met tabel aan rechter zijde:</u>
{| 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 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.
<u>Geeft het volgende resultaat:</u>
{{BeginFlexKolommen}}
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.


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.  
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.
----


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 <code>&lt;br clear="all"></code> ingevoegd te worden net voor de tekst die weer de hele breedte moet krijgen.
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.
{{NieuweFlexKolom}}
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.


==Links==
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.  
Op de Mediawiki site is een uitgebreide handleiding te vinden over het maken van tabellen:
{{EindeFlexKolommen}}
* https://www.mediawiki.org/wiki/Help:Tables
 
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 <code>{{</code> 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.
* Op de Nederlandse Wikipedia: https://nl.wikipedia.org/wiki/Help:Gebruik_van_tabellen
* Op de Engelse Wikipedia: https://en.wikipedia.org/wiki/Help:Table
<br>
<br>
[[Category:Help]]
[[Category:Help]]

Huidige versie van 7 jan 2024 om 12:47

Om kolommen te maken zijn zijn er een aantal opmaakprofielen (classes) aangemaakt. De opmaak van de kolom hoeft hiermee niet meer met in-line opmaakistructies in de wikicode gedaan te worden, de opmaakinstructies zijn nu overgbracht overgebracht naar MediaWiki:Common.css en MediaWiki:Mobile.css. In de wiki code hoeft slechts de tekst die in kolommen gezet moet worden tussen <div>...</div> instructies gezet te worden en aan de <div> moet een opmaakprofiel (class) gekoppeld worden. 

<div class="kolommen-2">
Tekst...
</div>

De inhoud van de kolommen hoeft overigens niet alleen uit platte tekst te bestaan. Alle normale inhoud kan in kolommen geplaatst worden. Op de index pagina is deze techniek gebruikt om de lijsten met wiki pagina's in kolommen te zetten.

De volgende opmaakprofielen zijn er beschikbaar:

  • class="kolommen-2"
  • class="kolommen-3"
  • class="kolommen-4"

Het cijfer geeft het maximale aantal kolommen aan. Als er niet voldoende ruimte beschikbaar is (als de pagina breedte onvoldoende is) en de kolommen te smal dreigen te worden wordt het aantal kolommen automatisch verminderd. Zo zal het opmaakprofiel "kolommen-4" vier smalle kolommen geven op een desktop in een voldoende groot venster. Op een telefoon zal dit herschalen naar drie kolommen als de telefoon in landscape mode staat (telefoon over dwars), en nog maar twee kolommen in portret mode (telefoon rechtop).

Bovenstaande opmaakprofielen kunnen nog gecombineerd worden met het opmaakprofiel krant. Dit zorgt ervoor dat de kolom opgemaakt wordt als in een krant; de tekst wordt uitgevuld en tussen de alinea's komt geen extra witruimte meer maar bij elke alinea springt de eerste regel een stukje in. Combineren van opmaakprofielen gaat als volgt:

  • class="kolommen-2 krant"
  • class="kolommen-3 krant"
  • class="kolommen-4 krant"

Voorbeelden

Kolommen-4

Alleen tekst:

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.

Een lijst:

  • Item 1: Mandarijnen
  • Item 2: Appels
  • Item 3: Peren
  • Item 4: Fruit met echt een heel lange naam
  • Item 5: Kiwi's
  • Item 6: Druiven
  • Item 7: Bananen
  • Item 8: Papaja's
  • Item 9: Ananas
  • Item 10: Bosbessen

Kolommen-3

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.

Kolommen-2

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.

Kolommen-3 krant

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.

Kolommen-2 krant

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.

Kolommen op basis van FlexBox

Maakt twee kolommen met controle over het einde van de eerste kolom. Als er te weinig ruimte is zoals op een kleiner scherm worden de twee kolommen onder elkaar geplaatst en lijkt het een doorlopende tekst.

Om het voor de gebruiker gemakkelijker te maken om te gebruiken en te lezen is de wikicode verplaatst naar een aantal sjablonen.

  • {{BeginFlexKolommen}}
  • {{NieuweFlexKolom}}
  • {{EindeFlexKolommen}}

De volgende wikicode: 

{{BeginFlexKolommen}}
Lorem ipsum ... arcu. {Alinea 1}

In enim ... laoreet. {Alinea 2}

Quisque rutrum. ... ipsum. {Alinea 3}
{{NieuweFlexKolom}}
Nam quam ... libero. {Alinea 4}

Fusce vulputate ... lacinia. {Alinea 5}
{{EindeFlexKolommen}}

Geeft het volgende resultaat:

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.


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