Help:Gebruik van tabellen

Uit DutchJoomla! Wiki

In de wikisoftware kunnen vanaf december 2003 tabellen niet alleen in HTML-code maar ook in een eenvoudigere wiki-code worden opgemaakt. De HTML-codes werken nog steeds, maar wiki-codes zijn vaak eenvoudiger te lezen en maken het makkelijker om foutloze tabellen te maken. 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 artibuten die kunnen worden gebruikt bij HTML. Alle parameters kunnen worden weggelaten. Voor opmaak-specifieke artibuten wordt het gebruik van CSS door middel van het style-atribuut geprefereerd. Parameters die via een style-atribuut worden gegeven kunnen worden samengevoegd. style="background:#ffaaff;" en style="color: #006622;" worden dan style="background:#ffaaff; color:#006622;".

Wikisyntax

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:

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:

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:

Uitleg (caption)

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

Een eenvoudige tabel

 {| 
 | Cel 1, rij 1 
 | Cel 2, rij 1 
 |- 
 | Cel 1, rij 2 
 | Cel 2, rij 2 
 |}

maakt;

Een meer ingewikkelde tabel

 {| style="float:right;"
 |+ Hier komt een mooie tabel!
 ! style="background:#00ffff; color:#ffffff;" | Rij 1, kop 1
 ! style="background:#ffff00;" | Rij 1, kop 2
 |-
 | style="border:1px solid #000000;" | Cel 1, rij 1 
 | rowspan="2" style="background:#66ff22;" | Cel 2, rij 1 (en 2)
 |-
 | Cel 1, rij 2
 |- 
 | colspan="2" | Cel 1 (en 2), rij 3
 |}

maakt een tabel aan de rechterkant:

HTML

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.

Een eenvoudige tabel

   
 <table style="border:1px solid #000000;">    
 <tr>    
 <td>Onderwerp een</td>    
 <td>Onderwerp twee</td>   
 </tr>  
 <tr>   
 <td>Onderwerp drie</td>    
 <td>Onderwerp vier</td>    
 </tr>   
 </table>

maakt:

Iets ingewikkeldere tabel

 <table style="border:1px solid #000000;">
 <tr>
 <td>Onderwerp een</td>
 <td>Onderwerp twee</td>
 </tr>
 <tr>
 <td rowspan="2">Onderwerp drie</td>
 <td>Onderwerp vier</td>
 </tr>
 <tr>
 <td>Onderwerp vijf</td>
 </tr>
 </table>

geeft:

Een tabel geschikt maken voor een zogenaamde braillelezer of browser die de tekst voorleest

• Maak een een samenvatting van de tabel:

 <table summary="Deze tabel geeft een overzicht van de ooievaars en hun Latijnse naam"></nowiki>

• Geef het kopje van een kolom apart aan en geef de scope (hoort de kop bij de kolom of de rij?) aan:

 <tr>
 <th scope="col">Nederlandse naam</th>
 <th scope="col">Latijnse naam</th>
 </tr>

• En noem de naam van een kopje ook in de cel zelf:

 <tr>
 <td>[[Abdim's ooievaar]]</td>
 <td>''Ciconia abdimii''</td>
 </tr>

Voor "normale" browsers zie je geen verschil, maar iemand met een visuele handicap die gebruik maakt 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, etcetera. Werkelijk, u kunt beter de wiki-syntax gebruiken...

Externe links

• Meer hexadecimale kleurencodes zijn hier te vinden.
• Meer over het correct gebruik van tabellen met HTML vindt u bijvoorbeeld op CommunityMX.com (Engels).