<Inhoud>   specials: <Kleuren> <Tabellen> <Frames>


 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.


Copyright © 2000, Rijk van Geijtenbeek, mail-adres: rijk@iname.com.