Attributes bij Tables

Terug naar Informatiekunde

Attributes bij Tables
Het woord <TABLE> mag je - netals het woord <BODY> - maar een keer gebruiken.
Het woord <TABLE> mag dus maar een keer voorkomen per table. Dat wil zeggen dat het wel twee maal kan voorkomen in een website, maar dan gebruik je dus twee tables onder elkaar.
Achter <TABLE> kun je een heleboel opgeven. Dat zijn attributes, die je ook hebt voor bijvoorbeeld bewegende tekst bij de HTML-code <MARQUEE>

De belangrijkste attributes voor TABLE zijn: (N.B. die voor de TD staan daaronder)

WIDTH="100%" en dat slaat op de breedte (in het voorbeeld 100 procent, dus het hele scherm)
BORDER="1" en dat slaat op de RAND (in het voorbeeld heeft die een DIKTE van 1)
BORDERCOLOR="#FF0000" waarmee de kleur van de rand opgeeft (hier is dat ROOD)
CELLSPACING="3" en dat slaat op de ruimte tussen de cellen (in het voorbeeld is dat 3)
CELLPADDING="2" waarmee je de afstand opgeeft t.o.v. de rand (in het voorbeeld is dat 2)

Een voorbeeld maakt voorgaande misschien duidelijker.
Vervang de HTML-code <TABLE> door een van de volgende HTML-codes:
<TABLE WIDTH="100%">
<TABLE BORDER="1">
<TABLE BORDER="1" CELLPADDING="3">
Dat betekent dat als je ALLE attributes wilt gebruiken, je dus ALLES in een keer moet opgeven. Immers: je mag de HTML-code TABLE maar een keer gebruiken. Je zou dan dus een hele lange zin krijgen met zoiets als:
<TABLE WIDTH="100%" BORDER="1" BORDERCOLOR="#FF0000" CELLSPACING="2" CELLPADDING="3">

De belangrijkste attributes voor de HTML-code TD in een TABLE zijn:

WIDTH="10%" en dat slaat op de breedte van de CEL (in het voorbeeld 10 procent)

BGCOLOR="#FF0000" waarmee je de achtergrondkleur van de CEL opgeeft (hier dus ROOD)

HEIGHT="30" waarmee je de hoogte van de CEL opgeeft (hier dus 30)

VALIGN="TOP" waarmee je de Verticale positie opgeeft van de Top-regel in de CEL (alle tekst in de cellen begint dus gewoon bovenaan in plaats van in het midden

Een simpel voorbeeld staat hierboven.
Het is afkomstig van het dambord waarin de HTML-code <TD WIDTH="10%"> werd gebruikt - dus met attribute WIDTH="10%". Omdat er 10 CELLEN per regel nodig zijn voor het dambord, komt deze HTML-code dus ook 10 maal voor. Elke cel is dus 10 procent van de totale breedte. Kijk naar de Brongegevens met behulp van je rechtermuisknop. Dan zie je HOE dit werd gedaan. Achter 5 HTML-codes werd een bruin plaatje opgegeven en achter de 5 andere een geel plaatje.
Om het dambord te kunnen maken, moet je alles kopieren wat tussen <TR> en </TR> staat. Die kopie zet je direct BOVEN de HTML-code </TABLE> en daarna hoef je alleen nog maar de volgorde te veranderen. Want onder een geel plaatje moet weer een bruine komen en onder een bruin plaatje moet een geel plaatje komen. Het handigste is dan om in de kopie de eerste regel eruit te knippen en die onderaan te plakken. Nu heb je dus TWEE RECORDS (= regels) gemaakt met in totaal 20 CELLEN. Voor een dambord moet je er 10 hebben met in totaal 100 cellen.
DUS vervolgens moet je daarom nog beide regels vier maal kopieren om er 10 te krijgen!