Creating more complex page layouts using nested tables

When you move on from creating basic pages you'll need to understand how to create those layouts. There is always the Layers option, but they offer some limitations (we'll look at Layers in a future tutorial). The beauty of using nested tables is that they are very browser compatible. Unlike Layers that are only usable on version 5x browsers and above.

If you want an example of nested tables, then simply look at this site (the page you are viewing even), and that uses nested tables quite extensively for the whole layout.

At first, it may seem pretty complex, but once you become accustomed to it and create your main layout pages, you can then assign them to templates and then forget about them.

For this example, we're going to keep things pretty simple. You can make them as complex as you need with just a little time and effort.

Let's start by inserting a simple table and choose the desired options. Use the settings that I've used in figure 1 below.


Figure 1 - Inserted table settings.

These initial settings are not that important, and are purely down to the layout you are trying to achieve. You could use a percentage pr pixel setting for the width of the table. These options will be covered in more detail in the tables tutorial (coming soon).

You'll notice that I'm using a setting of 1 row and 2 columns. The next step is to nest another table into the first cell.

The most important thing here is to ensure that the cursor is place INSIDE the cell you wish to insert the new table.

With your cursor inside the first cell, click insert table again and use the following settings.

Rows: 2
Columns: 1
Width: 100 Percent (NOT pixels)
Border: 0
Cell Padding: Empty
Cell Spacing: Empty

This will give you a nested table like the one displayed in figure 2 (below). This is only the beginning of what you can do with nested tables. You're not limited to simple tables like the one in this exercise. Nor are you limited to only creating percentage tables nested inside another table. You can simply mix and match your options to create very flexible and browser friendly pages.


Figure 2 - Nested table inside the first cell.