Tabellen in HTML (Bron: webtoolsnation)

Tabellen HTML

In de wiskunde of fysica worden tabellen grotendeels gebruikt om droge cijfergegevens te presenteren. Ook in HTML kan je tabellen voor deze doeleinden gebruiken, maar de mogelijkheden van tabellen in HTML gaan veel verder dan dat.
Ga naar een willekeurige site op het internet, en negen kansen op tien is de structuur ontworpen door middel van tabellen, ook al lijken deze niet expliciet aanwezig op de pagina.

Een eenvoudige tabel maken

We moeten hoe dan ook beginnen bij het begin. Maak daarom een nieuw HTML bestand aan, enkel om volgende code op uit te proberen.
Zet volgende code tussen de <body> tags van je nieuwe bestand.
Het resultaat zou moeten lijken op de onderstaande tabel:
Dit is cel 1 van rij 1 Dit is cel 2 van rij 1
Dit is cel 1 van rij 2 Dit is cel 2 van rij 2

Analyse van de code

Om aan te duiden dat we beginnen met een tabel, gebruiken we de tag <table>. Deze tag kan vele attributen bevatten.
Een overzicht
width Geeft aan hoe breed de tabel mag zijn.
height Geeft aan hoe hoog de tabel mag zijn.
border Zegt hoe dik de rand rond de tabel mag zijn. De waarde bij dit attribuut is dus altijd een getal.
style Hiermee geef je bepaalde CSS kenmerken mee aan de tabel, zie eerder in deze tutorial.
background Kiest een prentje als achtergrond, enkel voor deze tabel.
bgcolor Kiest de kleur van de tabel.
align Zegt waar de tabel horizontaal uitgelijnd moet worden. Waarden hiervoor zijn left, center, right.
valign Zegt waar de tabel verticaal uitgelijnd moet worden. Waarden hiervoor zijn top, middle, bottom.

Verder bestaat een tabel uit rijen en cellen. Om aan te geven waar een rij begint of eindigt gebruiken we de tag <tr>. Aan deze tag worden doorgaans geen attributen toegekend.
Om aan te duiden waar een cel begint of eindigt gebruikt men de tag <td>. Alle attributen die je aan een tabel kunt toekennen, kan je ook aan deze tag toekennen (zie bovenstaand overzicht).

Het attribuut colspan

Stel dat je wilt dat de eerste rij van de tabel uit één cel bestaat, en de rij daaronder weer uit twee. Die cel uit rij één moet verspreid staan over de twee cellen daaronder. Deze techniek wordt veel gebruikt om bijvoorbeeld een tabelheader te maken.

Het attribuut dat je dan aan de <td> moet meegeven het colspan attribuut. De waarde die meegegeven wordt duidt Het aantal cellen aan die de huidige cel moet overspannen.

Laten we als voorbeeld de voorgaande code als volgt aanpassen.


Je zou nu de volgende structuur moeten verkrijgen.
Dit is cel 1 van rij 1, die twee cellen "overspant"
Dit is cel 1 van rij 2 Dit is cel 2 van rij 2


Tabellen als hoofdstructuur

Zoals eerder gezegd kunnen tabellen je site een professionelere uitstraling geven. In dit laatste voorbeeld nemen we terug het index.htm bij de hand. We gebruiken nu alles wat we in de gehele tutorial hebben gezien!


Analyse van de code

Onze hoofdtabel bestaat uit drie cellen. De bovenste cel overspant de twee onderste cellen. In elke cel zitten dan weer één of meer tabellen vervat. Het is dus mogelijk om een nieuwe tabel te beginnen in een tabelcel.
In de bovenste cel hebben we één nieuwe tabel geplaatst, om het effect van de header te bekomen. Om duidelijk een verschil te maken tussen de verschillende onderdelen van de site, hebben we in de de eerste cel onder de header drie nieuwe tabelletjes gezet. De cel daarnaast bestaat dan weer uit één tabel, waarin de hoofdinformatie staat.

We hebben in dit voorbeel wel wat stijldefinities gebruikt die we nog niet eerder tegen kwamen. Een handige site met een compleet overzicht van wat je met CSS kan doen vind je op http://www.w3schools.com/css/

Het kan een tijdje duren vooraleer je werken met tabellen in HTML onder de knie hebt, maar oefening baart kunst. Probeer bijvoorbeeld verschillende structuren uit te werken. Ze eerst tekenen op papier kan een goed hulpmiddel zijn!


Je hebt nu een groot deel van de basisprincipes van HTML gezien. Toch zijn er nog enkele aandachtspunten waar veel webmasters te weinig of geen aandacht aan schenken. Deze zogenaamde "valkuilen" vind je in het volgende hoofdstuk.