Tables

Deze les gaat over het maken van tabellen. Tabellen zijn zeer makkelijk voor de lay-out van je website. Ik raad iedereen aan om deze les twee keer te lezen want het kan onduidelijk overkomen. Dit is niet de bedoeling, maar ik kan het niet beter uitleggen! Na twee keer lezen is het makkelijk te begrijpen. (Je zult het even door moeten hebben maar als je dit onderdeel eenmaal door hebt zal dit je zeer veel helpen bij het bouwen van jouw pagina's)

Ik gebruik heel veel tabellen. Gewoon omdat ze voor de lay-out heel makkelijk zijn. Denk er wel aan dat je de border op 0 zet want als ik de borders aanzet dan lijkt de website nergens meer op. Bekijk de bron maar eens van deze pagina. Het menu hier links staat in een tabel van 20% en het tekstvlak in een tabel van 80%. Zo weet ik zeker dat de tekst nooit breder word maar altijd afgekapt word! Zeer handig dus. We beginnen met het maken van een tabel (engels = table). Zie hieronder:

Hierboven zie je 2 tables. De grote is 80% van de 80% van de 75% van de hele pagina. Dit vraagt om een uitleg!
De hele website zit in een table van 750pix (dit zodat mensen met een 15" beeldscherm de website ook goed kunnen bekijken!)
Daarbinnen is dit tekstvlak weer 80% (andere 20% is het menu)
Binnen die 80% zit de grote table ook van 80% (linker helft is 55% en de rechter helft is 45%) Samen 100% van de 80% van de bovenstaande tabel!!
Binnen de rechterhelft van die tabel zit een klein tabelletje met 4 gedeelten. Deze is weer 60% van de 45% van de table eromheen.
Veel maatwerk dus op deze website. Maar als je het eenmaal goed door hebt van de tables dan vergeet je het nooit meer en zul je ze vaak gebruiken omdat het gewoon zeer makkelijk werkt.
Gebruik je: <caption>titel table</caption> dan wordt de tabel titel recht boven de table gebruikt. Die code wel na de <table> code gebruiken!
Borders van de tables:

Zoals je ziet kunnen kun je de borders gemakkelijk wijzigen. Maar er zijn nog meer functies voor de borders:

De sluiting van de tags </td> en </tr> is in HTML 4 niet meer verplicht! Ik raad je wel aan om de vlakken gewoon te sluiten. Het is nooit verkeerd om dit te doen plus zo leer je jezelf aan om alles te sluiten! Wat ik hier ook gedaan heb. Dat werkt het makkelijkst en het simpelst.
Als het goed is is je nu opgevallen dat:

• Een <td> voor de breedte zorgt. Een nieuwe <td> zorgt voor een nieuw vlak in de tabel.
• Een <tr> voor de hoogte zorgt. Met één <tr> geef je aan dat de tabel één hoog moet worden. Dus 3 keer <tr> openen en sluiten is 3 hoog. Dus ruimte voor 3 rijen in de table.
• <th> kun je gebruiken in plaats van <td> geeft een kop aan. De kop wordt dan dikgedrukt weergegeven.
• Een spatie in een leeg vlak zetten heeft wel nut. Zonder spatie wordt dat vlak niet weergegeven maar loopt de border van je tabel wel door.
• Je kunt de hoogte en breedte van een tabel met pixels en procenten aangeven.
• Een <caption> zorgt voor een titel boven de tabel.
• Een veld in een tabel niet gesloten hoeft te worden.

En als je nou zoiets wil maken als dit:

Gebruik dan deze tags:

• <th colspan="2">Breedte</th> Dit geeft aan dat één vlak in de breedte gelijk is aan twee vlakken in de breedte (onder of boven maakt niet uit!), zoals hierboven bij de 2.
• <th rowspan="2">Hoogte</th> Dit geeft aan dat één vlak in de hoogte gelijk is aan twee vlakken er naast in de hoogte.

Van beide een voorbeeld: