Waar vandaan: Thuis op Internet > Cursus website maken voor senioren >
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.