# HTML/Basiscursus/Tabellen

Tabellen kunnen in HTML worden gebruikt om data overzichtelijk weer te geven in rijen en kolommen. Vroeger werd deze techniek ook gebruikt om de lay-out van een HTML-pagina te bepalen, deze techniek is echter sterk af te raden, beter is het om gebruik te maken van CSS.

## Basis

Voor de bouw van tabellen beschikt u over de volgende elementen:
* table-tag: Hiermee maakt u een nieuwe tabel.
* tr-tag: "Table Row"; Hiermee wordt een nieuwe rij begonnen.
* td-tag: "Table Data"; Een nieuwe datacel,
* th-tag: "Table Header"; Net als <td> maar wordt gebruikt voor een titelveld.
Een simpele tabel kan er dus als volgt uitzien:
HTML-code: Een simpele tabel
Dit wordt als volgt weergegeven in een browser:
| | Kolom 1 | Kolom 2 |
| Rij 1 | Kolom 1 - Rij 1 | Kolom 2 - Rij 1 |
| Rij 2 | Kolom 1 - Rij 2 | Kolom 2 - Rij 2 |
We hebben één tabel (<table>) gemaakt met daarin drie rijen (<tr>). In de eerste rij bevindt zich een lege cel (<td>) en twee titelcellen voor de kolommen (<th>). In de tweede en derde rij bevindt zich een titelcel gevolgd door twee datacellen.

## Geavanceerd
### Cellen die meerdere kolommen en/of rijen beslaan

Soms is het nodig om cellen samen te voegen zodat deze meerdere rijen of kolommen beslaan, dit is mogelijk met de colspan- en rowspan-attributen.
Let in de voorbeelden goed op hoeveel keer de <th>- en <td>-elementen worden gebruikt.
HTML-code: Gebruik colspan- en rowspan-attribuut
| | | Kangoeroe |
| Vertalingen | Engels | Kangaroo |
| Vertalingen | Latijn | Kangaroo |

### Kolommen

Met de col-tag kunt u in één keer attributen toepassen op alle tabelcellen in deze kolom, zo kunt u met behulp van het class-element een (beperkt aantal) CSS-regels op alle cellen toepassen, bijvoorbeeld:
HTML-code: Gebruik col-element
Deze tabel wordt samen met de CSS-regel .naam {color: honeydew;} als volgt getoond in een browser:
| Naam | Klasse |
| Kangeroe | Zoogdieren |
Het col element kan los voorkomen of in een colgroup-element. U kunt deze twee niet door elkaar gebruiken; als er een colgroup-element wordt gebruikt moeten alle col-elementen genest worden in colgroup-elementen.

### Het <caption>-element

Om uw tabel een titel te geven kunt u het caption-element gebruiken direct na het openen van de tabel, bijvoorbeeld:
HTML-code: Gebruik <caption>-element
Dit wordt als volgt getoond in een browser:
Een simpele tabel :
| Naam | Klasse |
| Kangoeroe | Zoogdieren |

### Rijgroepen en kolomgroepen
#### Rijgroepen

Er zijn 3 verschillende rijgroepen; thead, tbody en tfoot. thead bevat rijen met titelcellen die informatie geven over deze kolommen. Hetzelfde geldt voor tfoot (totaalaantallen bijvoorbeeld), tbody bevat de data. Door met rijgroepen te werken is het bijvoorbeeld mogelijk een scrollbar in de tbody te tonen terwijl de titelcellen blijven staan.
Let goed op de plaats van tfoot, deze komt voor tbody maar wordt in de pagina wel aan de onderkant getoond.
HTML-code: Rijgroepen

#### Kolomgroepen

U kunt kolommen groeperen met behulp van het colgroup-element. Als u een colgroup-element gebruikt kunt u geen losse col-elementen meer gebruiken.

### Toegankelijke tabellen

Tabellen zijn heel moeilijk voor screenreaders (browsers die een pagina voorlezen) te begrijpen. Er zijn enkele technieken om tabellen toegankelijker te maken voor mensen die gebruik maken van screenreaders.

#### Samenvatting

Voor screenreaders kan een korte samenvatting worden gegeven van de inhoud van de tabel zodat de gebruiker direct kan zien of de tabel interessant is, bijvoorbeeld:
HTML-code: Gebruik summary-attribuut

#### Afkortingen

Een screenreader leest voor elke datacel de bijbehorende headercel op, bijvoorbeeld: Naam van het dier: kangoeroe, Klasse: Zoogdieren.
Bij lange tabellen is het vervelend om constant "Naam van het dier" te horen, met het abbr-attribuut kan een kortere naam worden gegeven.
HTML-code: Gebruik abbr-attribuut
Deze tabel wordt nu als volgt voorgelezen: Naam: Kangoeroe, Klasse: Zoogdieren

#### Titelcellen

Bij ingewikkelde tabellen is het vaak voor niet-visuele gebruikers en computer moeilijk te zien welke titelcellen betrekking hebben op welke datacellen. Er zijn verschillende manieren om dit duidelijk te maken.

##### Scope-attribuut

Als er titelcellen (<th>) worden gebruikt in zowel de eerste rij als in de eerste kolom kan die problemen opleveren voor screenreaders, dit is op te lossen met het scope-attribuut. Met het scope-attribuut kunt u duidelijk maken of een titelcel informatie geeft over de rij of over de kolom.
HTML-code: Gebruik scope-attribuut
| | Klasse | Orde |
| Kangeroe | Zoogdieren | Klimbuideldieren |
Een andere mogelijkheid is:
HTML-code: Gebruik scope-attribuut (2)
| Naam | Klasse | Orde |
| Kangoeroe | Zoogdieren | Klimbuideldieren |
In plaats van de waardes col en row kunt u ook colgroup en rowgroup gebruiken, hiermee geeft u aan dat de cel titelinformatie bevat voor de gehele kolomgroep of rijgroep.

## Voorbeeld

Dit is een voorbeeld van een geavanceerde tabel die begrijpbaar is voor computers en ook toegankelijke voor visueel gehandicapten:
HTML-code: Geavanceerde, toegankelijke tabel
Met CSS toegepast wordt deze tabel als volgt getoond in browsers: