Nesting Tables

Nested tables means placing (nesting) a table within another table. Doing this can give the designer even more control over positioning with a table driven page.

It is done quite easily. Simply insert a table while the cursor is within the cell you would like to place the table.

Here is an example:

Here is the nested table:

The nested table was 1 column and 1 row, and given a border of 5 to distinguish it from the original table.

Before you start going crazy with nested tables, I should warn you that this can slow down your page's load time. Browsers display tables by rendering what is inside before rendering the rest of the table. This means that if you have 5 nested tables within 1 container table, the browser must render everything inside before the container table will displayed. This is especially true with Netscape browsers. It is a good idea to test your designs in both browsers before you publish.

Nesting tables is more of a design tool than anything else. This is what leads us to our final section of the Tables Tutorial: