Tables have been around since the early days of HTML. Their main purpose has been to organize a page's content. As the browsers have become more capable, tables have been found to have many uses. Web designers experiment with tables everyday to find new and unusual ways to use them. This page shows some of the ways tables are used to resolve many of the designers goals
| TEXT Using nonbreaking space | ||
TEXT  Using a transparent gif |
||
TEXT
|
The use of nested table is only limited by your imagination. When you get stuck on your page layout, think of how you might use a nested table to solve your problem.
There is a couple of drawbacks with nested tables. First is that tables take awhile for the browser to render. Nested tables can greatly slow down the speed of your page download. Some browsers have trouble with nested tables. They can cause browsers to crash. This is not often the case, but can be of some concern.
Colour is a great way to organize your content. You can use colour to separate your headings, large content areas and content within other content. An excellent example of this can be seen at the East Bay Diabetic Foundation web site. Just make sure you do not overdo your colour to the point it inhibits clarity.
You can use tables to put large images on your pages and keep the file size manageable. This is done by breaking an image into small pieces and loading the pieces into table cells. You can see an example of this here.
Suppose you had a large graphic of which you only wanted a small part of it to animate. There is no way you could do this without a monstrous download unless you broke up the image into small pieces. You can use the technique from the section on Tables and Images to make a small animation and load it separately into your graphic. Take a look at this example to see how it is done.
With the new browsers, you can use and image for the table background. This lets the designer work with what is close to layers. Dynamic HTML can do this as well, but with the use of tables it is much less complex. All you have to do is set an animation as the table background, then load another animation with a transparent background into one of the table cells. Making the animations is not so easy a task, but the using the tables to make them work is very simple. Take a look at this example.
If you have any questions about how to make a table work for your purpose, send Power Verbs an e-mail. Also, if you have any cool uses of tables that have not been included here, let us know. We are always happy to hear your ideas.