Tabellen

Een mooie mogelijkheid van vrijwel alle nieuwe browsers is het gebruik van tabellen. Je kan ze gebruiken om de layout van je pagina zelf in de hand te houden, en dit kan soms erg gewenst zijn.

Sommige mensen haten tabellen, omdat nog niet alle browsers ze ondersteunen (Netscape doet het vanaf versie 1.1, en de meeste tabel definities zijn opgenomen in HTML3.0 dus ze worden steeds meer standaard). Ik hou echter wel van tabellen; verreweg de meeste mensen surfen met Netscape of een andere browser die tabellen ondersteunt (nieuwere versies van Mosaic, NetManage Chameleon, en Microsoft Internet Explorer doen dat allemaal).

Anyway. Hoe werken ze.

Het begin en eind van een tabel wordt aangegeven met <table> en </table>, respectievelijk. Daar tussen staan de tabel-gegevens.

Die bestaan uit allemaal rijen, oftewel horizontale regels, aangegeven met <tr>..</tr>. Iedere rij bevat een aantal kolom-elementen, met tags <td>..</td>. Iedere rij moet hetzelfde aantal kolom-elementen hebben.

Voorbeeld. Een eenvoudige tabel van drie rijen, ieder met twee kolommen, wordt zo gedefinieerd:

<table>
<tr><td>Eerste kolom</td><td>Tweede kolom</td></tr>
<tr><td>12          </td><td>          15</td></tr>
<tr><td>27          </td><td>          29</td></tr>
</table>

en dit komt er zo uit te zien:

Eerste kolom	Tweede kolom
12	15
27	29

Tijdens het maken van een tabel is het vaak nuttig om de randen zichtbaar te maken. Dit kan door <table> te vervangen door <table border>. De tabel komt er dan zo uit te zien:

Eerste kolom	Tweede kolom
12	15
27	29

Dit is de simpelste vorm van een tabel. Er zijn echter massa's opties om de layout van cellen te veranderen, en om cellen meerdere kolommen of rijen in te laten nemen. Die zal ik nu uitleggen. Ik zal overigens steeds de border aan laten staan in de tabellen; ik ben echter van mening dat dit nogal lelijk is als dit in een echte pagina wordt toegepast..

Vette kopjes

Voor de rij met de kolom-kopjes is een speciaal tag voor de kolom-elementen, die er voor zorgt dat ze gecentreerd worden en in een vet lettertype worden gezet: het <th> tag. Als ik in de bovenstaande tabel in de eerste rij de <td>..</td> vervang door <th>..</th>, komt de tabel er zo uit te zien:

Eerste kolom	Tweede kolom
12	15
27	29

Links/rechts uitlijnen of centreren van cellen

In ieder <td> kan je met align=left, align=center of align=right de voor de hand liggende dingen doen. In de volgende tabel is dit toegepast op de voorbeeld tabel: In de eerste kolom is <td> vervangen door van <td align=center>.

Eerste kolom	Tweede kolom
12	15
27	29

Meerdere kolommen of rijen per cel

Binnen een <td> of <th> tag kan je met colspan meerdere kolommen gebruiken, en met rowspan meerdere rijen. Voorbeeldje van colspan: Hier is bovenaan de tabel een extra regel toegevoegd die er zo uitziet:

    <tr><th colspan=2>Resultaten over 1873</th></tr>

en daarmee wordt de tabel

Resultaten over 1873
Eerste kolom	Tweede kolom
12	15
27	29

Rowspan werkt op dezelfde manier.

Vertikaal uitlijnen van cellen

Dit werkt precies zo als align, maar voor vertikale uitlijning heet dat valign, en left/center/right wordt vervangen door top/middle/bottom. Je kan dus bijvoorbeeld een cel definieren met

    <td valign=top>

Dit zorgt er voor dat de tekst tegen de bovenrand van de cel wordt aangezet. Je kan deze opties ook in <tr>-tags zetten.

Formaat van tabel en elementen

De breedte van een tabel kan worden opgegeven, in pixels of in percentage van de breedte van het browser-window van de gebruiker:

<table width=500>: 500 pixels breed.

<table width=100%>: Het hele scherm breed.

Dit kan nuttig zijn als je de layout van een scherm volkomen onder controle wil houden.

Je kan van iedere kolom ook de breedte opgeven, in pixels of in percentage van de breedte van de hele tabel:

Resultaten over 1873
Eerste kolom	Tweede kolom
12	15
27	29

Deze tabel begint met <table border width=75%>; hij is dus 75% van je window groot. Verander maar eens de breedte van je Netscape window..
De regel met de kopjes ziet er nu zo uit:

<tr><th width=30%>Eerste kolom</th><th width=70%>
 Tweede kolom</th></tr>

De eerste kolom neemt dus 30% van de tabel in, en de tweede neemt de overige 70% in.

Ruimte binnen en tussen cellen

De ruimte tussen de cellen wordt bepaald door cellspacing in het <table> tag: Hier is een extreem voorbeeld met <table border cellspacing=10>:

Resultaten over 1873
Eerste kolom	Tweede kolom
12	15
27	29

Je kan zorgen dat de tekst niet helemaal tegen de binnenrand van de tabel aan komt met cellpadding in het <table> tag: Hier is een voorbeeld met <table border cellpadding=10>:

Resultaten over 1873
Eerste kolom	Tweede kolom
12	15
27	29

Borderdikte veranderen

Het zit in de definitie, en sommige mensen gebruiken het dus ze zullen het wel mooi vinden. Je kan bij de border optie een getal meegeven dat de dikte van de kantlijn bepaald. Soms zie je tabellen die er zo uit zien:

Resultaten over 1873
Eerste kolom	Tweede kolom
12	15
27	29

Dit voorbeeld begint met <table border=10>.

De linkjes op deze pagina:

Geen