Tabellen zijn de spreadsheets van het internet. Ze zijn ideaal als je een stukje informatie hebt dat uit Excel komt, uit een database komt of op een andere manier is opgebouwd uit rijen en kolommen.
Binnen de rijen van een HTML tabel plaats je de afzonderlijke cellen. De cel van een tabel kan ieder willekeurig stukje informatie bevatten, zoals tekst en afbeeldingen. Tabellen worden vaak gebruikt om gegevens die logisch bij elkaar horen overzichtelijk te presenteren. Denk hierbij bijvoorbeeld aan een tabel met naam en adresgegevens zoals onderstaand voorbeeld laat zien.
<table border="1">
<tr>
<th>Naam</th>
<th>Adres</th>
<th>Postcode</t>
<th>Woonplaats</th>
</tr>
<tr>
<td>Aarts</td>
<td>Eikenlaan 12</td>
<td>1234 AA</td>
<td>Arnhem</td>
</tr>
<tr>
<td>Berens</td>
<td>Zeestraat 98</td>
<td>5664 AB</td>
<td>Vlissingen</td>
</tr>
</table>
Oefening 1: voeg jezelf toe als een rij aan deze tabel.
Oefening 2: Voeg een kolom 'e-mailadres' toe en vul deze voor alle rijen in.
Binnen de <table> tag waarmee we het begin en het eind van de tabel aangeeft plaats je de verschillende tabel rijen. Elke rij geef je aan met de <tr> tag (table row). Binnen elke rij kan je vervolgens de verschillende cellen aangeven.
Er zijn twee verschillende manieren om een tabel cel in een rij te maken. De eerste is de <th> tag (table header) waarmee je een cel aangeeft die als kopje fungeert in de tabel. In de bovenstaande tabel zijn dat bijvoorbeeld alle cellen in de eerste rij.
De tweede manier is met de <td> tag (table data). Dit is een 'normale' cel in de tabel. Zonder verdere stijlopmaak is het enige zichtbare verschil dat de <th> standaard vet en gecentreerd wordt afgedrukt in browsers en de <td> niet.
Net als in een spreadsheet is het in HTML mogelijk om cellen samen te voegen. Dit doe je met behulp van het colspan en rowspan attribuut. Met deze twee attributen kan je een cel in een tabel over meerdere rijen en/of kolommen laten spreiden.
Als je een cel bijvoorbeeld over drie kolommen wil spreiden doe je dat door aan deze cel het attribuut colspan="3" mee te geven. De cel wordt dan breder en neemt dan ook ruimte in de twee kolommen rechts van de cel.
Het is belangrijk dat je in de HMTL de cellen weglaat die normaal op de plek zouden staan die de samengevoegde cel inneemt.
<table border="1">
<tr>
<td colspan="3">Samengevoegde rij</td>
<!-- Let op, de twee cellen die hier normaal zouden staan, staan hier nu niet meer! -->
</tr>
<tr>
<td>Eerste cel</td>
<td>Tweede cel</td>
<td>Derde cel</td>
</tr>
</table>
Oefening 1: Wat gebeurt er als je colspan verandert in 2? Of in 1?
Oefening 2: Voeg een 'Vierde cel' toe. Zorg ervoor dat de samengevoegde rij nog steeds boven alle cellen strekt.
Oefening 3: Maak een tabel van twee rijen en drie kolommen. Pas deze daarna aan zodat de twee cellen van de middelste kolom samengevoegd zijn.