Help:Tabellen

Let op: Als u deze pagina bewerkt, gaat u akkoord met het vrijgeven van uw bijdragen onder de CC0. Zie Helppagina’s Publiek Domein voor meer informatie.

Tables verwijst naar deze pagina door; Zie Manual:Database layout voor informatie over de structuur van de databasetabel.

In wiki-pagina's kunnen tabellen worden gemaakt. Het is als algemene regel het beste om een tabel te vermijden tenzij u er een nodig heeft. Het maken van een tabel maakt het bewerken van pagina's vaak ingewikkeld.

Samenvatting wiki tabel opmaak

{|	begin tabel, verplicht
|+	tabel caption, optioneel; alleen tussen begin tabel en tabel regel
|-	tabel regel, optioneel bij eerste regel—wiki engine neemt dit aan
!	tabel kop cel, optioneel. Opeenvolgende cellen tabel kop kunnen op dezelfde regel worden toegevoegd, gescheiden door dubbele markeringen (!!) of beginnen op nieuwe regels, elk met een eigen enkele markering (!).
|	tabel gegevens cel, optioneel. Opeenvolgende cellen met tabel gegevens kunnen op dezelfde regel worden toegevoegd, gescheiden door dubbele markeringen(||) of beginnen op nieuwe regels, elk met een eigen enkel markering (|).
|}	eind tabel, verplicht

• De bovenstaande markeringen moeten beginnen op een nieuwe regel behalve de dubbele || en !! voor het optioneel toevoegen van opeenvolgende cellen aan een regel. Lege ruimtes aan het begin van een regel worden echter genegeerd.
• HTML-attributen. Elke markering, behalve het eind van de tabel, accepteert optioneel een of meer HTML-attributen. De attributen moeten op dezelfde regel staan als de markering. Afzonderlijke attributen met één spatie.
  • Cellen en caption (| of ||, ! of !! en |+) bevatten inhoud. Scheid alle attributen van de inhoud met een enkele verticale streep (|). De inhoud van de cel kan op dezelfde regel of op volgende regels volgen.
  • Tabel- en regelmarkeringen ({| en |-) bevatten niet direct inhoud. Voeg geen verticale streep (|) toe na de optionele attributen. Als u dat per ongeluk doet voor de tabelmarkering of regelmarkering, zal de parser deze verwijderen en uw uiteindelijke attribuut als deze de foutieve verticale streep raakte!
• Inhoud kan (a) de celmarkering volgen op dezelfde regel na optionele HTML-attributen of (b) op regels onder de celmarkering. Inhoud dat wiki-markering gebruikt en zelf moet beginnen op een nieuwe regel, zoals lijsten, koppen of een geneste tabel, moet op zijn eigen nieuwe regel staan.
  • Verticale streep als inhoud. Als u een 'pipe' (|) in een tabel wilt plaatsen, moet u de <nowiki>|</nowiki> escape-tekens gebruiken.

Basis

Een tabel met de editor werkbalk aanmaken

Plaats in de wikitekstverwerker het dakje (caret) op de plaats waar u een tabel wilt invoegen. Druk dan op "Uitgebreid" en druk vervolgens op de knop Tabel in de werkbalk. Er wordt een dialoog geopend.

In het dialoogvenster kunt u kiezen of u een regel met tabelkoppen wilt inschakelen, de tabel met een rand wilt opmaken en of u de tabel sorteerbaar wilt maken. Er wordt een voorbeeld weergegeven. U kunt ook de regel- en kolomtelling instellen die u nodig heeft. Druk dan op de knop "Invoegen".

De volgende code wordt standaard gegenereerd:

Wikicode:

{| class="wikitable" style="margin:auto"
|+ Bijschrift
|-
! Koptekst !! Koptekst !! Koptekst
|-
| Voorbeeld || Voorbeeld || Voorbeeld
|-
| Voorbeeld || Voorbeeld || Voorbeeld
|-
| Voorbeeld || Voorbeeld || Voorbeeld
|}

Resultaat:

Bijschrift

Koptekst	Koptekst	Koptekst
Voorbeeld	Voorbeeld	Voorbeeld
Voorbeeld	Voorbeeld	Voorbeeld
Voorbeeld	Voorbeeld	Voorbeeld

Minimale syntaxis

De volgende tabel heeft geen 'borders' en een goede 'spacing' afstand, het toont de eenvoudigste wiki-opmaak tabelstructuur.

U typt	U krijgt
{| |Sinaasappel |Appel |- |Brood |Taart |- |Boter |IJsje |}	Sinaasappel Appel Brood Taart Boter IJsje

De cellen in dezelfde regel kunnen worden vermeld op één regel gescheiden door || (twee verticale streepjes). Als de tekst in de cel een regelovergang bevat, gebruik dan ‎<br />.

U typt	U krijgt
{| |Sinaasappel||Appel||meer |- |Brood||Taart||meer |- |Boter||IJs<br/>je||en<br/>meer |}	Sinaasappel Appel meer Brood Taart meer Boter IJs je en meer

Extra spaties in cellen in de wiki-opmaak, zoals in de wiki-opmaak hieronder, hebben geen invloed op de werkelijke afbeelding van de tabel.

U typt	U krijgt
{| | Sinaasappel || Appel || meer |- | Brood || Taart || meer |- | Boter || IJsje || en meer |}	Sinaasappel Appel meer Brood Taart meer Boter IJsje en meer

U kunt ook een langere tekst of meer complexe wiki-syntaxis hebben in de tabelcellen:

U typt

U krijgt

{| |Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | * Lorem ipsum dolor sit amet * consetetur sadipscing elitr * sed diam nonumy eirmod tempor invidunt |}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt

Tabel kopregels

De koppen van de tabel kunnen worden gemaakt met "!" (uitroepteken) in plaats van "|" (verticale streep). Koppen worden meestal vet en gecentreerd getoond.

U typt	U krijgt
{| ! style="text-align:left;"| Item ! Bedrag ! Kosten |- |Sinaasappel |10 |7.00 |- |Brood |4 |3.00 |- |Boter |1 |5.00 |- !Totaal | |15.00 |}	Item Bedrag Kosten Sinaasappel 10 7.00 Brood 4 3.00 Boter 1 5.00 Totaal 15.00

Bij het gebruik van attributen zoals in de kop 'Item' wordt een verticale streep '|' gebruikt voor de scheiding. Geen uitroepteken '!'.

Bijschriften

Een tabelbijschrift kan als volgt aan de bovenkant van een tabel worden toegevoegd.

U typt	U krijgt
{| |+Voedingssupplementen |- |Sinaasappel |Appel |- |Brood |Taart |- |Botter |IJsje |}	Voedingssupplementen Sinaasappel Appel Brood Taart Boter IJsje

class="wikitable"

De basisopmaak (lichtgrijze achtergrond, borders, padding en links uitlijnen) kan worden bereikt door class="wikitable" toe te voegen.

U typt	U krijgt
{| class="wikitable" |+Voedingssupplementen |- |Sinaasappel |Appel |- |Brood |Taart |- |Boter |IJsje |}	Voedingssupplementen Sinaasappel Appel Brood Taart Boter IJsje

HTML colspan en rowspan

U kunt de HTML-attributen colspan en rowspan op cellen gebruiken voor een geavanceerde lay-out.

U typt	U krijgt
{| class="wikitable" !colspan="6"|Boodschappenlijstje |- |rowspan="2"|Brood & boter |Taart |Broodjes |Deens |colspan="2"|Croissant |- |Kaas |colspan="2"|IJsje |Boter |Yoghurt |}	Boodschappenlijstje Brood & boter Taart Broodjes Deens Croissant Kaas IJsje Boter Yoghurt

Opmerking over grote tabellen (class noresize)

The use of the wrapping div.noresize will ensure your table is optimized for mobile and is extremely important for large tables e.g. tables with more than 4 columns or large columns. Failure to use this element will cause your content to overlap UI elements e.g. the Vector 2022 sidebar or to break mobile display. This will cause the table to have a horizontal scroll bar when the table is too big for the content.

Shopping List
Areallyreallyreallyreallylongstringwillcauseyourtableto	Pie	Buns	Danish	Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
	Cheese	Ice cream		Butter	Yogurt

HTML attributen

U kunt HTML attributen toevoegen aan een tabel. Voor de autoritaire bron over HTML-attributen, zie de HTML-specificatie van de W3C over tabellen.

Attributen in tabellen

Als u attributen na de tag voor het begin van de tabel ({|) plaatst, worden kenmerken toegepast op de hele tabel.

U typt	U krijgt
{| class="wikitable" style="text-align: center; color: green;" |Sinaasappel |Appel |12,333.00 |- |Brood |Taart |500.00 |- |Boter |IJsje |1.00 |}	Sinaasappel Appel 12,333.00 Brood Taart 500.00 Boter IJsje 1.00

Attributen in cellen

U kunt attributen in individuele cellen plaatsen. Bijvoorbeeld, getallen kunnen er rechts uitgelijnd beter uitzien.

U typt	U krijgt
{| class="wikitable" | Sinaasappel | Appel | style="text-align:right;" | 12,333.00 |- | Brood | Taart | style="text-align:right;" | 500.00 |- | Boter | IJsje | style="text-align:right;" | 1.00 |}	Sinaasappel Appel 12,333.00 Brood Taart 500.00 Boter IJsje 1.00

U kunt ook de attributen van de cel gebruiken wanneer u meerdere cellen op één regel weergeeft. Merk op dat de cellen worden gescheiden door ||, en binnen elke cel worden de attribuut(en) en waarde gescheiden door |.

U typt	U krijgt
{| class="wikitable" | Sinaasappel || Appel || style="text-align:right;" | 12,333.00 |- | Brood || Taart || style="text-align:right;" | 500.00 |- | Boter || IJsje || style="text-align:right;" | 1.00 |}	Sinaasappel Appel 12,333.00 Brood Taart 500.00 Boter IJsje 1.00

Attributen in regels/rijen

U kunt ook attributen in individuele regels plaatsen.

U typt	U krijgt
{| class="wikitable" | Sinaasappel | Appel | style="text-align:right;"| 12,333.00 |- | Brood | Taart | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | Boter | IJsje | style="text-align:right;"| 1.00 |}	Sinaasappel Appel 12,333.00 Brood Taart 500.00 Boter IJsje 1.00

Attributen in caption en in koppen

Attributen kunnen als volgt aan het bijschrift (caption) en de koppen worden toegevoegd.

U typt	U krijgt
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|''Voedingssupplementen'' |- ! style="color:green" | Fruit ! style="color:red" | Vetten |- |Sinaasappel |Boter |- |Peer |Taart |- |Appel |IJsje |}	Voedingssupplementen Fruit Vetten Sinaasappel Boter Peer Taart Appel IJsje

Border width

Als "border-width::" slechts één nummer heeft, is het voor alle vier grenzen de waarde:

U typt	U krijgt
{|style="border-style: solid; border-width: 20px" | Hallo |}	Hallo

Als "border-width:" meer dan één getal heeft, zijn de vier getallen voor boven, rechts, onder, links (ONTHOUD de volgorde met de klok mee ↑→↓←):

U typt	U krijgt
{|style="border-style: solid; border-width: 10px 20px 100px 0" | Hallo |}	Hallo

Wanneer er minder dan 4 waarden zijn :

• drie waarden, bijvoorbeeld top, right, bottom: dan is de standaardwaarde voor left die van right (tweede waarde). De breedte is dan gelijk aan de linker- en rechterkant.
• twee waarden bijvoorbeeld top, right: de standaardwaarde voor bottom is die van top (eerste waarde) en left krijgt standaard de waarde van right (tweede waarde) toegewezen. De breedte boven is dan hetzelfde als onder; de breedte links is hetzelfde als rechts.
• een waarde bijvoorbeeld top: de standaardwaarde voor right is de van top en is hetzelfde voor bottom en left. De vier breedtes zijn hetzelfde en bouwt een regelmatige grens. Dit is een korte schrijfwijze.

Een andere methode om de breedtes van de vier zijden van een cel te definiëren, is door 'border-left', 'border-right', 'border-top' en 'border-bottom' te gebruiken:

U typt	U krijgt
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" | Hallo |}	Hallo

De HTML-attributen (zoals "width=", "border=", "cellspacing=", "cellpadding=") hebben geen lengte-eenheid nodig (de eenheid pixel wordt aangenomen). Ze zijn ook ongeldig in HTML5.

Cellpadding is voor het instellen van de ruimte tussen de celwand en de celinhoud.

De CSS-style-eigenschappen (die de HTML-attributen overschrijven) vereisen een expliciete lengte-eenheid (als de waarde niet 0 is) zoals "px" voor pixel.

Met HTML attributen en CSS styles

CSS style-attributen kunnen worden toegevoegd met of zonder andere HTML-attributen.

U typt	U krijgt
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |Sinaasappel |Appel |- |Brood |Taart |- |Boter |IJsje |}	Sinaasappel Appel Brood Taart Boter IJsje

Padding

Het staat voor de interne marge tussen de inhoud en de grens van de cel.

U typt	U krijgt
{|class=wikitable | style="padding: 10px" | Voorbeeld van style="padding:10px" |- | style="padding: 50px" | Voorbeeld van style="padding:50px"<br/><br/>Specificeer de padding op '''ELKE CEL''' |- | style="padding:100px" | Voorbeeld van style="padding:100px" |}	Voorbeeld van style="padding:10px" Voorbeeld van style="padding:50px" Specificeer de padding op ELKE CEL Voorbeeld van style="padding:100px"

Kolombreedte

De kolombreedte kan als volgt worden toeevoegd.

U typt

{| class="wikitable" style="width: 85%;"
| colspan="2" | Deze kolombreedte is 85% van de schermbreedte
|-
| style="width: 30%"| '''Deze kolom is 30% gerekend vanaf 85% van de schermbreedte'''
| style="width: 70%"| '''Deze kolom is 70% gerekend vanaf 85% van de schermbreedte'''
|}

U krijgt

Deze kolombreedte is 85% van de schermbreedte
Deze kolom is 30% gerekend vanaf 85% van de schermbreedte	Deze kolom is 70% gerekend vanaf 85% van de schermbreedte

Benaderbaarheid van de cellen in de tabelkop

In de cellen in de kop wordt niet expliciet aangegeven welke tabellen gegevenscellen zij toepassen (de cellen rechts op dezelfde regel of de onderliggende cellen in dezelfde kolom). Wanneer de tabel in een visuele 2D-omgeving wordt weergegeven, is dit meestal gemakkelijk te zien.

Wanneer tabellen echter worden weergegeven op niet-visuele media, kunt u de browser helpen bepalen welke cel in de kop van toepassing is op de beschrijving van een geselecteerde cel (om de inhoud ervan in een toegankelijkheidsassistent te herhalen) met behulp van een scope="row" of scope="col" attribuut in de cellen in de kop. In de meeste gevallen met eenvoudige tabellen, gebruikt u scope="col" op alle cellen van de eerste regel, en scope="row" op de eerste cel van de volgende regel:

U typt	U krijgt
{| class="wikitable" |- ! scope="col"| Item ! scope="col"| Hoeveelheid ! scope="col"| Prijs |- ! scope="row"| Brood | 0.3 kg | $0.65 |- ! scope="row"| Boter | 0.125 kg | $1.25 |- ! scope="row" colspan="2"| Totaal | $1.90 |}	Item Hoeveelheid Prijs Brood 0.3 kg $0.65 Boter 0.125 kg $1.25 Totaal $1.90

Alignment (uitlijning)

Tabel uitlijning

Uitlijning van de tabel wordt bereikt door CSS te gebruiken. De uitlijning van de tabel wordt bepaald door marges. Een vaste marge aan de ene kant zorgt ervoor dat de tabel op die kant moet worden uitgelijnd, als aan de andere kant de marge is gedefinieerd als auto. Om op het midden van een tabel uit te lijnen, moet u beide marges instellen op auto

Voorbeeld, een rechts gelijnde tabel:

U typt

U krijgt

{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | Sinaasappel | Appel |- | Brood | Taart |- | Boter | IJsje |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Sinaasappel Appel Brood Taart Boter IJsje Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

En een tabel in het midden uitgelijnd:

U typt	U krijgt
{| class="wikitable" style="margin: auto;" | Sinaasappel | Appel |- | Brood | Taart |- | Boter | IJsje |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Sinaasappel Appel Brood Taart Boter IJsje Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tabel die rond de tekst zweeft

Als u een tabel aan de rechter of linkerzijde van de pagina uitlijnt, begint de tekst die na de tabel komt aan het einde ervan, waardoor er een lege ruimte rond de tabel blijft. U kunt de tekst die rond de tabel moet worden gewikkeld (wrapped) maken door de tabel rond de tekst te laten zweven (float) in plaats van deze alleen uit te lijnen. Dit kan worden bereikt met behulp van het CSS-attribuut float, dat kan aangeven waar de tabel aan de rechter- of naar de linkerkant zweeft. Bij gebruik van float hebben marges geen invloed op de uitlijning van de tabel en kunnen ze worden gebruikt om de marge tussen de tabel en de omringende tekst op te geven.

U typt

U krijgt

{| class="wikitable" style="float:right; margin-left: 10px;" | Sinaasappel | Appel |- | Brood | Taart |- | Boter | IJsje |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Sinaasappel Appel Brood Taart Boter IJsje Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Uitlijning inhoud cel

De uitlijning van de celinhoud kan worden aangegeven met 2 verschillende CSS-eigenschappen: text-align en vertical-align. text-align kan worden gespecificeerd in de tabel, regel of individuele cellen, terwijl vertical-align alleen kan worden gespecificeerd in individuele regel of cellen.

U typt

U krijgt

{| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |}

A B C D E F G H I

Waarschuwingen

Negatieve getallen

Als u een cel op een nieuwe regel begint met een negatief getal met een minteken (of een parameter die resulteert in een negatief getal), kan uw tabel kapot gaan, omdat de tekens |- worden geparseerd als de wiki-opmaak voor de tabelregel, niet voor de tabelcel. Om dit te voorkomen, voeg een spatie toe voor de waarde (| -6) of gebruik in-line celmarkering (|| -6).

CSS of attributen

Tabelranden die zijn opgegeven via CSS in plaats van het attribuut border, worden onjuist weergegeven in een kleine subset van tekstbrowsers.

Gewone attributen voor kolommen, kolomgroepen en regelgroepen

De MediaWiki-syntaxis voor tabellen biedt geen ondersteuning voor het specificeren van gemeenschappelijke attributen voor kolommen (met het HTML-element ‎<col />), kolomgroepen (HTML-element ‎<colgroup>‎</colgroup>) en regelgroepen (HTML-elementen $head, ‎<tbody>‎</tbody> en ‎<tfoot>‎</tfoot>). Deze standaard HTML-elementen worden niet eens aanvaard in hun HTML of XHTML-syntaxis.

Alle regels en cellen (kop of gegevens) van de tabel worden weergegeven binnen een enkele impliciete rijengroep (HTML-element ‎<tbody>‎</tbody>) zonder attributen of stijlen.

Tabellen en de VisualEditor (VE)

Zie ook: Help:Visuele tekstverwerker/Gebruikershandleiding

Zie Phab: T108245: "Fully support basic table editing in the visual editor". Zie de lijst met taken. Voltooide taken worden doorgestreept. Het kan moeilijk zijn om uit de technische taal te achterhalen wat er precies is verbeterd of welke functies zijn toegevoegd. Voeg hieronder uitleg toe.

Er kunnen nu kolommen en rijen worden verplaatst of verwijderd

Klik op een kolom of kop van een regel. Klik dan op de pijl. In het popup-menu klik op "Verplaatsen" of "Verwijderen".

Lege regel of kolom toevoegen

Klik in hetzelfde popup-menu op "Toevoegen".

Tabel webpagina kopiëren naar VisualEditor

Het is mogelijk om een tabel van een webpagina rechtstreeks te kopiëren en te plakken in de Visuele tekstverwerker (VE). Om dit veilig te doen, gebruik een zandbak en controleer de tabel of de tekst in de wikitext-bronmodus correct wordt gecodeerd en correct wordt weergegeven in de VisualEditor en bij het voorvertonen van de pagina.

Ondersteunende hulpmiddelen

• Excel2Wiki stelt u in staat om een spreadsheet te kopiëren uit Excel, Apache OpenOffice, LibreOffice of Gnumeric om deze om te zetten in een wikicode tabel.

Zie ook

• Regels in een tabel sorteren
• Help Tabellen
• Een visueel hulpmiddel dat helpt tabellen te genereren