Help:Tabellen voor beginners

Een tabel dient in het algemeen voor het samenvatten van een aantal feiten. In een artikel voor de wikipedia zal het dan ook vaak nuttig zijn een tabel in te voegen. Daar het meestal niet mogelijk is een tabel gewoon uit te typen moet deze worden gecodeerd. Voor velen is dat een struikelblok.
Tot december 2003 werd voor de codering gebruik gemaakt van HTML en CSS.
In december 2003 werd de door Magnus Manske ontwikkelde, op het concept van Ward Cunningham gegronde, pipe code in gebruik genomen. Deze maakt gebruik van vele voor HTML en CSS ontwikkelde begrippen maar is veel eenvoudiger. Hoewel de oude codes, parameters, nog steeds gebruikt mogen worden, wordt de voorkeur gegeven aan de nieuwe code.
Wie niets of weinig van HTML e.d. weet sluit zich graag daarbij aan.

Wikisyntaxis

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.
*Een parameter of attribuut is een code die de opbouw of opmaak van een tabel bepaalt.
*Voor opmaak-specifieke attributen wordt het gebruik van CSS door middel van het style-attribuut geprefereerd.
*Parameters die via een style-attribuut worden gegeven kunnen worden samengevoegd: style="background:#ffaaff;" en style="color: #006622;" worden dan style="background:#ffaaff; color:#006622;". Vergeet hierbij de = de " de : en de ; niet.

Tabel

Een tabel wordt gedefinieerd door de volgende code:

 {| ''parameters''
 ...
 |}

Op de plek van de puntjes komt de eigenlijke inhoud van de tabel, op de plek van "parameters" de parameters. Hieronder volgt een aantal mogelijke parameters:

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

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:#F0F8FF"
• style="background:#f0f8ff"
• style="background:AliceBlue"
• style="background: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, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white en yellow.

Rijen

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

Dit kan met net zoveel horizontale streepjes als u zelf wilt: |- en |-------------- hebben dezelfde uitwerking. Ook hier kunt u kiezen parameters toe te voegen of niet. Enkele mogelijkheden:

Parameter	Effect
style="background:#abcdef;"	Een achtergrondkleur voor de hele rij opgeven
style="color:#222244;"	Een tekstkleur voor de hele rij opgeven
style="text-align:right;"	De tekst in de rij telkens rechts uitlijnen.
style="text-align:center;"	De tekst in de rij telkens in het midden uitlijnen.
style="border:1px solid Black;"	De rij randen geven.

Cellen

Cellen in de tabel kunnen 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

Een overzicht van een aantal mogelijke parameters:

Parameter	Effect
style="background:#abcdef;"	Een achtergrondkleur voor de cel opgeven
style="color:#222244;"	Een tekstkleur voor de cel opgeven
style="text-align:right;"	De tekst in de cel rechts uitlijnen.
style="text-align:center;"	De tekst in de cel centreren.
colspan="2"	De cel de huidige cel en de volgende cel laten beslaan.
rowspan="2"	De cel de huidige cel en de onderliggende cel laten beslaan.
style="border:1px solid Black;"	De cel randen geven.

Uitleg (caption)

Uitleg b.v. een naam, 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, etcetera) de vorige overzichten.

Koppen

Tabelkoppen werken hetzelfde als cellen, maar dan met een ! in plaats van een |. Parameters voor koppen moeten wel met |, dus ! parameters | inhoud.

Let op: het wordt geprefereerd daadwerkelijk de code voor koppen te gebruiken, in plaats van gewone cellen op te maken tot koppen. Dit in verband met de bereikbaarheid voor mensen met een handicap, blinden of met tekstbrowsers.

Tabellen in tabellen

Het is mogelijk een tabel te maken in een andere tabel, dat wil zeggen in een cel van een andere tabel. Houdt er echter rekening mee dat dit een tabel (vaak onnodig) zeer ingewikkeld maakt om te begrijpen.

Voorbeelden van tabellen

Uitgewerkt werd hoe voor een verslag van een reis naar verwikistan verschillende tabellen kunnen worden gemaakt. Naast die tabellen is de gebruikte code geplaatst.

De prettytable

Deze ziet er als volgt uit:

Onze vacantie Dag Week1 week2 week3 maandag warm regen bewolkt maar droog dinsdag heet sneeuw warm woensdag onweer zon bewolkt donderdag regen zon smoor heet vrijdag regen zon warm zaterdag bewolkt zon onweer zondag zonnig warm bewolkt conclusie een prachtige vacantie wel veel regen

{| {{prettytable}} |+ '''Onze vacantie''' !Dag||Week1||week2||week3 |- !maandag |warm||regen||bewolkt<br>maar<br> droog |- !dinsdag |heet||sneeuw||warm |- !woensdag |onweer||zon||bewolkt |- !donderdag |regen||zon||smoor<br>heet |- |vrijdag||regen||zon|| warm |- !style="background:yellow;"|zaterdag |bewolkt||zon |style="Background:lightblue;"| onweer |- !zondag |zonnig||warm||bewolkt |- !style="background:green;"|conclusie |colspan="3" style="background:yellow;"|een prachtige vacantie<br> wel veel regen |}

Helaas loopt de toelichting het scherm uit, maar de kern is zichtbaar gebleven.

• Het systeem heeft als basis de | een enkele maal vervangen door !, het uitroepteken.
• Op twee uitzonderingen na moeten deze tekens tegen de kantlijn staan, anders gebeurt er niets of krijgt men onzin.
• {| Staat voor: hier volgt een tabel. Niet vergeten een spatie te laten tussen dit teken en de eerste opdracht, anders wordt deze niet uitgevoerd.
• |+ Betekent: dit is de naam van de tabel. Alleen boven de tabel.
• De code{{prettytable}} geeft opdracht dit sjabloon uit te voeren.
• ! (uitroepteken, b.v, voor dag) Geeft aan dat de kop of de omschrijving van de tabel volgt. Deze wordt vet afgedrukt. In het sjabloon prettytable betekent dit ook dat de vaste achtergrondkleur zal worden gebruikt.
• |- Is: één rij lager, maar zet er bij de pretty table niets naast.
• | Betekent: hiernaast volgen een of meer cellen. Maar is ook de plaats om een serie speciale instructies te geven. In dat geval moet daarachter weer een | staan voordat iets in de volgende cel wordt getypt. Anders gebeurt er niets of men krijgt onzin.
• || Scheidt de cellen horizontaal. Wordt in de rij eronder tegen de kantlijn een | geplaatst, dan komt de daarnaast staande cel in de tabel naast de ||cellen te staan, zie b.v. zaterdag.
• |} Staat voor: einde tabel.
• <br> betekent: nieuwe regel binnen een cel. b.v. smoor heet.

Het sjabloon prettytable laat wel enig toevoegingen (letterlijk) ernaast toe. Bijvoorbeeld:

• Align="center;" (of right of left en niet centre) geeft aan waar de tabel komt te staan, in het midden, rechts of links.
• Width="...px" De breedte in pixels; een pixel is 2.834 mm.
• Style="text-align:center;" geeft aan waar de tekst komt te staan.
  

Zonder toevoegingen is door {| en prettytable bepaald hoe de tabel wordt.

Bij prettytable is wel invloed uit te oefenen op de opmaak van de cellen.

• Wordt vrijdag met een | in plaats van een ! in de kantlijn geopend, dan vervalt de achtergrondkleur en wordt vrijdag niet vet afgedrukt
• Met style="background:....;" | erachter,(niet vergeten) gevolgd door b,v. yellow, red, lightblue, green e.d.(zie zaterdag) kan de achtergrondkleur worden gewijzigd.
  • Style=".......;" staat vóór de cel die zo moet worden bewerkt en wordt gevolgd door | waarna de inhoud van de cel wordt getypt.
  • Eventueel kan voor het aangeven van style=" " voor een bepaalde cel op een nieuwe regel worden begonnen. Niet vergeten | en niet |- in de kantlijn en | erachter.
• Wil men cel(len) in de breedte meer kolommen laten beslaan of in de hoogte meer rijen, dan kan dat met:
  • Colspan="..." waarbij... het aantal kolommen dat moet worden samengevoegd is.
  • Rowspan="...." Waarbij... het aantal rijen is dat moet worden samengevoegd
    

Noot: ieder tekentje dus style="...;" het - tussen text - align de : achter text-align en de  ; erna heeft vaak een functie en moet dus worden gebruikt. Ook geen hoofdletters gebruiken.

Een tabel zelf maken

De code {| geeft aan: dit wordt een tabel. Zonder verdere codering krijgt men een net lijstje van een aantal rijen en kolommen zonder enige opmaak.Wil men zelf een tabel maken dan moet dit door toevoegen van codes parameters geschieden.

Een tabel over het lokale vorstenhuis zou er als volgt kunnen uitzien:

Het vorstenhuis VORST tot noot naam tot leeftijd Kiwi 3 2008 55 jaar pensioen Kiwi 2 1965 30jaar val van paard Kiwi 1 1950 80jaar ouderdom ?

{| width="200px;" height="100px" border="6pxblack" align="center" cellspacing="8" cellpadding="6" emptycells="show" rules="all" style="text-align:center; border-style:groove" |+ '''Het vorstenhuis''' |- style="background:yellow" !VORST||colspan="2"|tot|| noot |- style="background:red;" | <font color=white> naam |<font color=white> tot |<font color=white> leeftijd |- style="background: yellow" | Kiwi 3||2008||55 jaar||pensioen |- style="background:lightblue" |Kiwi 2||1965||30jaar||val van<br/>paard |-style="background: green" | Kiwi 1 |1950||80jaar||style="background:yellow" |ouderdom? | |}

Helaas loopt ook hier de tekst van het scherm af; daarom volgt hier een herhaling van de bovenste regel opdrachten:

width="200px" height="100px" border="6pxblack" align="center" cellspacing="8" cellpadding="6" rules="all" style="text-align:center; border-style:groove; emptycells:show"

De eerste groep codes regelt de opbouw van de tabel; die met de omschrijving style regelt de opmaak. Het onderscheid is voor een leek vaak niet duidelijk. Met proberen moet vaak worden uitgezocht of met style moet worden gecodeerd of niet.

• Width en height geeft de breedte van de tabel in px. Meestal is het beter deze codes niet te gebruiken. Dan wordt het automatisch geregeld.
• Border is de breedte van de rand, ook in px. Meestal neemt men een dunnere rand, b,v,1px of is er geen rand: 0 px.
• Align geeft aan waar de tabel op het scherm komt te staan: center, left of right.
• Cellspacing geeft de afstand tussen de cellen. Hier is 8 erg veel en 0, 1 of 2 is gebruikelijk.
• Cellpadding geeft de afstand van de inhoud van de cel tot de rand aan. Ook hier is variatie mogelijk.

• Rules regelt de lijntjes tussen de cellen. None is geen.
• Er zijn nog veel meer mogelijkheden. Op internet onder CSS en HTML worden vele codes toegelicht. Niet gegarandeerd kan worden dat ze ook alle werken, maar dat kan ook aan het bladerprogramma, de browser, van Uw computer liggen.

Style:

• Met style="text-align wordt aangegeven waar de tekst in de cel(len) komt te staan: left center of right.
• Border style regelt het uiterlijk van de rand. CSS geeft wel tien mogelijkheden.
• Emptycells geeft aan dat cellen met niets erin getoond moeten worden.
• Door style= achter een |- te plaatsen wordt b.v. de kleur van een hele rij geregeld, bij pretty table lukt dat niet.
• Wil men een cel een andere opmaak geven, b.v. de kleur, dan kan dit door eerst in de cel te typen: style="background:"kleur", b.v. yellow en dan een | waarna de inhoud getypt kan worden. Eventueel met een | op een nieuwe regel deze cel met style=" laten beginnen.
• Wil men aan het lettertype sleutelen (wordt sterk afgeraden, geeft kans op verminking) dan kan dit via "font" bijvoorbeeld <font color=kleur.> (niet colour). Dus tussen < > en alleen een spatie tussen font en color. Dit voor iedere cel waarvoor dat gewenst is.

Een tabel in een tabel

Het kan soms nuttig zijn om in een cel een gehele tabel te stoppen. Deze techniek is gebruikt om twee tabellen netjes naast elkaar te krijgen. Het zal vermoedelijk ook wel anders kunnen!

Groeicijfers bevolking jaar mannen vrouwen 2000 131678 155840 1980 120503 130490 veestapel koeien schapen 2000 60720 400689 1980 59556 380500

misdaad aantal gevangenen Vergrijp mannen vrouwen Moord 120 63 doodslag 345 62 inbraak 4567 65 beroving 5678 20

{| border="0" cellspacing="30" | {| {{prettytable}} |+ '''Groeicijfers''' !colspan="3"| bevolking |- !jaar||mannen||vrouwen |- |2000|| 131678||155840 |- |1980|| 120503||130490 |- !colspan="3" |veestapel |- ! ||koeien||schapen |- |2000||60720||400689 |- |1980||59556||380500 |}

| valign="top" {| {{prettytable}} |+ '''misdaad''' !colspan="3" |aantal gevangenen |- !Vergrijp||mannen||vrouwen |- |Moord||120||63 |- |doodslag||345||62 |- |inbraak||4567||65 |- |beroving||5678||20 |- |} |}

Door ruimtegebrek moesten de coderingen hier onder de tabellen geplaatst worden.

Er werd als volgt te werk gegaan

• Met {| aangegeven dat een moeder tabel met border="0" en cellspacing="8" (zonder randen) moet worden gemaakt. Het mag ook met een rand.

• Op de regel eronder een |.
• Dan weer {| dat betekent: er komt een tabel in deze tabel
• Achter het teken {| komen de codes voor de in te voegen tabel, b.v. pretty table.
• Dan na | de inhoud van de tabel,
• De eerste tabel in de tabel afsluiten met |}
• Op volgende regel | betekent: volgende cel komt ernaast.( Met |- komt de volgende cel eronder).
• Om de tabellen mooi naast elkaar te krijgen naast | de instructie valign="top" plaatsen. Dit betekent dat de inhoud van de cel tegen de bovenkant moet worden uitgelijnd en regelt dus de plaatsing precies naast de eerste tabel.
• Vervolgens wordt de tweede tabel ingevoerd.
• Afgesloten wordt met twee maal |} , eenmaal om de tweede tabel in de tabel af te sluiten en nog eens om de moedertabel af te sluiten.

Slot

• Voor kleuren bestaan ingewikkelde codes. Maar ook de namen black, navy,green, teal, silver, blue, lime,aqua,maroon, purple, olive, gray, red, fuchsia, yellow en white zijn toegestaan.
• De regel is dat de codes, dus ook "style" voor een rij vóór die van de tabel gaan en die voor de cel vóór rij en tabel. In vele gevallen is voor een lager niveau "style" verplicht maar niet altijd.
• Er bestaat behoefte aan een overzicht van de meest gebruikte codes, waarin tevens aangegeven wordt wanneer de code "style" moet worden gebruikt.HTML dat de opbouw regelt, en CSS dat de opmaak regelt, zijn voor een leek niet altijd duidelijk, zeker wanner het om "style" of geen "style" gaat.
• Oefenen in de zandbak wordt aanbevolen. Bekijk eens oude zandbakken. Via geschiedenis op te roepen.

Externe links

Veel nuttige informatie over HTML en CSS staat op internet onder http://www.handleidinghtml.nl
Zie voorts: Externe links Voor meer informatie over de wiki-syntax, zie m:MediaWiki User's Guide: Using tables (Engels) Converteer een HTML-tabel in een wiki-tabel, zie hier meer over het correct gebruik van tabellen met HTML vindt u bijvoorbeeld op CommunityMX.com (Engels).

      Rijnsburg 12 okt 2006 21:38 (CEST)