HTML college: Tabellen

Met tabellen kun je veel meer doen dan je misschien aanvankelijk zou denken. Natuurlijk kun je een tabel maken waarin je je vrienden en kennissen opneemt met hun adres, telefoonnummer en banksaldo, maar je kunt een tabel ook gebruiken om plaatjes of invoervelden overzichtelijk op het scherm van de browser te plaatsen. Je kunt zelfs tabellen gebruiken als vervanging van frames. Een voordeel daarvan is dat alle elementen binnen 1 pagina staan, terwijl frames je pagina onderverdelen in onafhankelijke stukken.

We beginnen met eenvoudige tabellen waarin alleen tekst staat. Later gaan we tabellen maken met andere HTML-elementen.

Een eenvoudige tabel

Een tabel maak je met de HTML tag <table> die je natuurlijk moet afsluiten met </table>
Vervolgens ga je de tabel rij voor rij opbouwen. In elke rij kun je een aantal kolommen opnemen. De tags die je hiervoor kunt gebruiken zijn:

<tr> Table Row begint een nieuwe rij
<td> Table Data vult een hokje met data

Je kunt een tabel bijvoorbeeld als volgt opbouwen:
Begin met gewoon opschrijven van wat je in een tabel wilt zetten:

  Trompet  - Blaasinstrument
  Gitaar   - Snaarinstrument
  Hi-hat   - Slagwerk

Vervolgens maak je een tabel met 3 rijen:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

En dan ga je rij voor rij de tabel invullen:

<table border="1">
  <tr>   ------- begin een nieuwe rij
      <td>Trompet</td>
      <td>Blaasinstrument</td>
  </tr>
  <tr>   ------- begin een nieuwe rij
      <td>Gitaar</td>
      <td>Snaarinstrument</td>
  </tr>
  <tr>   ------- begin een nieuwe rij
      <td>Hi-hat</td>
      <td>Slagwerk</td>
  </tr>
</table>

Dit wordt dan het resultaat. Voor de duidelijkheid heeft deze tabel een randje van 1 pixel breed.

Trompet	Blaasinstrument
Gitaar	Snaarinstrument
Hi-hat	Slagwerk

Gebruik van header-velden

Deze tabel bevat wel wat gegevens maar het is nog niet meteen duidelijk wat de betekenis ervan is. We kunnen bij elke rij en kolom een beschrijvend veldje opnemen dat aangeeft wat die rij of kolom betekent. Dat doe je met de tag <th> (Table Header). Zo'n header gedraagt zich bijna hetzelfde als de gewone Table Data en we nemen die headers op dezelfde manier in de tabel op. Kijk voor de overige uitbreidingen in de HTML-source als je wilt weten hoe je het moet opbouwen.

Toevoegen van headers voor iedere rij:

Instrument 1	Trompet	Blaasinstrument
Instrument 2	Gitaar	Snaarinstrument
Instrument 3	Hi-hat	Slagwerk

Toevoegen van headers bij iedere kolom:

	Instrument	Type
Instrument 1	Trompet	Blaasinstrument
Instrument 2	Gitaar	Snaarinstrument
Instrument 3	Hi-hat	Slagwerk

Caption

Nou nog een titel en we hebben de belangrijkste elementen van de tabel:

Instrumenten en hun typen
Instrument Type

Instrument 1 Trompet Blaasinstrument

Instrument 2 Gitaar Snaarinstrument

Instrument 3 Hi-hat Slagwerk

De attributen colspan en rowspan

Soms wil je dat een veldje in een tabel zich uitstrekt over meerdere rijen en/of kolommen. Je wilt bijvoorbeeld een header-veldje gebruiken waarin je iets zegt over twee of meer rijen of kolommen. Hieronder staan drie voorbeelden, waarbij in het eerste geval de header 'Beschrijving' zich over twee kolommen verdeelt, in het tweede voorbeeld verschijnt er ook een header die iets zegt over drie rijen en bij het derde voorbeeld is een veldje middenin de tabel opgerekt tot twee rijen en twee kolommen.

Dat oprekken van een veldje doe je met de attributen colspan en rowspan. Welke je moet gebruiken kun je onthouden door te denken aan het 'opspannen' of 'overkoepelen' van een aantal rijen of kolommen. Het attribuut colspan gebruik je om een aantal kolommen te overkoepelen, en rowspan gebruik je om een aantal rijen te overkoepelen.

Voorbeeld 1: Gebruik van colspan attribuut
	Beschrijving
	Instrument	Type
Instrument 1	Trompet	Blaasinstrument
Instrument 2	Gitaar	Snaarinstrument
Instrument 3	Hi-hat	Slagwerk

Voorbeeld 2: Gebruik van colspan en rowspan attributen
		Beschrijving
		Instrument	Type
Index	Instrument 1	Trompet	Blaasinstrument
	Instrument 2	Gitaar	Snaarinstrument
	Instrument 3	Hi-hat	Slagwerk

Voorbeeld 3: Gebruik van colspan en rowspan attributen
		Beschrijving
		Instrument	Type	Materiaal
Index	Instrument 1	Trompet	Blaasinstrument	Koper
	Instrument 2	Gitaar	Snaarinstrument	Hout
	Instrument 3	Viool	Snaarinstrument	Hout
	Instrument 4	Hi-hat	Slagwerk	Staal

Alignment

Je kunt de volgende waarden gebruiken om de inhoud van rijen of cellen van een tabel horizontaal of vertikaal te positioneren:

Attribuut	Waarde
align (horizontaal)	left
	center
	right
valign (vertikaal)	top
	middle
	bottom

Gebruik van een tabel voor bepalen van je layout

Een eenvoudig voorbeeld waarbij de layout van een stuk tekst wordt geregeld met behulp van een tabel: tekst in twee kolommen.

Op het Nederlands Film Festival hoorde Toine Berbers van een filmmaker waarom het programma Kort! uit negen korte films bestaat in plaats van de beoogde tien. 'Hij vertelde dat iedere filmmaker de maximale subsidie van 125 duizend gulden had ''genomen'', waardoor het geld na negen films op was. Die mentaliteit, die moet anders. Je neemt geen geld van het fonds. We hebben het hier over belastinggeld. Berbers, sinds 1 juli directeur van het filmfonds, is 'een nieuwkomer in de branche'. De voormalige Volkskrant-redacteur werd, benadrukt hij, gevraagd. Door Frans Peijster, de penningmeester van het fonds. 'De opdracht is helder: het marktaandeel van de Nederlandse film moet omhoog.'

Andere inhoud dan tekst

Je kunt in plaats van tekst ook andere HTML-elementen in de velden van je tabel opnemen. Bijvoorbeeld plaatjes, links of zelfs een andere tabel.