weballey logo
 
left Tables - navbar backnext right
homesearchsite mape-mail
intro
uitbreiding
afmetingen
kleuren
randen
uitlijnen
nesten
< navbar >
samenvatting
tags
slot
 
home
home
home
home
home
home

<TD>
image
</TD>

<TD>image</TD>

Een navigatiestrook
    Tabellen kunnen worden gebruikt voor allerlei leuke dingen. Neem nu deze navigatiestrook. Ik heb een rollover javascript gebruikt, om de plaatjes te veranderen wanneer je er met je muis overheen gaat. Deze constructie is vrijwel onmogelijk zonder het gebruik van een tabel. De buttons moeten namelijk aparte plaatjes zijn. Als je standaard html zou gebruiken zonder tabel, zouden alle plaatjes naast elkaar komen te staan. Of op zijn best onder elkaar.

Afbeeldingen splitsen
    Deze navigatiestrook lijkt op het eerste gezicht een eenheid te zijn, een enkele afbeelding. Maar je weet dat dat niet het geval is, omdat je aparte plaatjes nodig hebt om het javascript te laten werken. Dus moet de afbeelding opgesplitst worden in kleinere gedeelten. Een voor het logo, vijf voor de knoppen. Een voor de linkerrand, de rechterrand, en het onderste gedeelte. Als ik de CELLPADDING verander, kun je precies zien hoe de tabel is opgebouwd.

De opzet
    Kun je vertellen hoe dit gedaan is? Probeer het je voor te stellen, eer je verder leest. Je hebt heel wat attributen nodig, om dit voorelkaar te krijgen. De tabelrand is uit (BORDER), CELLSPACING en CELLPADDING staan op nul. De bovenste cel overspant drie kolommen (COLSPAN), evenals de onderste. De linker en rechterrand overspannen vijf rijen (ROWSPAN). Bekijk de broncode van deze pagina om de html te bestuderen. Maar verdwaal niet!
    Als je dit soort dingen leuk vindt en er verder mee wilt, heb je veel baat bij een speciale editor hiervoor. Het is vrij veel werk de plaatjes precies goed te verdelen, en het bijbehorende javascript te schrijven. Probeer het eens met Shoestring's Picture Dicer. Deze editor doet het knippen voor je. Je kunt in een moeite door het javascript toevoegen.

Addertje onder het gras.
    Er zit nog een addertje onder het gras. Sommige browsers hebben de vervelende gewoonte ruimte toe te voegen naast een afbeelding in een tabelcel. Als je netjes codeert, met elke tag op een aparte regel, heb je een line break tussen twee tags. Deze wordt vaak weergegeven als een spatie.
    Om dit tegen te gaan, moeten beide TD tags direct naast de afbeelding staan, zonder spatie of line break ertussen. Je code ziet er wat minder netjes uit, minder goed leesbaar. Maar dan ziet je pagina er in ieder geval wel zo uit als je bedoelde. Kijk eens naar de twee sets blauw en oranje vierkanten. De html is exact hetzelfde, op de line breaks na.

goto top  
leftCopyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right