HTML - Tabellen


Een tabel kan voor verschillende doeleinden gebruikt worden waaronder voor het weergeven van gegevens. Een tabel wordt altijd geopend met <table> en gesloten met </table> Binnen deze tags worden de rijnen en de cellen van de tabel geplaatst.

In een tabel begin je altijd met een rij en binnen de rij worden dan de cellen geplaatst. Een rij wordt geopend met <tr>. Daarna volgen de cellen, een cel wordt geopend met <td>.

Een voorbeeld van een simpele tabel met één rij en twee cellen ziet er als volgt uit.

<table>
        <tr>
                <td>Cel 1</td>
                <td>Cel 2</td>
        </tr>
</table>


Cel 1 Cel 2

Opmaak

Een tabel kan worden voorzien van opmaak zoals achtergrondkleuren, randen, etc. hoewel dit direct in de code gedaan worden is het advies wel op dit te doen met behulp van CSS. Om een tabel van een rand te voorzien en deze een kleur te geven, doe je het volgende.

<table border="1" bordercolor="#FF0000">


Cel 1 Cel 2

Een tabel kan worden voorzien van een achtergrondkleur, dit kan ook per cel evenals een achtergrond afbeelding, dit kan ook per cel. De code voor een achtergrond afbeelding is.

<table background="afbeelding.gif">


Een achtergrondkleur geef je aan als volgt.

<table bgcolor="#FF0000">


Als je dit per cel aan wilt geven plaats je bgcolor="#FF0000" in de <td> tag. Hieronder het voorbeeld van verschillende achtergrondkleuren in cellen met de bijbehorende code.

     cel 1           cel 2           cel 3           cel 4     
     cel 5           cel 6           cel 7           cel 8     

<table>
        <tr>
                <td bgcolor="#FF0000">cel 1</td>
                <td bgcolor="#FFFF00">cel 2</td>
                <td bgcolor="#FFFFFF">cel 3</td>
                <td bgcolor="#0000FF">cel 4</td>
        </tr>
        <tr>
                <td bgcolor="#00FF00">cel 5</td>
                <td bgcolor="#00FFFF">cel 6</td>
                <td bgcolor="#FF00FF">cel 7</td>
                <td bgcolor="#000080">cel 8</td>
        </tr>
</table>

Breedte instellen

Uiteraard wil je bepalen wat de breedte van tabel moet worden of de breedte van een cel. Ook dit kan het beste geregeld worden met behulp van CSS. Om dit direct in de code te doen plaats je "width:" voor de breedte gevolgt door de waarde tussen twee quotes, op dezelfde manier stel je dit in voor een cel. De onderliggende cellen worden dan net zo breed. Zonder opgegeven breedtes wordt de tabel zo breed als nodig is voor de content.

100 pixels 100 pixels

<table cellpadding="10" cellspacing="0" border="1">
        <tr>
                <td width="100 pixels">100</td>
                <td width="100 pixels">100</td>
        </tr>
</table>

Cellen / Rijen samenvoegen

Cellen en rijen samenvoegen om zo een tabel om bepaalde gegevens te tonen. Hiervoor zijn de Colspan en de Rowspan attributen waarbij Colspan is voor het samenvoegen van cellen en Rowspan voor het samenvoegen van rijen. Deze voeg je toe aan de cel of rij.

<table cellspacing="0">
        <tr>
                <td bgcolor="#FF0000" rowspan="2" >cel 1</td>
                <td bgcolor="#FFFF00">cel 2</td>
                <td bgcolor="#FFFFFF">cel 3</td>
                <td bgcolor="#0000FF">cel 4</td>
        </tr>
        <tr>
                <td bgcolor="#00FFFF">cel 6</td>
                <td bgcolor="#FF00FF">cel 7</td>
                <td bgcolor="#000080">cel 8</td>
        </tr>
</table>


In de code worden cellen (rowspan="2") samengevoegd, het gaat om cel 1 en cel 5. Cel 5 wordt uit de code gehaald en blijven er dus drie TD's over. Op deze manier kun je ook Cel 1 en Cel 2 samenvoegen met Colspan="2" en haal je de regel van Cel 2 uit de code.

     cel 1           cel 2           cel 3           cel 4     
     cel 6           cel 7           cel 8     

Ruimte tussen cellen

Dan door naar cellspacing en cellpadding om de tabel ruimer mee op te zetten. Het verschil is dat bij cellspacing ruimte wordt toegevoegd binnen de cel en bij cellpadding wordt er ruimte aan de buitenkant toegevoegd. Zet je beide op 0 haal je alle ruimte weg.

<table cellspacing="10">


     cel 1           cel 2           cel 3           cel 4     
     cel 5           cel 6           cel 7           cel 8     

<table cellpadding="0">


     cel 1           cel 2           cel 3           cel 4     
     cel 5           cel 6           cel 7           cel 8     

TH

TH is de afkorting van table header en deze dienen als titels. TH's worden eenmalig bovenaan de tabel toegevoegd, tekst hierbinnen wordt standaard gecentreerd weergegeven, middels CSS kan deze tekst eenvoudig weer links worden uitgelijnd.

TH 1 TH 2
cel 1 cel 2

<table cellpadding="10" cellspacing="0" border="1">
        <tr>
                <th width="100">TH 1</th>
                <th width="100">TH 2</th>
        </tr>
        <tr>
                <td>cel 1</td>
                <td>cel 2</td>
        </tr>
</table>

Caption

Als aanvulling op een tabel is er de mogelijkheid om een caption toe te voegen. Door dit toe te voegen aan een tabel wordt er tekst als een titel boven de tabel geplaatst. Deze titel / caption wordt dan gecentreerd boven de tabel zoals in het voorbeeld hieronder is te zien.

.
Dit is de tabeltitel
100 100

<table cellpadding="10" cellspacing="0" border="1">
        <caption>Dit is de tabeltitel</caption>
        <tr>
                <td width="100">100</td>
                <td width="100">100</td>
        </tr>
</table>

Tabelcel mouseover

Aanvullend op het geven van een achtergrondkleur kan op de onderstaande manier een mouseover per cel in een tabel ingesteld worden, tevens wel direct het advies als het mogelijk is om dit te regelen met behulp van CSS. Op het moment dat je met de muis op een cel gaan staan wordt de achtergrondkleur vervangen door een andere kleur.

Om nu een mouseover per cel in te stellen kun je onderstaande HTML code invoegen in een tabelcel, de code is als volgt. Achter "onmouseover" wordt de kleur ingesteld die wordt getoond op het moment dat iemand met de muis over de cel heengaat. Achter onmouseout wordt de kleur getoond die verschijnt als de muis weer van de cel af is.

<table>
        <tr>
                <td onmouseover="this.bgColor='#FF0000'" onmouseout="this.bgColor=''"></td>
        </tr>
</table>


Een voorbeeld hieronder, ga met je muis op een cel staan.

Rood Oranje Geel