Tekst in een kader zetten met <table>
Het onderstaande verhaal blijft geldig zolang er HTML 4 is. Op deze site wordt het niet meer onderhouden.
Laatste versie: 21 oktober 2009
Vervallen: 16 april 2013
Je kunt tekst extra nadruk geven door die in een kader zetten, zoals hieronder.
| Beter goed gegraaid dan slecht gekopieerd.... |
Afgezien van de morele waarde van bovenstaande uitspraak trekt het wel de aandacht. Het kader wordt gemaakt met
een <table> met slechts één cel, er is dan ook slechts één rij.
De code ziet er als volgt uit:
<table border="5" cellspacing="2" cellpadding="5" align="center" bordercolor="#FF00FF" bordercolorlight="#C0C0C0" bordercolordark="#800080" bgcolor="#FFFFD8"><tr><td bgcolor="#FFFFFF">
Beter goed gegraaid dan slecht gekopieerd....
</td></tr></table>
Het gaat erom bij een dergelijk kader om een beetje te spelen met de kleurdefinities (#rrggbb) in de attributen:
- bgcolor,
- bordercolor,
- bordercolorlight, (Buitenrand links en boven; Binnenrand onder en rechts)
- bordercolordark, (Buitenrand rechts en onder; Binnenrand boven en links)
Omdat er slechts één cel wordt gebruikt is gebruik in <tr> voor deze toepassing niet zinvol.
Het attribuut bordercolor wordt pas actief als bordercolorlight en bordercolordark allebei afwezig zijn. Zie helemaal onderaan deze bladzijde.
Het is alsof er van linksboven naar rechtsonder door een lamp op de table schijnt. Daardoor lijkt een zeker reliëf in de tabel te zitten. De buitenkant van de tabel is links en boven lichtgrijs (kleur #C0C0C0). De onderkant en rechts zijn paars (kleur #800080).
Door het omwisselen van de kleuren in bordercolorlight en bordercolordark, en door het weglaten van bgcolor in <td> krijg je:
| Beter goed gegraaid dan slecht gekopieerd.... |
Merk op dat de buitenrand van het bovenste kader lichtgeel is. Dat is dezelfde kleur als hierboven. De kleur van de rand regel je met bgcolor in de <table>-tag.
Je kunt ook nog het een-en-ander regelen met de andere attributen van de <table>-tag:
- border (breedte van de rand om de table (grijs/paars), in beeldpunten (pixels))
- cellspacing (breedte van de rand rond de cel (geel), in pixels)
- cellpadding (breedte van de rand rond de inhoud van de cel)
| Beter goed gegraaid dan slecht gekopieerd.... |
Kies border, cellspacingen cellpadding niet alledrie gelijk aan nul want dan zie je geen rand meer.
Maar: Een tekst in een vak zònder randen maak je bijvoorbeeld als volgt:
<table border="0" cellspacing="15" cellpadding="0" align="center" bgcolor="#FFFFD8"><tr><td>
Beter goed gegraaid dan slecht gekopieerd....
</td></tr></table>
| Beter goed gegraaid dan slecht gekopieerd.... |
De tabellen zijn steeds in het midden van de regel uitgelijnd met behulp van het attribuut align="center". In plaats van "center" kun je ook "left" of "right" proberen. Dat leidt soms tot merkwaardige resultaten, zie het effect van onderstaande code, dat fout gaat in Internet Explorer, maar goed uitpakt in Opera:
<table border="6" cellspacing="0" cellpadding="0" align="right" bordercolor="#FF00FF"><tr><td>
Slecht kopiëren leidt tot magere resultaten.
</td></tr></table>
| Slecht kopiëren leidt tot magere resultaten. |
Opmerking:
Het is niet mogelijk om browser-afhankelijkheden uit te sluiten als je alleen de tabel-attributen uit HTML 4
gebruikt. De verschillende browsers die er zijn gaan verschillend om met de kleur-attributen. Zo hoort de melding
"Slecht kopiëren leidt tot magere resultaten" hierboven in een 'plat' kader te staan,
zonder reliëf. FireFox doet dat niet goed.
Als je dit wilt gebruiken is het aan te raden om goed te testen hoe de verschillende browsers zich gedragen.
De moraal van dit verhaal: Het een kwestie van een beetje spelen en testen met verschillende browsers om tot een goed resultaat te komen.
