weballey logo
left Tables - navbar backnext right
homesearchsite mape-mail
< navbar >
quick recap



a navigation bar
    Tables can be used to construct all kinds of wonderful things. Take this navigation bar for instance. I used a rollover javascript, to alter the images when the mouse is over them. This construction is practically impossible without the use of a table. The buttons need to be separate images. If you would use plain html without a table, all images would end up next to each other or at best below each other.

splitting image
    This navigation bar at first glance appears to be a unity, a single image. But you know it cannot be, since the images must be separate for the javascript to work. So the image must be split up into smaller parts. One for the logo, five buttons, the left rim, the right rim, and the bottom. When the cellspacing is set to one you can see how this table is setup.

the setup
    Can you tell how it is done? Try to imagine, before reading on. You need to use a lot of attributes to harness this one. The table border is off, the cell spacing and padding are set to zero. The top row needs to span three colums, as does the bottom. The left and right rims span five rows. Examine the source of this page to see the html used (right-click, view source). But don't get lost!
    If you like this kind of thing and want to explore it further, you'll derive much benefit from a special purpose editor. It can be a lot of work to chop up the image into the exactly right pieces. You might want to give Shoestring's Picture Dicer a try. This one does the chopping for you. You can also add some the JavaScript effect in one go.

snake in the grass
    There is still a snake in the grass to be caught. Some browsers have the nasty trait of adding space around an image in a table cell. When you code your html neatly, each tag on a line, there is a "hard line break" between two tags. This break is often displayed as a "space" character.
    To prevent this from happening both the TD tags need to be directly next to the image, without a line break or a space. This will make your code less attractive, less readable. But at least your page will look the way you set out to do. Have a look at the two sets of blue-orange squares. The html used is exactly the same, apart from the line breaks.

goto top  
leftCopyright © Gerben Hoekstra - All rights reserved backnext right