1. Wat is een tabel ?
Een tabel bestaat uit rijen en kolommen. Tabellen worden gebruikt om de inhoud mooi en ordelijk op de pagina te laten weergeven. Ze worden ook vaak gebruikt als hulpmiddel wanneer je bijvoorbeeld een afbeelding links en een afbeelding rechts wilt vertonen op een pagina dan kan je gebruik maken van een onzichtbare tabel met twee kolommen. Zoals je ziet kunnen tabellen dus zeer handig zijn.
Het element TABLE wordt gebruikt om een tabel aan te maken..
TR
TR staat voor Table Row. Hiermee maak je een rij aan
TD
TD staat voor Table Data. Hiermee maak je een cel aan waar de inhoud terecht komt.
Er zijn nog andere elementen die gebruikt kunnen worden in de tabel zoals TH dat staat voor Table Header. Dit heeft dezelfde werking als TD, het enige verschil is dat TH de inhoud vet wordt gedrukt. Dit wordt meestal gebruikt om de koptitels duidelijk te maken, later in de tutorial zien we hier een voorbeeld van. Dan hebben we ook nog volgende elementen: THEAD, TFOOT en TBODY. Deze elementen worden niet zoveel gebruikt dus hier gaan we het in deze tutorial nog niet over hebben.
top 3. De attributen van de tabel
De attributen van de tabel kan je op deze pagina terug vinden.
top4. Voorbeelden
Nu hebben we het nog maar enkel gehad over de elementen en de attributen maar hoe ziet het er nu visueel uit. Ik ga enkele voorbeelden presenteren waarbij ik de verschillende attributen en elementen gebruik:
top 5. Onzichtbare tabel
Onzichtbare tabellen worden gebruikt om de inhoud op de pagina te krijgen waar men het wilt. Neem als voorbeeld: Je wilt links op de pagina iets plaatsen maar ook rechts op dezelfde hoogte, hier toon ik hoe het kan:
top 6. Lege cel
Als er geen inhoud in een cel bevindt zal de cel een "niet zo mooie" opmaak krijgen. Zie volgende voorbeeld:
Naam
Leeftijd
Jan
18
Tom
De HTML code van de lege cel ziet er zo uit:
<TD></TD>
We kunnen dit "probleem" oplossen door een "non-breaking space" te plaatsen:
<TD> </TD>
Het resultaat wordt:
Naam
Leeftijd
Jan
18
Tom
top 7. Samenvoegen van cellen
Het kan wel eens gebeuren dat we cellen moeten samenvoegen. Dit doen we met de elementen COLSPAN en ROWSPAN. Om horizontale cellen samen te voegen gebruiken we COLSPAN, om verticale cellen samen te voegen gebruiken we ROWSPAN. Het aantal cellen dat we willen samenvoegen is de waarde die het element krijgt. Een voorbeeld: