HTML Tabellen
Tabellen worden gebruikt wanneer je "gegevens in tabelvorm" wil bekijken, dwz dat informatie in rijen en kolommen wordt weergegeven. Tabellen worden in HTML vaak gebruikt omdat tabellen vrijwel onbeperkte mogelijkheden bieden in HTML-pagina's.Tabellen maken in HTML lijkt ingewikkeld, maar is het niet. De basisonderdelen voor een tabel element bestaat uit drie verschillende HTML-tags zoals de <table> tag, <tr> tag, en de <td> tag.
| Tag | Beschrijving |
|---|---|
| <table> | Definieert een tabel |
| <tr> | Definieert een rij in een tabel |
| <td> | Definieert een cel in een tabel |
Voorbeeld:
<table style="width:100%">
<tr>
<td>Cel 1</td>
<td>Cel 2</td>
</tr>
<tr>
<td>Cel 3</td>
<td>Cel 4</td>
</tr>
</table>
In de bovenstaande voorbeeld wordt het begin van een tabel aangegeven met het element <table>, de breedte van de tabel is 100% van het scherm, gevolgd door een <tr> tag, die het begin van een nieuwe rij aangeeft.
Twee cellen worden in deze rij ingebracht: <td> Cel 1 </td> en <td> Cel 2 </td>. De rij wordt hierna afgesloten met een </tr> tag en een nieuwe rij <tr> begint onmiddellijk erna. De nieuwe rij bevat ook twee cellen. De tabel wordt afgesloten met </table>.
Tabelranden
Het attribuut border gebruik je binnen de tag <table> om aan te geven of de browser een rand om de tabel en alle cellen moet weergeven. Als je geen waarde opgeeft, houdt border de standaardbreedte van één pixel aan.
De waarde wordt opgegeven in pixels, die zal bepalen hoe breed de randen moeten zijn. Als het attribuut als waarde "0" heeft gekregen dan zal er geen randen te zien zijn. (border="0").
 |
Het border attribuut is verouderd en wordt het afgeraden om het nog te gaan gebruiken. Gebruik liever CSS of het attribuut style hiervoor. Met CSS heb je veel meer mogelijkheden dan met alleen HTML. Wil je CSS gebruiken voor border dan moet je de code: "border: 1px;" aangeven. |
Tabelranden in CSS
| In het volgende voorbeeld staan verschillende soorten tabelranden. Alle tabelranden in het voorbeeld zijn in de kleur "Zwart", maar dit kan natuurlijk in verschillende kleuren en diktes worden weergegeven. De waarden "none" of "hidden" kan worden gebruikt als je geen rand om een tabel wilt hebben. |
| Voorbeeld |
Samenvallende tabelranden
Zoals je hebt gezien zijn de tabelranden gescheiden van elkaar, elke cel heeft zijn eigen rand en zit er standaard ruimte tussen deze randen. Bij samenvallende tabelranden vervalt de ruimte tussen de randen. Deze randen worden door naast elkaar gelegen cellen gedeeld.
Voorbeeld:
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Cellpadding en Cellspacing attributen
Er zijn twee attributen genoemd cellpadding en cellspacing die je kunt gebruiken om de witte ruimte aan te passen in een tabel.
| Het attribuut cellpadding bepaalt de ruimte tussen het rand rond de cel en de inhoud ervan. |
Voorbeeld:
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px; /* Geeft cellpadding aan */
}
</style>
| Het attribuut cellspacing bepaalt hoeveel ruimte zich tussen afzonderlijke cellen bevindt. |
Voorbeeld:
<style>
table, td {
border: 1px solid black;
border-spacing: 10px; /* Geeft cellspacing aan */
}
</style>
|
Indien men gebruik maakt van samenvallende tabelranden (collapse) dan heeft border-spacing geen effect. |
Rij- of kolomkop
Een rij- of kolomkop wordt gedefinieert door de tag <th> te gebruiken. Deze wordt meestal vet en gecentreerd in de browser weergegeven. Het th element komt in de plaats van het td element.
Voorbeeld:
<table style="width:100%">
<tr>
<th>ID</th>
<th>Naam</th>
<th>Netto</th>
</tr>
<tr>
<td>003451</td>
<td>John</td>
<td>€ 1870,24</td>
</tr>
</table>
Colspan en Rowspan attributen
Je kan het colspan attribuut gebruiken als je twee of meer kolommen wilt samen voegen in een enkele kolom. Het attribuut rowspan wordt op de zelfde manier gebruikt als je twee of meer rijen wilt samenvoegen.
Voorbeeld:
<h2>Voorbeeld van Colspan en Rowspan</h2>
<table style="width:100%">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<td rowspan="2">Rij 1 - Cel 1 (Rowspan)</td>
<td>Rij 1 - Cel 2</td>
<td>Rij 1 - Cel 3</td>
</tr>
</table>
Tabel bijschrift (Caption)
De tag <caption> kan je gebruiken voor een bijschrift onder of boven de tabel. Een bijschrift is horizontaal gecentreerd en even breed als de tabel.
Voorbeeld:
<table style="width:100%">
<caption>Dit is een voorbeeld van de caption tag</caption>
<tr>
<td>Rij 1, Kolom 1</td>
<td>Rij 1, Kolom 2</td>
</tr>
</table>
|
De <caption> tag moet vlak achter de <table> tag komen. |
Tabel met eigen CSS stijl
De CSS stijlen tussen de <head> en </head> tags die voor de tabellen worden gedefinieerd zijn helaas voor alle tabellen in een pagina. Om een CSS stijl voor een speciale tabel te definiëren, voeg je het attribuut id toe.
<table id="tabel1">Nadat je het id attribuut hebt toegevoegd kan je een andere stijl voor deze tabel definiëren.
Voorbeeld:
<style>
/* CSS voor tabel1 */
table#tabel1 {
width: 100%;
background-color: #f1f1f1;
}
</style>
Laten we nog een tabel maken en het de volgende id geven:
<table id="tabel2">Nu gaan we de stijl voor deze tabel definiëren.
Voorbeeld:
<style>
/* CSS voor tabel2 */
table#tabel2 {
width: 100%;
}
/* Achtergrondkleur voor alle ONEVEN rijen */
table#tabel2 tr:nth-child(odd){
background: #f1f1f1;
}
/* Achtergrondkleur voor alle EVEN rijen */
table#tabel2 tr:nth-child(even){
background: #ffffff;
}
table#tabel2 th {
color: #ffffff;
background-color: #606060;
}
</style>
|
Nu weet je genoeg om met tabellen te kunnen beginnen. Je weet hoe je met de tabel tags en attributen je website attractiever kunt maken voor je bezoekers. Misschien is het ook een goed idee om een tabel te tekenen op een stuk papier voordat je begint met het maken van een tabel in HTML. |
