Tabel met ronde hoeken maken
Als je naar een afgeronde tabel kijkt dan valt je in eerste stantie vaak niet op dat er een truc is gebruikt om zoiets te maken. Men maakt namelijk gebruik van een tabel bestaande uit 3 kolommen en rijen. De meest linkse en rechtse kolom heeft een vaste breedte, de middelste heeft vaak een variabele breedte.
Laten we maar gelijk beginnen, dat is het gemakkelijkste.
Je start je webeditor op en begint met een lege html pagina en zet er de basis elementen op (head, body, enz).
Vervolgens maken we een tabel van 3 rijen en 3 kolommen:
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="20" height="20"></td>
<td width="90%" height="20"></td>
<td width="20" height="20"></td>
</tr>
<tr>
<td width="20"></td>
<td width="90%"></td>
<td width="20"></td>
</tr>
<tr>
<td width="20" height="20"></td>
<td width="90%" height="20"></td>
<td width="20" height="20"></td>
</tr>
</table>
Nu hebben we dus een bovenste rij met de links kolom van 20 bij 20.
We zetten expres de border aan om het principe goed uit te kunnen leggen.
De middelste cel in de tabel gaat de werkelijke inhoud van de tabel bevatten, daar komt de tekst in. Alle andere tabellen gaan plaatjes bevatten die de rand van de tabel gaan voorstellen, straks zet je de border uit en dan "lijkt" het een tabel met afgeronde randen.
Maak nu in je tekenprogramma eerst afrondingen. Sla ze met een toepasselijke naam op zoals bijvoorbeeld tleft.gif en bleft.gif ofzo. Als je een afronding maakt van 20 bij 20 pixels en die opslaat dan kun je in de meeste programma's de afbeelding draaien en vervolgens die afrondingen opslaan onder een andere naam. Zo weet je zeker dat alle afrondingen hetzelfde zijn. Maak vervolgens een afbeelding van 20 pixels hoog en 1 pixel breed. Maak hier het randje wat je middenin gaat gebruiken en aan de zijkanten van de tabel. Zorg dat dit plaatje klopt met de afrondingen die je al gemaakt hebt.
Ik hoop dat dit niet al te moeilijk is. Mocht je er niet uitkomen kijk dan straks naar de website waar ik het ook gebruikt heb.
Nu komt het echte werk, de plaatjes in de tabel zetten. Houdt er rekening mee dat de code niet altijd goed werkt, met valign en align kun je vaak al een hoop problemen oplossen als plaatjes zich gaan herhalen.
Hier even wat code die ik zelf heb gebruikt. Pas de verwijzingen naar je plaatjes aan en pas eventueel de maten van de tabel aan.
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr height="20px" width="100%">
<td width="20px" valign="bottom"><img src="images/table/tleft.gif" width="100%" heigth="100%" /></td>
<td width="100%" class="titel" style="background-image: url(images/table/top.gif);" align="center">
</td>
<td width="20px" valign="bottom"><img src="images/table/tright.gif" width="20" height="20" heigth="100%" /></td>
</tr>
<tr width="100%">
<td width="20px" style="background-image: url(images/table/left.gif);" align="right"> </td>
<td width="100%" bgcolor="#FFFF00" align="center">
</td>
<td width="20" style="background-image: url(images/table/right.gif);" align="left"> </td>
</tr>
<tr height="20" width="100%">
<td width="20px"><img src="images/table/bleft.gif" width="20" height="20" /></td>
<td width="100%" style="background-image: url(images/table/bottom.gif);"></td>
<td width="20px"><img src="images/table/bright.gif" width="20" height="20" heigth="100%" /></td>
</tr>
</table>
Af en toe heb ik wat css gebruikt om het zo te maken dat de tabel ook in browsers zoals firefox er goed uitziet.
Er is een cel daar staat niets in, daar kun je de inhoud inzetten.
Als er nog vragen en/of aanvullingen zijn kun je die hier plaatsen natuurlijk.
Hopelijk is hier het wat duidelijker geworden hoe die afgeronde tabellen gemaakt worden.