AbleDesign - Tutorials
Web Design Tutorials - Intermediate Design Considerations
Don't be afraid to replace images with colored tables
Designing an effective web site is a constant balancing act between appearance and download time (plus content, of course). At one extreme is the highly graphical site that takes an eternity to download. At the other extreme is the plain white page with nothing but text that downloads instantly but is painfully dull to look at. There is a happy medium between these extremes, but it is often a moving target that requires several techniques to attain.
One very useful technique is to strategically use colored tables in place of images. This can be done as a border color, page background, or in place of clickable buttons. Here is an example:
|
|
The two items above should look identical (different browsers sometimes treat such things "uniquely"). When you hover your mouse over them, you will see which is which. The one on the left is a table, while the one on the right is an image.
Table background colors are supported by the majority of browsers, although there are some inconsistencies on which of the table tags (<table> <tr> <td>) require or support the table tag. Placing the background color declaration in more than one tag can sometimes help alleviate such problems.
Another practical use of tables is described in the image stretching section of the Image File Formats tutorial. While this is not exactly using a table(s) to replace an image, it is using tables and images in conjunction to maximize their effect while minimizing download time. This is the happy medium referred to above.
