7.3: Tabellen deel 3
Met de gegevens uit de vorige twee lessen ben je natuurlijk al in staat prachtige tabellen te maken. In deze les gaan we wat dieper in op de vormgeving van de tabel.
Zoals je waarschijnlijk al opgemerkt hebt staat de inhoud van een cel vrij dicht tegen de celwand (border) aan. Dit kun je voorkomen door aan het <td> element het attribuut style="padding: npx" toe te voegen. Voor n vul je een waarde in pixels in. De standaardwaarde (dus als je deze optie niet gebruikt) is 1.
De celwanden zelf kun je overigens ook in dikte variëren. Gebruik dan het attribuut style="border-width: npx" in de <table> of in elke <td>.
De inhoud van een cel, dit kan zowel een tekst als een afbeelding zijn, kun je horizontaal uitlijnen. Hiervoor kun je aan de elementen <td> en <th> de optie style="text-align: left", style="text-align: right" of style="text-align: center" toevoegen. Left is overigens de standaardwaarde.
Ook verticaal kun je uitlijnen: style="vertical-align: top", style="vertical-align: bottom" of style="vertical-align: middle" waarbij die laatste de standaardwaarde is.
Tot nog toe zal onze tabel zo groot worden als nodig is om de inhoud te kunnen weergeven. We kunnen de afmeting van een tabel echter vastleggen. Dat kan in pixels, maar ook in procenten ten opzichte van het totale beeldvenster.
Voor de breedte voeg je aan het <table> element het attribuut style="width: npx;"toe, waarbij de n uiteraard staat voor het aantal pixels. Bedenk hierbij wel dat als je een afmeting opgeeft die groter is dan de breedte van het scherm waarop de pagina bekeken wordt, een en ander niet meer zal passen.
Voor de hoogte gebruik je, je raadt het al, gebruik je het attribuut style="height: npx".
Zoals je zult merken zal de browser zelf de afmetingen van de cellen bepalen afhankelijk van de inhoud (zie de inhoud van cel 9 uit tabellen (deel 1)). Maar met de attributen style="width: npx" en style="height: npx" toegevoegd aan de elementen <td> en <th> kunnen we ook dit een beetje sturen. Let er wel op dat je per kolom maar één keer de optie width gebruikt en per rij maar één keer de optie height.
In plaats van in pixels kun je, zoals gezegd, ook de afmetingen in procenten opgeven. Gebruik dan style="width: n%;" en style="height: n%;". Wellicht overbodig op te merken dat alle cellen in een kolom of rij samen natuurlijk 100% dienen te zijn.
Tekst die niet op een regel binnen de cel past zal normaliter netjes worden afgebroken om vervolgens op een volgende regel verder te gaan (wordwrap).
Opdracht 20: Tabellen deel 3
- Open het bestand tabellen.html dat je in de vorige twee lessen al gemaakt en bewerkt hebt
- Maak in deze pagina weer een nieuwe tabel met de onderstaande vulling.
- De tabel is 500px breed
- De buitenrand van de tabel is 2px breed
- Er is een colspan aanwezig in de tabel
- De cellen in de rij met de klassen is steeds verschillend verticaal uitgelijnd
- De rij van de maandag 1e lesuur heeft een padding van 25px
- kolommen met data zijn v.l.n.r. steeds verschillend horizontaal uitgelijnd
Experimenteer in je tabel met padding, border-width, text-align, vertical-align, width en height.