Zoals gezegd gaan we nu in praktijk brengen wat we tot nu toe geleerd hebben...
Los van de dingen die ik voorkauw kun je natuurlijk zelf ook wat dingen uitproberen om te zien wat er gebeurt.
Hier is een kleine ongesorteerde lijst:
Ingrediënten voor appeltaartDit is allemaal leuk en aardig, maar wat als we het recept hier willen plaatsen...
|
...omdat we er een plaatje naast willen zetten van een... appeltaart!
|
Om dit te bereiken kunnen we wel een tabel gebruiken, denk je niet?
Als we een tabel maken, zetten we er eerst kaders om. Dan zie je tenminste wat je doet!
|
We gaan dit tabelletje stap voor stap opbouwen. Het is eigenlijk niet zo moeilijk!
Begin met een tabel en zet de ongeordende lijst erin:
|
Weet je nog, als je geen afmeting opgeeft maakt de browser de tabel zo groot als hij zijn moet om de data er in te laten passen.
Vervolgens gaan we de tabel (bijna) zo breed maken als het scherm en voegen we nog een tweede cel toe. De linker cel maken we iets kleiner dan de rechter cel.
|
Als je dat nog niet gedaan hebt, kopieer dan nu even het plaatje van de appeltaart (applepie.gif) naar je werkdirectory.
Zet het nu in de linker cel.
|
We moeten nu alleen nog het plaatje aan de rechterkant van de cel uitlijnen en de kaders uitzetten.
|
Het is weer gelukt!
Kunnen we ook een tabel in een tabel zetten. Gelukkig wel. Je kunt er namelijk heel mooie effecten mee creëren.
We beginnen met een simpele tabel:
|
We kopiëren deze tabel. Vervolgens verwijderen we uit de code de naam Jan en op die plaats plakken we de gekopieerde tabel.
De code ziet er dan zo uit:
|
Het resultaat is een tabel in een tabel!
In les 4 van 'HTML voor beginners' is een imagemap gemaakt. Dat was vrij ingewikkeld. Daarbij werd een plaatje in vieren gesplitst en kon elk deel van dat plaatje als link gebruikt worden. Met behulp van tabellen kunnen we dat resultaat veel simpeler bereiken met behulp van de volgende vier plaatjes: les1.gif, les2.gif, les3.gif en les4.gif
We maken een tabel met vier cellen (twee rijen en twee kolommen) en zetten in elke cel een plaatje:
|
We zetten de cellpadding, de cellspacing en de border van de tabel en de border van de afbeeldingen op nul, voegen de links toe en klaar is Kees!
|
Hier komt een situatie die we met een tabel kunnen oplossen.
Stel dat je een lumineus idee hebt voor een bewegend plaatje (animatad gif). Het probleem is alleen dat je plaatje wat aan de grote kant is. Misschien weet je dat een animated gif uit een serie gif's bestaat die na elkaar worden getoond. Je bestand wordt dus zo groot als de grootte van het plaatje maal het aantal keren dat het na elkaar getoond wordt. De lezers van je homepage zullen niet blij zijn als er ongevraagd 700 kB data door hun telefoonlijn geperst wordt. En dat is nog niet alles; van een plaatje van dat formaat kan de browser het ook behoorlijk moeilijk krijgen, zeker op de wat tragere systemen. De oplossing? Verdeel het plaatje in hapklare brokken en zet ze in een tabel.
Hier is een voorbeeld:
![]() |
![]() |
![]() |
![]() |
||
![]() |
Hier is dezelfde tabel maar nu met de cellspacing aangezet.
![]() |
![]() |
![]() |
![]() |
||
![]() |
Je ziet dat het enige bewegende deel van het plaatje de ogen zijn. Alleen dat kleine stukje hoeft dus meerdere keren getoond te worden om het te laten bewegen. Het zou zonde van de bandbreedte zijn om de rest, die toch hetzelfde blijft, ook steeds opnieuw binnen te halen.
Hier is de html code voor die tabel. De titel tussen de <caption>-tags heb ik er zelf voor de grap bijgezet. Het is natuurlijk niet noodzakelijk en het heeft verder geen effect op de tabel. Je hebt nu wel weer een extra tag geleerd.
Dit is de layout.
draak4.gif |
draak3.gif |
draak5.gif |
ogen.gif | ||
draak2.gif |
Als je het zelf wilt proberen, sla dan eerst de afbeeldingen op in de map waar ook je pagina met de tabel staat!
Na deze cursus 'toveren met TABELLEN' gaan we verder met de cursus 'het gebruik van FRAMES'.
Verder wil ik je wijzen op het tag-overzicht. Dit is een overzicht van alle tags die je in deze cursussen tegenkomt met een link naar de pagina waarin er iets over deze tags verteld wordt.