Tabellen opmaken met style

Hieronder zie je twee tabellen. Links een tabel met de klassieke HTML 4-opmaak. In de tabel rechts ziet elke cel er anders uit. Ook is er een aparte rand rond de tabel.
Op deze bladzijde wordt besproken hoe je het aanpakt om de opmaak van tabellen helemaal naar je eigen hand te zetten met behulp van CSS.

De code van de rechter tabel kun je downloaden als voorbeeld om zelf verder mee te werken. Zie onderaan deze bladzijde.

• De linker tabel heeft de attributen border="1" cellspacing="2" cellpadding="5".
  In de rechter tabel is gebruikt: border="0" cellspacing="2" cellpadding="5".
   
• In de rechter tabel hebben de <table>- en <td>-tags een style-attribuut.
  In de linker tabel zijn geen style-attributen toegepast.
  Met het style-attribuut kun je de tabel en elke willekeurige cel binnen die tabel opmaken zoals je wilt.
   
• De hier besproken style-attributen mogen, behalve in de <table>- en <td>-tags, ook in een class in een <style>-block staan. De definitie in de tags zelf heeft prioriteit boven definitie in een class.
• De genoemde style-attributen werken niet met de rij-tag <tr>. Strikt genomen is dat ook niet nodig; je kunt alles regelen met <table> en <td>.
  Style-attributen die wel werken met de rij-tag <tr> bestaan overigens wel.
   
• De style-attributen voor de opmaak van de randen en voor de opmaak van de tekst in de cellen worden in het volgende nader uitgewerkt.
   
• Het opmaken van de randen gaat als volgt:
  
  • Voeg aan <table>- en/of <td>-tags het volgende attribuut toe:
     
    
    style="border: dikte stijl kleur;"
     

    Naam	Betekenis en mogelijke waarden:
    dikte	Breedte van de rand: Hier kun je gebruiken: thin, medium en thick, of een dikte in pixels, punten, cm, enz. De werking van thin, medium en thick is afhankelijk van de browser. Daarom wordt aanbevolen een waarde in pixels te gebruiken: 1px, 2px, enz.
    stijl	Hoe ziet de border er uit: solid Enkele, platte lijn (tabelrand en cel A1). double Dubbele, platte lijn (cel A2). ridge Reliëf-rand. De rand lijkt op de bladzijde te liggen (cel A3). groove Reliëf-rand. De rand lijkt op een groef in de bladzijde (cel A4). inset Reliëf-cel. De cel lijkt op een ingedrukte knop (cel A5). outset Reliëf-cel. De cel lijkt op een niet-ingedrukte knop (cel A6). dashed Enkele, platte streeplijn (cel B5 en C5/C6/D5/D6). dotted Enkele, platte stippellijn (cel B3 en onderrand rij E).
    kleur	Kleur van de border: Alle geldige kleuraanduidingen mogen worden gebruikt, zowel standaardnamen als hexadecimale RGB-codes. Zie ook het item "Kleurcodes voor tekst, links en achtergrond". Bij hexadecimale RGB-codes moet je ook het # opgeven.

     
  • De volgorde dikte stijl kleur mag veranderd worden.
  • Bij de stijlen ridge, groove, inset en outset moet de dikte van de border groter zijn dan 1px voor een zichtbaar effect.
   
• De hierboven beschreven werkwijze geldt voor alle vier de randen van een tabel of cel. Als je verschillende randen wilt kun je dat ook als volgt aanpakken:
  
  • Ga uit van de plaats van de rand zelf:
    Vervang de optie border: door de opties border-top:, border-right:, border-bottom: en border-left:. Voeg er dikte, stijl en kleur aan toe zoals hierboven is beschreven.
    Zie ook de code van cel 'E1 t.m. E3' in de downloadfile.
  • Ga uit van de rand-attributen:
    Vervang de optie border: door de opties border-width:, border-style: en border-color:.
    Voeg aan elk van deze opties 4 waarden toe, in de volgorde boven, rechts, onder en links (met de klok mee). Dus bij border-width: geef je vier diktes, bij border-style: geef je vier stijlen en bij border-color: geef je vier kleuren.
    Zie ook de code van cel 'E4 t.m. E6' in de downloadfile.
     
  • Weglaten van één of meerdere van deze attributen heeft tot gevolg dat de overeenkomende rand geheel of gedeeltelijk wordt weggelaten. Zie cel B6, die helemaal geen style-attribuut heeft. De opmaak wordt geheel overgenomen uit de <table>-tag.
   
• Om deze manier van opmaken van tabellen effectief te gebruiken moet in de <table>-tag het attribuut border="0" worden gebruikt. Als border="1" verschijnen zowel de standaard HTML-border als de border die is ingesteld met style.
  In sommige gevallen kunnen hier overigens fraaie effecten mee bereikt worden.
• In het voorbeeld op deze bladzijde is cellspacing="2". Daardoor staan de cellen los van elkaar. Meestal ziet dat er het mooiste uit. Je kunt de cellen echter ook tegen elkaar aan proppen door cellspacing="0" te gebruiken, of door border-collapse: collapse toe te voegen aan het style-attribuut van de tabel.
  Het effect van deze twee mogelijkheden is niet gelijk. Pas dit alleen toe als alle cellen een gelijke rand hebben. In het voorbeeld op deze pagina zou het effect nogal rommelig zijn.
   
• Het opmaken van de tekst in de cellen gaat als volgt:
  
  • Om de kleur van de tekst in te stellen voeg je color: toe aan het style-attribuut van de <td>-tag. Eigenlijk kun je hier alle lettertype- en opmaakopties gebruiken zoals text_decoration, font-family, enz.
     
  • Om de achtergrond-kleur te veranderen neem je background: op in het style-attribuut. De instelling in de <td>-tag gaat vóór de instelling in de <table>-tag.
    Overigens kan dit ook direct met het attribuut bgcolor in zowel <td> als <table>. De instelling in de style gaat voor de instelling met bgcolor.
     
  • De vrije ruimte rond de tekst in een cel stel je in met het attribuut cellpadding in de <table>-tag. Je kunt dat veranderen met de style-optie padding. Na padding volgen vier getallen (in pixels) die de breedte van de vrije ruimte aangeven, in de volgorde boven, rechts, onder en links (met de klok mee). Net als bij de randen kun je dit opdelen in padding-top, padding-right, padding-bottom en padding-left. In de rijen B en C van het voorbeeld zijn padding-top en padding-bottom gebruikt. Voor niet-genoemde waarden van padding wordt de waarde van het attribuut cellpadding genomen.
   
• Merk op dat je per tag maar één style-attribuut nodig hebt. Je kunt de diverse opties samenvoegen, gescheiden door punt-komma's.

Downloaden:
 
De code van het voorbeeld is beschikbaar voor downloaden.
Druk op de knop:  File: voorb190.zip, 719 bytes.