 |
| ~HTML basic |
| ~Wat is html ? |
|
| ~Over tags |
 |
| ~Stijl tags |
|
| ~Plaatsings tags |
|
| ~Letter tags |
|
| ~Kleuren tags |
| ~Links |
| ~Plaatjes |
|
| ~Tabellen |
| ~En
verder |
|
| ~Forum |
|
| ~Downloads |
|
| ~Links |
|
| ~Referenties |
|
| ~Disclaimer |
|
| ~Feedback |
|
Les 9 : Tabellen
Ik zal je nu wat basis informatie geven over hoe je met tabellen kunt gaan werken. Met tabellen kun je veel kanten uit, maar daar kom je wel achter als je met een html-editor aan de slag gaat. Daarvoor is het echter wel nodig dat je wat basiskennis hebt. Dus daar gaan we dan :
De tag voor een tabel is <TABLE>. Deze tag moet gesloten worden door </TABLE>.
Verder moet je wel eerst het aantal rijen en het aantal kolommen aangeven. Dit doe je op de zelfde manier als je leest. Van links naar rechts, van boven naar beneden.
We openen dus de eerste rij d.m.v. de <TR> tag. Voor elke kolom in deze rij openen en sluiten we de <TD> tag. Vervolgens sluiten we de rij met </TR> om aan de volgende rij te beginnen.
Hmm.... lees het bovenstaande nog maar een keertje, dan gaan we daarna verder met een voorbeeldje.
Ok, bij deze het voorbeeldje :
|
<HTML> <HEAD> <TITLE>Mijn eerste pagina</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <TABLE> <TR> <TD>Eerste rij, eerste kolom.</TD> <TD>Eerste rij, tweede kolom</TD> <TD>Eerste rij, derde kolom</TD> </TR> <TR> <TD>Tweede rij, eerste kolom</TD> <TD>Tweede rij, tweede kolom</TD> <TD>Tweede rij, derde kolom</TD> </TR> </TABLE> </BODY> </HTML> |
Als je het bovenstaande in je browser bekijkt, zie je niet ( sommige browsers wel ) veel van de tabel zelf. Dat komt doordat de je niet hebt aangegeven hoe dik de lijnen in de tabel moeten zijn. Wil je dat de lijnen wél te zien zijn, dan moet je de <TABLE> tag als volgt aanpassen :
<TABLE BORDER="dikte">
Voor dikte vul je vervolgens de dikte van de lijnen in. Probeer maar wat diktes uit. Bij dikte "0" zijn de lijnen onzichtbaar, verder geldt dat hoe hoger het getal dat je invult, hoe dikker de lijnen worden.
De grootte van de tabel en de cellen afzonderlijk kun je op 2 manieren aangeven ;
1. Je geeft alléén de grootte van de tabel aan. De cellen zullen zelf opgedeeld worden, en zullen allen even groot zijn. Dit kun je doen door de opdrachten WIDTH="tabelbreedte" en HEIGHT="tabelhoogte" in de <TABLE> tag op te nemen. De <TABLE> tag komt er dan als voplgt uit te zien :
<TABLE BORDER="2" WIDTH="tabelbreedte" HEIGHT="tabelhoogte">
Even een voorbeeldje van een tabel van 2 bij 2.
|
<HTML> <HEAD> <TITLE>Mijn eerste pagina</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <TABLE BORDER="2" WIDTH="200" HEIGHT="100"> <TR> <TD>1 - 1</TD> <TD>1 - 2</TD> </TR> <TR> <TD>2 - 1</TD> <TD>2 - 2</TD> </TR> </TABLE> </BODY> </HTML> |
2. Je geeft alléén de afmetingen van de cellen aan. Dus geen afmetingen voor de tabel zelf. Dit kun je doen door in elke <TD> tag de opdrachte WIDTH en HEIGHT aan te geven. Even een voorbeeldje van een tabel van 2 bij 2.
|
<HTML> <HEAD> <TITLE>Mijn eerste pagina</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <TABLE BORDER="2"> <TR> <TD WIDTH="50" HEIGHT="10">1 - 1</TD> <TD WIDTH="150" HEIGHT="10">1 - 2</TD> </TR> <TR> <TD WIDTH="50" HEIGHT="90">2 - 1</TD> <TD WIDTH="150" HEIGHT="90">2 - 2</TD> </TR> </TABLE> </BODY> </HTML> |
Door de opdracht CELLSPACING="getal" aan de <TABLE> tag toe te voegen, kun je de ruimte tussen de cellen onderling aan geven.
<TABLE BORDER="2" WIDTH="200" HEIGHT="100" CELLSPACING="20">
| CELLSPACING | is |
| hier | 0 |
| CELLSPACING | is |
| hier | 20 |
Door de opdracht CELLPADDING="getal" aan de <TABLE> tag toe te voegen, kun je de ruimte tussen de tekst die in de cel staat en de celwand aan geven.
| CELLPADDING | is |
| hier | 0 |
| CELLPADDING | is |
| hier | 2 |
Wil je je tabel een beetje opvrolijken door hem een kleurtje te geven dan kan dat op 2 manieren. Je kunt namelijk de lijnen van de tabel, de borders, kleuren, maar ook de achtergrond van de cellen.
Cellen
Om alle cellen dezelfde achtergrondkleur te geven dien je dit te vermelden in je <TABLE> tag. Je dient daar bgcolor="kleur" in te zetten. Laten we nu een eerder gebruikte <TABLE> tag gaan gebruiken om dit te bewijzen.
<TABLE BORDER="2" WIDTH="200" HEIGHT="100" CELLSPACING="20" BGCOLOR="#99CCFF">
Deze <TABLE> tag geeft dus naast de borderdikte en verschillende afmetingen van de tabel, ook aan dat de tabel een achtergrondkleur moet krijgen. Probeer het maar.
Om slechts één specifieke cel een kleurtje te geven, dien je de bgcolor="kleur" in de <TD> tag van die cel te zetten.
Borders
Wat de kleuren van de borders betreft het volgende ; De kleuren van de worden gekenmerkt door een soort schaduw idee. De zon komt van linksboven. Dat wil zeggen dat de bovenste lijnen en de linkerlijnen lichte borders zijn. De rechterlijnen en de onderlijnen zijn donker door de schaduw. Dit viel je misschien al op toen je de borders dikker maakte. De lichte borders zijn standaard lichtgrijs, de donkere borders zijn standaard donkergrijs.
Wil je nu alle borders van de hele tabel één kleurtje geven dan kan dat door het volgende in de <TABLE> tag te zetten : BORDERCOLOR="kleur". De hierboven al gebruikte <TABLE> tag gaat er dan dus als volgt uitzien :
<TABLE BORDER="2" WIDTH="200" HEIGHT="100" CELLSPACING="20" BGCOLOR="#99CCFF" BORDERCOLOR="#99CCFF">
Maar zoals eerder gezegd kun je de borders ook onderscheiden op het schaduweffect. Je kan dan door in plaats van de opdracht BORDERCOLOR="kleur" 2 opdrachte toevoegen, namelijk BORDERCOLORLIGHT="kleur" BORDERCOLORDARK="kleur". Zo geef je dus een aparte kleur voor de lichte en de donkere borders, om zo eenvoudig een schaduw effect te creëren.
<TABLE BORDER="2" WIDTH="200" HEIGHT="100" CELLSPACING="20" BGCOLOR="#99CCFF" BORDERCOLORLIGHT="# 3366FF" BORDERCOLORDARK="#3300CC">
Net als bij de achtergrondkleur, kun je naast de borders van de hele tabel, ook de borders van de cellen afzonderlijk een kleur toekennen. De kleur van de borders van de cellen afzonderlijk kun je ook weer verdelen in : de gehele cel, de lichte borders en de donkere borders. Dit kun je doen door de opdrachten die voor de gehele tabel gelden, die je in de <TABLE> tag moest zetten, nu in de <TD> tag te zetten.
Probeer hier zelf maar wat mee te doen...zal wel lukken....
rijen
die horizontale balken...
kolommen
die verticale balken...