Navigational Icon Example

Our first set of buttons are created by placing text along with images of an arrow in a table with a wide border. While this does provide the appearance of beveled buttons, the redundant text and image links do not look good in all browsers. It is especially ugly in line-mode browsers where it looks like there are double links to each location.

Home

Next

Our second example uses images in which the text has been merged into the image. This allows a single link for each "button".

Note that if you use a white background (as we do for this document), tables with wide borders tend to look washed-out in some browsers on some platforms (how's that for a qualified warning?). If you wish to use a white background, it would probably be better to make images of beveled buttons rather than trying for the effect with tables. Also keep in mind that many browsers do not support varying border widths, so the effect of beveled buttons is lost in those browsers.