11. Complexe datatabellen
Uitleg
Een complexe datatabel is wat ingewikkelder dan een eenvoudige datatabel. Er is hier sprake van één of meerdere extra niveaus in de rij- en- / of kolomkoppen.
Niet alleen de visuele opmaak is complexer, ook de opmaak van de code is complexer.
Voorbeelden
Er zijn twee manieren om een complexe datatabel op te maken die allebei juist zijn. We geven van allebei de methodes een voorbeeld.
Voorbeeld 1: id's en headers
Bij de eerste methode worden id's en headers gebruikt (in tegenstelling tot de tweede methode waarbij 'scope' gebruikt wordt).
Onderstaande tabel is een overzicht van gebruikers van een site voor webontwikkelaars. Gekeken is naar percentage gebruikers die wel of geen JavaScript-ondersteuning hadden in een aantal maanden van de jaren 2002 tot en met 2005.
| Tijdsperiode | Met JavaScript | Zonder JavaScript |
|---|---|---|
| 2005 | ||
| Januari | 89% | 11% |
| 2004 | ||
| Oktober | 90% | 10% |
| Juli | 90% | 10% |
| Januari | 92% | 8% |
| 2003 | ||
| Oktober | 90% | 10% |
| Juli | 89% | 11% |
| Januari | 89% | 11% |
| 2002 | ||
| Oktober | 88% | 12% |
De kolomkoppen zijn 'Tijdsperiode', 'Met JavaScript' en 'Zonder JavaScript'. De rijkoppen zijn '2005', '2004', '2003' en '2002'. De rijkoppen hebben weer een onderverdeling in andere rijkoppen, namelijk een aantal maanden.
Iemand die de tabel niet kan zien, zal alle celinformatie van links naar rechts gepresenteerd krijgen, tenzij de structuur van de tabel goed opgemaakt is.
Deze tabel is toegankelijk gemaakt door elke kolom- en rijkop (th-elementen) een 'id' te geven, en bij elke datacel aan te geven aan welke rij- of kolomkop deze gerelateerd is.
Het onderstaande screenshot is een fragment van de output van toolbar '4c. Complexe datatabel'. De meldingen 'Geen headers' bij lege cellen kunt u negeren. Wanneer id's en headers gebruikt zijn kunt u de opmerkingen over scope eveneens negeren.
Voorbeeld 2: scope
Onderstaande tabel is eveneens een complexe datatabel. De kolomkop 'Seizoen' is onderverdeeld in twee andere kolomkoppen: 'Hoogseizoen' en 'Laagseizoen'. De rijkop 'Huisje' is onderverdeeld in twee andere rijkoppen: 'Vrijstaand' en 'Niet-vrijstaand'.
| Seizoen | |||
|---|---|---|---|
| Hoogseizoen | Laagseizoen | ||
| Huisje | Vrijstaand | 80,- | 70,- |
| Niet-vrijstaand | 75,- | 65,- | |
Ten eerste moeten er th-elementen gebruikt zijn. Wanneer dit niet het geval is, is de tabel niet goed opgemaakt. Dit kan bijvoorbeeld bekeken worden met tool 5a. 'Eenvoudige datatabellen: Toon th-elementen'.
We kunnen dit ook in één keer bekijken met tool 5c. 'Complexe datatabel', zoals in onderstaande afbeelding te zien is.
Deze tabel is toegankelijk opgemaakt omdat alle rij- en kolomkoppen, op alle niveaus, een scope-attribuut hebben. De kolomkoppen gebruiken scope="col" en rijkoppen gebruiken scope="row". De melding 'Geen id!' en 'Geen headers!' kunt u negeren; Dit is een andere opmaakmethode.
Testen met de toolbar
Zoek een paar complexe datatabellen. Complexe datatabellen zijn niet op elke site aanwezig. U kunt bijvoorbeeld zoeken naar steekwoorden als 'cijfer', 'overzicht' of 'tabellen'.
Gebruik tool 5c. 'Complexe datatabel'. Een complexe tabel kan opgemaakt zijn met 'id's en headers' of met scope-attributen. Hiernaast moet voor elke rij- en of kolomkop op elk niveau een th-element gebruikt zijn.
De tool zorgt ervoor dat bij de tabellen visueel wordt aangeven waar speciale tabellenopmaak is gebruikt (zoals te zien is bij de screenshots bij voorbeelden). Wanneer u geen veranderingen ziet is hoogstwaarschijnlijk geen goede opmaak gebruikt.
Checklist
Vul 'ja' in wanneer u complexe datatabellen heeft aangetroffen die goed zijn opgemaakt.
Vul 'nee' in als u complexe datatabellen aantreft die niet goed zijn opgemaakt.
Wanneer u geen complexe datatabellen kunt vinden, of u kunt de vraag niet beantwoorden, vult u 'nee / nvt' in.