Hallo, daar ben ik weer weer! Welkom terug bij de serie cursussen over het gebruik van HTML. Deze keer ga ik je vertellen hoe je de "finishing touch" op je homepage kunt aanbrengen met behulp van tabellen.
Mischien vraag je je af wat je met tabellen moet. Als je niet beter weet dan dat een tabel zoiets is als dit, dan moet je je maar eens proberen voor te stellen hoe die flitsend uitziende pagina's zoals deze gemaakt worden!
Juist, dit soort pagina's worden gemaakt met tabellen. Geloof je het niet? Hier is dezelfde pagina, maar dan met een egale achtergrond en de kaders zichtbaar.
Het hele tabellenverhaal bestaat in pincipe uit niet meer dan drie tags...
Resumerend: Een tabel bestaat uit rijen die op hun beurt weer bestaan uit cellen.
Dit | ||||
<--Dit--- | ----is---- | -----een---- | ---tabel-- | ----rij--> |
een | cel | |||
kolom | cel |
Dit was tabellen in een notedop. We zij nu zover dat we eens een paar tabellen kunnen gaan maken! We gaan er hierbij van uit dat je wel wat weet van HTML. Zo niet, doe dan eerst de cursus 'HTML voor beginners'!
We zullen maar direct gaan beginnen. Zoals in de andere cursussen gebruiken we ook deze keer Kladblok om de code in te typen. Start Kladblok dus op. Zet, met kopieer-en-plak, het volgende code in je kladblok (een standaard HTML-pagina):
</body>
</html>
Sla het bestand op als table1.html in een nieuwe map. Start nu ook je browser (zonder Klablok te sluiten). Je kunt nu je html-documenten bewerken en, na het opslaan, direct bekijken door in je browser op de refresh-knop te klikken.
In het vervolg zet ik weer alleen neer wat er tussen de table-tags gebeurt. De rest zul je er telkens zelf weer bij moeten denken.
Zet nu de table-tags er in. Je zegt nu niets meer dan :"hier begint een tabel en hier eindigt diezelfde tabel".
Elke tabel heeft minimaal één rij nodig. Een rij begint en eindigt met een tr-tag (tr = table row = tabelrij).
</body>
En natuurlijk heeft elke rij minimaal één cel. Een cel begint en eindigt met een td-tag (td = table data = tabel gegevens).
</body>
Om de zaak wat overzichtelijker te houden schrijf ik van nu af aan alleen nog maar wat tussen de table-tags staat. Onnodig te zeggen dat de rest natuurlijk wel in je document moet blijven staan.
Nu moet je iets in die cel zetten.
|
Je hebt nu een volledig functionerende tabel gemaakt. Sla de pagina op en bekijk hem in je browser. Het resultaat is niet spectaculaair, hè?
Maar schrik niet en geef jezelf een schouderklopje.Hoewel je het niet kunt zien, heb je zojuist je eerste echte tabel gemaakt!
Wat je net in je browser zag leek nog niet op een tabel. We zullen er eens een kader omheen zetten om je te laten zien dat het wel degelijk een tabel is. Daarvoor voegen we de optie border="1" aan de table-tag toe.
|
Als je de pagina nu opslaat en in de browser het resultaat bekijkt, dan zie je een tabel met één cel.
Ik neem aan dat je begrepen hebt dat de standaardwaarde voor deze optie border="0" is.
Wat dacht je van een iets groter kader?
|
Of een enorm kader?
|
Wanneer je geen afmetingen opgeeft wordt de tabel zo groot als nodig is.
|
Het is niet zo moeilijk om afmetingen te manipuleren. We kunnen de optie width aan de table-tag toevoegen. De breedte kan opgegeven worden in procenten of in pixels.
|
Om het verschiltussen procenten en pixeld voor de optie breedte duidelijk te maken gebruiken we de volgende code:
|
De table-tag kent nog een derde optie: height. Daarmee kunnen we de hoogte van een tabel regelen. Ook hier kan de hoogte weer opgegeven worden in procenten of in pixels.
|