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

Author: Angela C. Buraglia
Author's Email:angela@dwfaq.com

Introduction

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
URL: http://www.fourlevel.com/dreamweaver/layoutview/

The Download

Download the HTML files used in this tutorial to follow along.

The Steps

Step 1

Draw a Layout Table. To draw a layout table first select the Draw Table button.

fig. 1: Table drawn 500 pixels wide by 200 pixels high.

Step 2

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 multiple cells.

.
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>&nbsp;</td> Drawn cells are held open by &nbsp;, a non-breaking space. They are not empty cells.

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)!

Step 3

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 Layout view.

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 active cells.

Now you may create active cell(s) or tables in the nested table. That's it, you're done!