|
Tabellen worden gebruikt om data overzichtelijk weer te geven. Zo kunnen rekenbladen op het internet nagebootst worden.
Dikwijls worden tabellen worden ook gebruikt (misbruikt) bij het opmaken van
HTML-pagina's, omdat hiermee verschillende elementen netjes naast elkaar op een
pagina kunnen worden geplaatst.
Tabellen zijn tevens handig om formulieren
geordend op pagina's weer te geven.
Vooraleer we de tags bespreken, is het handig om eerst iets te weten over de
opbouw van een tabel.
Opbouw van een tabel
Een tabel is opgebouwd uit horizontale rijen (die van links
naar rechts lopen) en verticale kolommen (die van boven naar
beneden lopen).
Deze rijen en kolommen bestaan op hun beurt uit cellen.
Een cel is niets meer dan een hokje met informatie (data), dat kan bestaan uit
willekeurig tekst of beeldmateriaal.
Hieronder hebben we een tabel gemaakt bestaande uit 9 cellen, namelijk 3 rijen en 3
kolommen. Rij 1 bestaat uit tabelcel 1, 2 en 3. Kolom 1 bestaat uit tabelcel 1,
4 en 7.
| tabelcel1 |
tabelcel2 |
tabelcel3 |
| tabelcel4 |
tabelcel5 |
tabelcel6 |
| tabelcel7 |
tabelcel8 |
tabelcel9 |
Nu we de opbouw van een tabel kennen, kunnen we de tags van een tabel gaan
bekijken. Het Engelse woord voor tabel is "table". Dit woord wordt gebruikt in
de begin- en eindtag van een tabel, dus <table> en </table>
Rijen en kolommen toevoegen
Tussen de TABLE-hoofdtags worden de tags van een 'table row' (tabelrij)
geplaatst. Een tabelrij wordt aangegeven met de tags <tr> en
</tr>
Tussen de rij-tags komen vervolgens de tags van de cel te staan, die worden
aangegeven met<td>en</td>, dat staat voor 'table
data'. De inhoud van een cel kun je dan tussen deze TD-tags zetten. Let op dat iedere
cel een eigen <td> en </td> tag heeft.
Hieronder zie je een tabel die bestaat uit drie rijen, waarvan iedere rij
bestaat uit drie cellen. Daaronder zie je de gebruikte HTML-code.
| tabelcel1 |
tabelcel2 |
tabelcel3 |
| tabelcel4 |
tabelcel5 |
tabelcel6 |
| tabelcel7 |
tabelcel8 |
tabelcel9 |
<table border="1">
<tr>
<td>tabelcel1</td>
<td>tabelcel2</td>
<td>tabelcel3</td>
</tr>
<tr>
<td>tabelcel4</td>
<td>tabelcel5</td>
<td>tabelcel6</td>
</tr>
<tr>
<td>tabelcel7</td>
<td>tabelcel8</td>
<td>tabelcel9</td>
</tr>
</table>
Tabelhoofdingen toevoegen
Ook de tags <th> en </th> behoren tot de basiscodes
van een tabel. Deze tags worden gebruikt om de "table header" (tabelkop) te
maken, die standaard vet wordt weergegeven.
Hieronder staat een voorbeeld van
het gebruik van de tags <th> en </th>:
| Kolom 1 |
Kolom 2 |
| tabelcel 1 |
tabelcel2 |
| tabelcel3 |
tabelcel4 |
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>tabelcel 1</td>
<td>tabelcel2</td>
</tr>
<tr>
<td>tabelcel3</td>
<td>tabelcel4</td>
</tr>
</table>
Lees verder over tabellen in het hoofdstuk over Tabelattributen.
|
Ontwerp je site