HTML title

Table That Motion - 2

Making Good Use of Tables

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

Nested Tables

There are hundreds of ways to make use of nested tables. A typical use is with aligning navigation with a strip of background colour. An example of this can be seen at the Lavine and Company site. Here the whole page is laid out inside one big table. The left side has a hard coded table cell width, while the right side is set to cover the remainder of the page. The right side contains nested table to lay out content, images and so forth. This is a very common use of tables. You can also use nested tables to align the content of a cell. Suppose you wanted text that aligned to the left side of a cell with just a word or two to the right side. This can be done by using the dreaded transparent gif, or by nesting a table inside the cell that is aligned to the right. Take a look at this code.

<table align="center" width="90%"
cellspacing="2" cellpadding="2" border="2" frame="box" rules="all" bgcolor="#00ffff">
<td>TEXT     Using nonbreaking space</td>
<td bgcolor="#000080" width="30%"> </td>
<td>TEXT using a transparent gif</td>
<td bgcolor="#000080"> </td>
<td>TEXT<table align="right" cellspacing="0"
cellpadding="0" border="1" frame="box" rules="all">
<td>Using a nested table</td>
<td bgcolor="#000080"> </td>

And here is the table:

TEXT                    Using nonbreaking space  
TEXT Using a transparent gif  
Using a nested table

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.

Tables and Images

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.

Tables and Animation-1

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.

Tables and Animation-2

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.

Close this window to go back to the Power Verb Web Site

Power Verbs