Q. How can I nest tables in Layout View? I try to insert
a nested table but I am unable.
A. You may only nest tables in Layout view if the table
cell is completely empty. Empty cells are indicated in gray and
displayed in the code as <td></td>. Important:
Do not leave any empty table cells. Netscape may have problems rendering
the table properly. For a step by step guide to Nesting Tables in
Layout View see the tutorial below.
Nesting Tables in Layout View
Layout View is new to Dreamweaver 4. You can toggle back and forth
between Standard View and Layout View by using the buttons
at the bottom of the Object Panel. Remember, you can toggle between
views as often as you like. You may also change views from the menu.
For general knowledge about Layout View, check out:
How to Use the Dreamweaver 4 Layout View
by Trent Pastrana
the HTML files used in this tutorial to follow along.
Draw a Layout Table. To draw a layout table first select the Draw
fig. 1: Table drawn 500 pixels wide by 200
Draw your layout cells using the Draw Layout Cell button.
Do not draw cells where you intend to put a nested table. Drawing
cells is very much like using the slice tool in Fireworks. As you
draw each cell the additional cells needed to complete the table
will be automatically added for you.
Tip: Hold the Control key (Ctrl) on PC
(on Macintosh Command key) while clicking and dragging to insert
fig. 2: Table with 2 columns and three rows.
Cells not drawn indicated by gray area.
Pay close attention, this part is very important:
Cells which you have drawn appear white and produce the code: <td> </td>
Drawn cells are held open by ,
space. They are not
Cells which you have not drawn, (cells which Dreamweaver automatically
inserts to complete a table) appear gray and produce the code: <td></td>
There is nothing between the two tags
to hold the cell open. It is a truly empty cell.
Important: Empty (gray) table cells can
cause problems in Netscape and should be completely avoided. To
ensure against this, always add something between the <td></td>.
Something can be a non-breaking space (as shown above), a table,
an image, text you wish to contain in the cell, or whatever else
works for you. Just don't leave it empty (gray)!
You can only add a nested table to a truly empty cell (indicated
by being gray) within Layout View. Click on the Draw Table button.
Draw a table in the gray area as shown below.
Fig. 3a: Table being drawn inside an inactive
(gray) layout cell.
Upon release of the mouse, you will see that Dreamweaver knows to
insert the cells needed to accommodate the new table.
Fig. 3b: Demonstrates a nested table in
Trapping Tables and Removing Nested Tables
Tip: You can trap other tables and/or
cells as shown below. Notice there is a new table added which now
holds the nested table you previously added.
Fig. 4a: Table drawn trapping inactive cells
and a nested table.
Next, add cells to the table as needed.
Fig 4b: Trapping table with drawn cells.
Right now you're probably thinking, "But wait, I don't want
another nested table!" or "I changed my mind, I don't
need another table in there!" Here comes the fun part. Select
the table you just made, then on the Properties Inspector push the
Remove Nesting button.
Like magic, the trapping table disappears!
fig. 4c: Parent table and Nested table with
Now you may create active cell(s) or tables in the nested table.
That's it, you're done!