9.2 Kleuren aan de tabel geven

We kunnen de tabel ook een kleurtje geven.

Om de hele tabel eenzelfde kleurtje te geven, gebruiken we de parameter bgcolor=”” in de tag <table>.

Dit voorbeeld zal heel onze tabel een lichtgroene achtergrondkleur geven:

<table width="50%" height="100" border="1" bgcolor="#00FF00">

Dit wordt:

Winkel	Uitgave in Euro
Krantenwinkel	2,00
Bakker	5,05
Slager	7,34
Bioscoop	7,50

We kunnen ook pér cel een kleurtje geven. Als we bv. 2 cellen een afwijkende kleur willen geven aan de rest. Dit doen we door de parameter bgcolor=”” mee te geven in de tag <td> (<td> is de tag om de cellen aan te geven van een tabel).
Je HTML code ziet er dan als volgt uit:

<table width="50%" height="100" border="1" bgcolor="#00FF00">
<tr>
<td bgcolor="#009966">Winkel</td>
<td >Uitgave in Euro</td>
</tr>
<td>Krantenwinkel</td>
<td>2,00</td>
</tr>
<tr>
<td>Bakker</td>
<td>5,05</td>
</tr>
<tr>
<td>Slager</td>
<td>7,34</td>
</tr>
<tr>
<td bgcolor="#009966">Bioscoop</td>
<td>7,50</td>
</tr>
</table>

Dit wordt:

Winkel	Uitgave in Euro
Krantenwinkel	2,00
Bakker	5,05
Slager	7,34
Bioscoop	7,50

Ook kan je een hele rij eenzelfde achtergrondkleur geven. Dit doe je door de parameter bgcolor=”” mee te geven aan de <tr> tag (<tr> is de tag voor de rijen van een tabel).
Je HTML code is dan als volgt:

<table width="50%" height="100" border="1" bgcolor="#00FF00">
<tr bgcolor="#009966">
<td>Winkel</td>
<td>Uitgave in Euro</td>
</tr>
<td>Krantenwinkel</td>
<td>2,00</td>
</tr>
<tr>
<td>Bakker</td>
<td>5,05</td>
</tr>
<tr>
<td>Slager</td>
<td>7,34</td>
</tr>
<tr>
<td bgcolor="#009966">Bioscoop</td>
<td>7,50</td>
</tr>
</table>

Dit wordt dan:

Winkel	Uitgave in Euro
Krantenwinkel	2,00
Bakker	5,05
Slager	7,34
Bioscoop	7,50

Je ziet dus dat je alles kan combineren: je hele tabel een bepaalde achtergrond geven, maar één of meerdere cellen en/of één of meerdere rijen een andere kleur geven.

Tabellen worden ook voor de gehele lay-out te bepalen gebruikt. Seniorennet bijvoorbeeld is volledig opgemaakt uit tabellen die je niet kan zien, maar ervoor zorgt dat de lay-out van de website is zoals je ze nu ziet.
Hiervoor zijn tientallen tabellen die in elkaar, over elkaar, naast elkaar,… staan. Ze zijn allemaal onzichtbaar, maar zorgen samen voor een mooie structuur.
Experimenteren met tabellen is altijd leuk, al moet je het beste er een duidelijke structuur in maken, want meerdere tabellen in elkaar kan erg ingewikkeld worden om er nog aan uit te kunnen.

Klik hier om naar "extra opmaak voor de tabel" te gaan.