Mijn-eigen-website.nl

Alle codes voor een html-tabel

Ook al bouw je geen hele webpagina's meer met een html-tabel, van de code ervoor kun je veel leren.

Vroeger werden de meeste webpagina's ontworpen op basis van een html-tabel. Tegenwoordig gebeurt dat eigenlijk niet meer, omdat stijlbladen (cascading style sheets) tabellen hebben verdrongen voor de vormgeving van webpagina's.

Toch laat ik deze uitleg staan, omdat je aan de hand hiervan heel duidelijk kunt zien hoe een html-tabel wordt gemaakt. En natuurlijk zijn tabellen nog steeds heel bruikbaar om bepaalde onderdelen van een webpagina netjes weer te geven, zoals een productoverzicht of prijslijst.

Kijk eerst eens naar de tabel die hieronder is afgebeeld. Stel dat je een (gedeelte van een) webpagina wilt ontwerpen op basis van dit schema. (Het is trouwens altijd een goed idee om van te voren even een schets te maken van hoe een tabel er precies uit moet komen te zien.)

In de drie gekleurde vakken bovenaan wil je bijvoorbeeld foto's plaatsen, in de roze balk daaronder komt de titel van je website, de groene balk links moet je knoppenbalk worden en het grijze gedeelte is bestemd voor de hoofdtekst van je webpagina. Hoe ga je nu te werk?

voorbeeldcode html tabel

Zoals je ziet, staan er verschillende html-codes in de afbeelding hierboven. De tabel in zijn geheel staat tussen een set table tags: <table> en </table>; de tabelrijen staan elk tussen een set table row tags: <tr> en </tr>, en de tabelcellen staan elk tussen een set table data tags: <td> en </td>. De inhoud van een cel staat altijd binnen deze table data tags.

Hoewel het er op het eerste gezicht misschien niet zo uitziet, bestaat deze tabel uit twee (!) kolommen en tien rijen. De linkerkolom heeft de breedte van de groene knoppenbalk en de rechterkolom de breedte van het (grijze) hoofdvak.

Je vraagt je af hoe ik met maar twee kolommen toch aan die drie gekleurde cellen bovenaan kom? Heel simpel: de twee oorspronkelijke cellen uit de eerste rij zijn eerst samengevoegd tot één cel en daarna is er bínnen die cel weer een tabel geplaatst – een tabel die bestaat uit maar één rij en drie cellen. Waarom ik dat op die manier heb gedaan? Omdat anders de groene balk met knoppen even breed zou worden als de (oranje) cel links bovenaan. Een kolom kan namelijk overal maar één en dezelfde breedte hebben – hij kan niet bovenaan wat breder zijn dan beneden.

Ook de roze balk bestaat uit samengevoegde cellen. Je voegt cellen samen door aan de celcode van de eerste cel die samengevoegd moet worden de volgende code toe te voegen: colspan="2". Als je drie cellen wilt samenvoegen, vervang je de "2" natuurlijk door een "3". De code van de eerste cel in de roze rij ziet er dus zo uit: <td colspan="2">

Behalve cellen kun je ook rijen samenvoegen. Dat is gebeurd met het grijze hoofdvak. Eigenlijk bestaat het grijze hoofdvak uit acht rijen (net zoveel cellen als er groene cellen in de linkerkolom zijn). De grijze cellen zijn alleen samengevoegd tot één grote cel. Om dat te doen voeg je aan de cel van de eerste rij die moet worden samengevoegd met de cel daaronder de volgende code toe: rowspan="8". De celcode komt er dan zo uit te zien: <td rowspan="8"> Maar let op: als je vervolgens een knop aan je knoppenbalk toevoegt of weghaalt (dus eigenlijk een hele rij toevoegt of weghaalt), moet je ook het cijfer achter rowspan aanpassen.

Aan de verschillende rij- en celcodes kunnen natuurlijk nog veel meer codes worden toegevoegd, zoals de breedte of hoogte van een cel, de kleur ervan, de marges, enzovoort. Daar ga ik op deze webpagina verder niet op in. Maar je vindt hier nog wel de code voor de tabel zoals ik hem hierboven afgebeeld heb. Kopieer hem en experimenteer ermee – je kunt het beste met html-tabellen leren werken door het gewoon te doen!

De html-code van deze tabel:

<table border="0" cellpadding="0" cellspacing="0" width="720">

<tr>
<td colspan="2">
<table width="720" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ff6633" width="240" height="200" valign="top"><p>inhoud oranje cel</p></td>
<td bgcolor="#00ffff" width="240" valign="top"><p>inhoud blauwe cel</p></td>
<td bgcolor="#ffff00" width="240" valign="top"><p>inhoud gele cel</p></td>
</tr>
</table>
</td>
</tr>

<tr>
<td bgcolor="#ff00ff" height="100" colspan="2" valign="middle"><h1>Titel (roze cel)</h1></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="50" width="120"><h2>link 1</h2></td>
<td width="600" rowspan="8" bgcolor="#cccccc" valign="top"><p>Hoofdtekst</p></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="50"><h2>link 2</h2></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="50"><h2>link 3</h2></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="50"><h2>link 4</h2></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="50"><h2>link 5</h2></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="50"><h2>link 6</h2></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="50"><h2>link 7</h2></td>
</tr>

<tr>
<td bgcolor="#00ff00" height="200"></td>
</tr>

</table>

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid