terug naar inleiding tabel

een tabel op maat maken

In de cellen van de tabel (rand op 1 gezet) hieronder staat verschillende inhoud en daardoor nemen die cellen veel ruimte in beslag. Als vormgever is het nu noodzakelijk om de afmetingen zelf in te stellen. We willen dat de eerste kolom juist breed wordt: 100px, de tweede 50 px en laatste 2 kolommen 150 px.

1a	1b	1c	1d	1e
2a	2b	2c dit is cel 2c	2d	2e
3a	3b	3c	3d. Deze cel eist zo wel veel ruimte op, omdat er veel inhoud in zit.	3e
4a	4b	4c	4d	4e
5a	5b	5c	5d	5e

Het plan is om de gekleurde cellen over te houden, en de niet gekleurde cellen 1a,1b...1e leeg te halen en deze te vullen met een doorzichtige afbeelding, die van zichzelf maar 1px breed en 1pixel hoog is. deze pixel heet spacer.gif en door hier met je rechtermuisknop op te klikken, kun je hem downloaden. (Sla hem dan wel op in dezelfde map als je eigen document met de tabel!)

Omdat in een tabel de breedte van een kolom zich voegt naar het breedste onderdeel in die kolom verbreed je de kolom, door de breedte maat van spacer.gif van 1 op te hogen naar de maat, die je wil. je krijgt dan de tabel hieronder:

2a	2b	2c dit is cel 2c	2d	2e
3a	3b	3c	3d. Deze cel eist zo wel veel ruimte op, omdat er veel inhoud in zit.	3e
4a	4b	4c	4d	4e
5a	5b	5c	5d	5e

In plaats van de inhoud 1b staat er nu dus:

<img src="spacer.gif" width="50" height="1">

Dit werkt nog niet helemaal, omdat de inhoud soms nog verbreed wordt door teveel inhoud. In ons geval is dat gelukkig tekst. We kunnen de breedte van de totale tabel nu instellen op de totale breedte, die we willen: 100 + 50 + 150 +150 + 1 = 451 pixels. Als we de <table> -tag uit breiden met:

<table width="451"  border="1" cellpadding="0" cellspacing="0">

krijg je als resultaat:

2a	2b	2c dit is cel 2c	2d	2e
3a	3b	3c	3d. Deze cel eist zo wel veel ruimte op, omdat er veel inhoud in zit.	3e
4a	4b	4c	4d	4e
5a	5b	5c	5d	5e

Behalve de laatste kolom hebben we de breedte nu voor elkaar. De laatste witte kolom, met 2e, 3e, 4e en 5e wordt nu leeg gehaald en gevuld met spacer.gif die de hoogte krijgt, die wij willen: elk 100 pixels: In elke cel van de laatste kolom staat nu:

<img src="spacer.gif" width="1" height="100"> 

resultaat:

2a	2b	2c dit is cel 2c	2d
3a	3b	3c	3d. Deze cel eist zo wel veel ruimte op, omdat er veel inhoud in zit.
4a	4b	4c	4d
5a	5b	5c	5d

Je ziet nu dat de hoogte door ons bepaald is.
Staat de rand nu op 0 dan ziet het er zo uit

2a	2b	2c dit is cel 2c	2d
3a	3b	3c	3d. Deze cel eist zo wel veel ruimte op, omdat er veel inhoud in zit.
4a	4b	4c	4d
5a	5b	5c	5d

Het doel is bereikt: tabelcellen zoals wij die instellen.
Zorg er in je planning wel voor dat de maten van de inhoud niet meer ruimte eisen dan je vanuit je schetsen wil!
Een technische schets is dus noodzakelijk.

links naar andere sites over HTML en CSS:

naar een exclusieve beschrijving van HTML.
een beschrijving van het GLA-contractonderwijs
nog een site met veel over HTML - CSS - JavaScript: www.mijnhomepage.nl/
de webpagina, waar ik de techniek voor de navigatie van deze pagina's heb gevonden.