HTML Specials - Tabellen
Toepassen van tabellen
Veel ontwerpers plaatsen de hele pagina in een tabel, om zodoende 'marges' en 'kolommen' te kunnen maken. Zo wordt er vaak een navigatiebalk in de linkerkolom gezet. Ook wordt er voor gekozen om de breedte van de tabel vast te leggen, meestal op ongeveer 600 pixels. De breedte van de kolommen wordt dan vaak ook vastgelegd in pixels. Dit leidt tot voorspelbare problemen: in kleine browservensters past de tabel niet meer, en moet er horizontaal gescrolld worden. In grote browservensters blijft een groot deel van het venster leeg. Als de breedte van de tabel op 100% wordt bepaald, heb je deze problemen niet. Je weet dan niet hoe de browser de tabel precies zal gaan indelen. Zelfs deze flexibele oplossing kan in browsers die geen tabellen ondersteunen tot problemen leiden.
Helaas zijn tabellen de enige manier om verschillende onderdelen mooi naast elkaar te zetten, en dus onmisbaar voor een ieder die met HTML tracht een complexe layout te maken. Daarvoor is vaardigheid met de onderstaande elementen en attributen noodzakelijk. Het ziet er ingewikkeld uit, en dat is het ook wel. Want als je gaat beginnen met het samenvoegen van cellen, of het 'nesten' van tabellen, raak je al snel het overzicht kwijt. Tip: zet altijd de weergave van randen aan (attribuut border=1) als je een ingewikkelde tabel aan het ontwerpen bent.
De tabel-elementen
Het TABLE-element geeft natuurlijk een tabel aan. De tabel is opgebouwd uit verschillende rij-elementen (TR, table-row). Deze TR-elementen zijn weer verdeeld in cel-elementen (TH, table-header of TD, table-data). Hierin staat de eigenlijke inhoud van de tabel. TH-elementen worden weergegeven met nadruk.
Cellen kunnen gewone tekst en text-level markup bevatten, maar ook block-level elementen. Hiermee wordt het mogelijk om een tabel in een tabel te zetten. Bij de elementen TR, TH en TD hoeven formeel alleen de starttags en niet de sluittags gebruikt te worden. In de praktijk is het echter noodzakelijk om de sluittags wel altijd te gebruiken, anders raakt Netscape Navigator compleet overstuur.
Voorbeeld van een eenvoudige tabel:
<TABLE border=1 cellpadding=5>
<TR>
<TH>naam</TH>
<TH>adres</TH>
<TH>telefoon</TH>
</TR>
<TR>
<TD>Wouter Wouterse</TD>
<TD>Dorpsstraat 1</TD>
<TD>0123-456789</TD>
</TR>
</TABLE>
Voorbeeld-weergave in jouw browser.
Attributen bij de tabel-elementen
Dit zijn attributen die zijn toe te voegen aan het TABLE-element:
| attribuut | regelt | mogelijke waarden |
|---|---|---|
border |
weergave van randen | een getal in pixels; hoe groter, hoe dikker de buitenrand (0 betekent geen randen weergeven) |
align |
uitlijning van de tabel | left of center of right |
width |
de breedte van de tabel | een getal in pixels of een percentage (relatief t.o.v. de vensterafmetingen) |
cellspacing |
de afstand tussen de cellen | een getal in pixels |
cellpadding |
de afstand binnen een cel tussen de rand en de inhoud | een getal in pixels |
bgcolor |
kleur van de achtergrond | een kleurnaam of een kleur-code |
Dit zijn attributen die zijn toe te voegen aan het TR-element:
| naam attribuut | regelt | mogelijke inhoud |
|---|---|---|
align |
uitlijning van de inhoud van de cellen in een rij | left of center of right |
valign |
de verticale uitlijning van de inhoud van de cellen in een rij | top of middle of bottom |
bgcolor |
kleur van de achtergrond van de rij | een kleurnaam of een kleur-code |
Dit zijn attributen die zijn toe te voegen aan de TH- en TD-elementen:
| naam attribuut | regelt | mogelijke inhoud |
|---|---|---|
colspan |
het samenvoegen van meerdere cellen in een rij | een getal, dat aangeeft hoeveel kolommen de cel moet omspannen |
rowspan |
het samenvoegen van meerdere cellen in een kolom | een getal, dat aangeeft hoeveel rijen de cel moet omspannen |
align |
uitlijning van de inhoud van de cel | left of center of right |
valign |
de verticale uitlijning van de inhoud van de cel | top of middle of bottom |
width |
de breedte van de cel | een getal in pixels |
bgcolor |
kleur van de achtergrond van de cel | een kleurnaam of een kleur-code |
Voor de liefhebber een voorbeeld van een complexe tabel. Kijk in de bron-weergave van de browser voor de bijbehorende HTML.