Leerdoelen
- begrijpen en maken tabel
- tabellen kunnen nesten
- absolute en relatieve breedte en hoogte instellen van een tabel
- table attributen cellpadding en cellspacing kunnen toepassen
- content en opmaak scheiden mbv. CSS
- opmaak onderbrengen in een extern stylesheet
Lesinhoud
- Tabellen
- Lijsten
- Dom
Tabellen
Wat zijn tabellen?
- Bestaan uit rijen (horizontaal) en kolomen (vertikaal) en cellen.
| Col01 | Col02 | Col03 | |
| Row01 | A1 | A2 | A3 |
| Row02 | B1 | B2 | B3 |
| Row03 | C1 | C2 | C3 |
Waar gebruik je tabellen voor?
- Om bijvoorbeeld statistische gegevens te tonen.
- Maar ook om je elementen (buttons, tekst, afbeeldingen, logo) exact te postioneren.
- Je kunt met tabellen heel goed een 'grid' of ookwel stramien maken.
Syntax
- <table>
- <tr> (table row)
- <td> (table data, kolom)
Voorbeeld
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
Resultaat
| A1 | A2 | A3 |
| B1 | B2 | B3 |
Attributen
<table>
- height (geen officiele W3C standaard)
- width (breedte, zowel relatief als absoluut - procenten of pixels)
- cellpadding (afstand tussen celrand en inhoud)
- cellspacing (afstand tussen cellen)
- border (rand in pixels)
- bgcolor (achtergrond kleur)
- bgcolor (achtergrond kleur)
- align (horizontaal uitlijnen)
- valign (vertikaal uitlijnen)
- bgcolor (achtergrond kleur)
- height (hoogte)
- width (breedte)
- colspan (voeg 2 of meerdere kolomen samen)
- rowspan (voeg 2 of meerdere rijen samen)
- align (horizontaal uitlijnen)
- valign (vertikaal uitlijnen)
Geneste tabellen
Voorbeeld geneste tabellen
| Col01 | Col02 | Col03 | |||||||
| Row01 | A1 | A2 | A3 | ||||||
| Row02 | B1 | B2 | B3 | ||||||
| Row03 | C1 | C2 |
|
Source
<table border="1" width="50%">
<tr>
<td> </td>
<td>Col01</td>
<td>Col02</td>
<td>Col03</td>
</tr>
<tr>
<td>Row01</td>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>Row02</td>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>Row03</td>
<td>C1</td>
<td>C2</td>
<td>
<!-- Begin geneste tabel -->
<table bgcolor="#aaaaaa" border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
<!-- Eind geneste tabel -->
</td>
</tr>
</table>
Lijsten
Lijsten zijn opsommingen al dan niet met een nummer aanduiding. Over het algemeen kunnen ze gebruikt worden waar ze voor bedoeld zijn lijsten in tekst.
Een menu is natuurlijk ook een soort van lijst Alleen wat eenvoudiger vorm gegeven en kortere woorden. Knoppen in een menu zorgen ervoor dat een gebruiker kan navigeren door de site. Een combinatie van links <a>, lijsten en CSS kan voor een eenvoudige oplossing zorgen als het gaat om menuÕs.
Opbouw
De opbouw van lijsten heeft wat weg van tabellen. Aller eerst moet er aangegven wat voor een soort lijst het is. Er zijn twee soorten lijsten georderende (<ol>) en ongeordende (<ul>). Beide tags worden gesloten gebruikt. Binnen de lijst staan de lijst elementen aangegeven met de <li> tag, welke de inhoud omsluit.
Voorbeeld:
<ul>
<li>lijst element 1</li>
<li>lijst element 2</li>
<li>lijst element 3</li>
</ul>
Als de <ul> tag vervangen wordt door de <ol> tag zullen de punten vervangen worden door cijfers.
DOM
Hier moet dan nog tekst toegevoegd over de DOM
Links (handleidingen en tutorials)
Webmonkey - HTML
Goede online tutorial over: HTML Basics, Tables, Frames, Dynamic HTML, CSS.
hotwired.lycos.com/webmonkey/authoring
W3Schools - HTML
Goede online tutorial: geeft een korte en overzichtelijke inleiding in alles wat je moet weten van HTML.
www.w3schools.com/html/default.asp
HTML handleiding
Omvangrijke online tutorial voor het leren van de basics van HTML en CSS. Bevat ook een uitstekende HTML en CSS Reference (tags, attributes en browser compatibility).
www.handleidinghtml.nl
W3C - HTML
HTML Reference van het W3C.
www.w3.org/MarkUp
CWRU - Introduction to HTML
Een HTML tutorial voor beginners. Behandelt oudere versies (2.0, 3.2) van HTML maar is een excellente inleiding om HTML te leren.
www.cwru.edu/help/introHTML