Zelf een website maken
HTML tabellen
Hieronder zie je een HTML pagina met tussen de <body> tags een HTML tabel.
<html>
<head>
<title>Een HTML tabel</title>
</head>
<body>
Dit is een tabel
<table border="1" >
<tr>
<td>
Cel 1
</td>
<td>
Cel 2
</td>
<td>
Cel 3
</td>
</tr>
</table>
</body>
</html>
- De <table> en </table> tag beginnen en eindigen de tabel.
- De <tr> en </tr> definiëren een rij in de tabel.
- De <td> en </td> tags definiëren cellen binnen de rij.
- De tekst Cel 1 wordt weergegeven in de eerste cel, Cel 2 in de tweede...
TIP: Open een tekstbestand (Notepad bijvoorbeeld, geen Word!) en copy-paste de bovenstaande code in het tekst bestand. Sla het op als hoera.html (of watjemaarwilt.html) en open het bestand in je browser door erop te dubbelklikken.
 |
Geavanceerde HTML tabel met attributen
Zie daar, een tabel met daarboven de tekst "Dit is een tabel". Je ziet dat de tabel automtisch op een nieuwe regel wordt gezet. In de bovenstaande HTML code heeft de <table> tag een attribuut, namelijk het border attribuut. Deze staat op 1 en daarom zie je een rand om de tabel cellen. Veel HTML tags hebben attributen waarmee je het uiterlijk van hetgene wat tussen de tags staat verder kan sturen. Voor de <table> tag heb je een aantal attributen. Ik introduceer er een paar in de volgende geavanceerde tabel.
<html>
<head>
<title>Een HTML tabel</title>
</head>
<body>
<table border="0" bgcolor="gray" cellspacing="2" cellpadding="3">
<tr bgcolor="white">
<td>
Rij 1 / Cel 1
</td>
<td>
Rij 1 / Cel 2
</td>
</tr>
<tr bgcolor="red">
<td>
Rij 2 / Cel 1
</td>
<td>
Rij 2 / Cel 2
</td>
</tr>
<tr bgcolor="blue">
<td colspan="2">
Deze cel overspant twee kolommen
</td>
</tr>
</table>
</body>
</html>
Het resultaat van bovenstaande code is een tabel met 3 rijen. De eerste twee rijen bevatten elk twee cellen die daarom ook boven elkaar uitgelijnd zijn in twee 'kolommen'. De onderste rij is een ander verhaal. Die bevat maar 1 cel, maar die cel overspant 2 kolommen. In de code zie je dat er in de laatste rij <tr></tr> dan ook maar één <td>cel</td> zit. Deze enkele cel heeft het colspan attribuut op 2 staan, zodat-ie 2 kolommen overspant.
Er is gebruik gemaakt van een alternatieve manier om borders te maken. De achtergrondkleur van de <table> als geheel staat op grijs (bgcolor="gray"). Daarnaast staat de cellspacing op 2 (pixels). Je ziet dat alle rijen individueel een achtergrondkleur hebben (<tr bgcolor="red">). De achtergrondkleur van de rijen dekt de achtergrondkleur van de hele tabel af, behalve op de 2 pixels cellspacing die in de <table> tag opgegeven is. Hierdoor ontstaat een grijze rand van 2 pixels breed. De cellpadding tenslotte geeft de afstand aan tussen de tekst in een cel en de buitenrand van de cel. Zet je de cellpadding hoger, dan wordt de ruimte om de tekst heen groter.
Tot zover de introductie in tabellen. Op de volgende pagina's bespreek ik nog een paar ander tags die belangrijk zijn bij het (zelf) bouwen van een website en voor het begrijpen van het template.