Deze rubriek is geschreven door Kloep!
Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek gaan wij (VWO-er en Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar PHP in combinatie met MySQL. Later zullen we ook steeds meer Javascript bereiken. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd. In deze rubriek maken we gebruik van het programma Notepad++ en Firefox. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!
Welkom bij les nummer 11. We gaan in deze les het onderdeel Tabellen afsluiten.
Ruimte tussen cellen
Het bepalen van de ruimte tussen de cellen doen wij met het element CELLPADDING en CELLSPACING. Hierbij zorgt CELLPADDING voor de ruimte tussen de tekst in een cel en de celrand. CELLSPACING verzorgt de ruimte tussen de celranden. Een voorbeeld van een geldige code vind je hieronder:
<table border="1" cellspacing="3" cellpadding="2">
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 3</td><td>test 3</td></tr></table>
In onderstaande afbeelding zie je het resultaat:
De 3 bij CELLSPACING staat dus voor 3 pixels tussen de cellen. De 2 bij CELLPADDING staat voor 2 pixels tussen de tekst in een cel en de celrand.
Omspannen van kolommen
Eerst zal ik even uitleggen wat het omspannen van een kolom (of een rij in het volgende stukje) inhoud. In sommige gevallen wil je bovenaan je tabel (bijvoorbeeld voor een titel) 1 cel over de hele breedte van je tabel hebben. Soms wil je het ook onderaan hebben (bijvoorbeeld voor een copyright). Misschien wil je het zelfs soms in het midden hebben, alles is mogelijk. Om dit met een kolom te doen, gebruik je COLSPAN. Hieronder een voorbeeldcode:
<table border="1">
<tr><td colspan="2">Titel hier plaatsen</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 3</td><td>test 4</td></tr>
<tr><td colspan="2">Copyright hier plaatsen</td></tr></table>
De 2 die je ziet staan, staat voor het aantal kolommen wat hij moet bezetten. Hieronder de afbeelding waarop te zien is hoe deze code eruit komt:
Omspannen van rijen
Als laatste wat we nu behandelen van de tabellen, lijkt erg veel op bovenstaande. Alleen in plaats van COLSPAN gebruik je ROWSPAN. Je gebruikt het ook andere zaken. Hierbij krijg je namelijk een aantal rijen in één kolom. Dit kun je bijvoorbeeld gebruiken voor een navigatiemenu in je tabel. Hieronder een voorbeeldcode:
<table border="1">
<tr><td rowspan="3">Hier een menu maken</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 3</td><td>test 4</td></tr></table>
In onderstaande afbeelding is hiervan het resultaat te zien:
Je ziet hier dus dat je een mooi menu neer kunt zetten.
En dat was les nummer 11. Volgende keer komt les 12, waarin we gaan beginnen met het maken van lijsten in HTML. Hopelijk tot de volgende keer!
0 reacties
Recommended Comments
Er zijn geen reacties om weer te geven.