3.3 Tables in Layout View

Dreamweaver 4 introduced a new Layout view for working with tables visually, but Layout view is largely unrelated to the traditional use of tables for displaying data in rows and columns. Instead, it uses legacy HTML support for tables to simulate modern page layout capabilities, even in older browsers.

3.3.1 Drawing Tables in Layout View

Enter Layout view using the Layout View button in the Objects panel or by choosing View Table View Layout View. When you first enter Layout view, Dreamweaver displays a Getting Started in Layout View overview in a dialog box. Click the dialog box's Help button to access tutorial information, or use the "Don't Show Me This Message Again" checkbox provided to prevent the dialog box from appearing the next time you enter Layout view.

In Standard view, cells are part of a row or column; in Layout view, however, the individual cells act as arbitrary layout areas. In Standard view, cells are created when you create your table (in just one step, which is easy, but doesn't offer much control). In Layout view, you must create a table manually using the Draw Layout Table tool and then add cells using the Draw Layout Cell tool (requiring multiple steps, but offering more control). The Draw Layout Cell and Draw Layout Table tools in the Objects panel, which are active in Layout view only, are shown in Figure 3-8.

Figure 3-8. Layout table object buttons

Use the Draw Layout Table tool to create a rectangular table by clicking in the Document window and dragging the mouse cursor down and to the right. The table is placed in the upper-left corner of the page by default. To adjust the horizontal alignment of a table use the Property inspector as discussed earlier. A layout table can act as the container for subsequent (nested) tables. Additional layout tables can be added below existing tables. Each layout table is indicated by a green tab in its upper-left corner.

Use the Draw Layout Cell tool to create cells within a table.

Layout tables do not automatically include cells. Cells or nested tables must be added within the unoccupied gray areas using the Draw Layout Cell or Draw Layout Table tools before you can add text or graphics to these areas. To draw multiple layout tables or layout cells without having to reselect the tool each time, hold down the Ctrl key (Windows) or Cmd key (Macintosh) while using the tool.

If you draw a layout cell prior to drawing a layout table, Dreamweaver automatically creates a layout table to enclose it, as shown in Figure 3-9. (In this case, Dreamweaver also adds a proprietary mm:layoutgroup="true" attribute to the <table> tag, which you can safely delete in Code view or by using the Quick Tag Editor.)

Figure 3-9. A single-cell layout table

As seen in Figure 3-10, as you add table cells, a grid is formed. Unoccupied areas remain gray. The width of each column is shown at the top of the table. Click the small arrow next to the column width number to access a pop-up menu that controls cell width.

Figure 3-10. Layout table cells create a grid as they are drawn

If you are accustomed to Standard table-editing mode, the new gestures in Layout view may require some practice. Some hints about layout tables and cells may eliminate any confusion:

• You can't draw tables over existing elements such as text and graphics, so start with a blank page or place the cursor at the end of your current page.

• Tables can't overlap one another, but a table can be nested within an unoccupied gray area of another table. (However, you can't nest a table within an existing white cell.)

• Cells cannot overlap one another, be drawn atop existing content, or be drawn within another cell.

• You can't merge or split cells or directly insert or delete columns in Layout view. Instead, columns and rows are created automatically and deleted as necessary when cell areas are drawn or resized. That is, if you align cells to share a common horizontal or vertical edge, Dreamweaver deletes any rows or columns that are no longer necessary to represent your grid. If cells are not aligned, Dreamweaver creates rows and columns as necessary to position them as directed.

• When cells or tables are selected, they can be resized using the resize handles that appear, but a table cannot be resized to be smaller than the area occupied by layout cells (unoccupied areas are indicated in gray).

• Cells don't need to line up in nice rows and columns. Use cells as arbitrary drawing areas. Dreamweaver automatically creates a grid to accommodate your cells. You can resize individual cells by selecting them and dragging their resize handles, provided that they don't overlap other cells.

• You can't select or set the properties of a complete row or column in Layout view.

• To select a layout cell, position the cursor over its edge until the outline turns red and then click once. The outline of the selected cell should turn blue and resize handles should appear. You can also select a cell using Ctrl-click or Ctrl-A (Windows), or Cmd-Click or Cmd-A (Macintosh).

• To delete a layout cell, select it and then hit the Delete key.

3.3.1.1 Aligning images with a tracing image

Dreamweaver can display a tracing image to assist in laying out a complex page or table (the tracing image appears while working in Dreamweaver, but not within a web browser). Add a tracing image using Modify Page Properties, Ctrl+J (Windows), or Cmd+J (Macintosh). In the Tracing Image field, select the complete image of your web page and then click OK. (Because the tracing image must be a single image, use an image that hasn't already been sliced.)

The tracing image appears behind any content in the Design pane of the Document window. Use the slider in the Page Properties dialog box to control the tracing image's transparency. See Section 13.3.1 in Chapter 13 for an alternative method of creating a complex page layout.

3.3.2 Table and Cell Properties in Layout View

The table and cell formatting options in Layout view differ somewhat from those available in Standard view. The options available in Layout view are explained in Table 3-2 and shown in Figure 3-11. You can also access some of these options from the pop-up menu accessed by clicking the small arrow button next to the column width measurement at the top of each column. You can configure Layout view preferences under Edit Preferences Layout View. The formatting options available in Standard view are explained under Section 3.2.2 earlier in this chapter.

Table 3-2. Properties available in Layout view

Option name	Option description
Width	The Fixed mode sets the column width in pixels. An Autostretch column expands to force the table width to match the browser window's width (only one column can be autostretched).
Height	Sets the table or cell height in pixels. If blank, height is determined automatically by the table or cell contents.
Bg	Sets the table or cell background color.
CellPad	Specifies the margin in pixels (for the entire table) between cell borders and cell contents. The margin is applied on all four sides of all cells. The default is usually nonzero, so set it explicitly to 0 for seamless tables.
CellSpace	Specifies row and column spacing for the entire table. The default is usually nonzero, so set it explicitly to 0 for seamless tables.
Clear Row Height	Clears the height attribute of all table rows (<tr> tags).
Make Cell Widths Consistent	Sets all columns to the width required by their content. For example, a 100-pixel-wide column containing a 150-pixel-wide image would be set to 150 pixels wide.
Remove All Spacers	Removes all spacer images used for autostretching (which may cause unoccupied columns to be deleted).
Remove Nesting	Removes any tables contained within the current cell or table.
Horiz	Sets the horizontal alignment of the contents of a single selected cell (left, right, or center).
Vert	Sets the vertical alignment of the contents of a single selected cell (top, middle, or bottom).
No Wrap	Controls text wrapping within a cell.

Figure 3-11. Property inspector showing table properties in Layout view

3.3.2.1 Autostretch and spacer images

Creating an autostretched column allows the width of your table to resize automatically to fit the user's browser window. If a column is set to Autostretch, its width is indicated by a wavy line (see Figure 3-10).

Only one column in a layout table can be autostretched (setting a column to Autostretch converts any previously autostretched column to a fixed width). Add content to your fixed-width cells before setting a column to Autostretch, or the other table cells will be compressed and difficult to work with.

Dreamweaver uses spacer images (1 x 1 pixel transparent GIF files) in Layout view to maintain column widths. Spacer images are added in the bottom row of fixed-width columns of a table when an Autostretch column is created. The spacer added to each column is resized to the desired width so that each cell in that row maintains the column's width, regardless of the column's other contents. The spacer images prevent the autostretched column from squeezing out other columns.

When you first add an Autostretch column, you will be prompted to select a spacer image file. Either create a new one or choose an existing one (avoid the "Don't Use Spacer Images for Autostretch Tables" option).

Use the Relative To Site Root option when saving your spacer image, or it won't work when uploaded to a server.

Double horizontal lines appear in the column heading for columns containing spacer images (see Figure 3-10). Use the options in Table 3-2 to remove spacer images from one or more columns (typically to start over when working with a table that has gotten out of control).

3.3.3 Creating Nested Tables in Layout View

To create a nested table in Layout view:

You can nest tables within tables several levels deep provided that you draw the new table within the gray area of an existing table. You can also draw layout cells within nested tables or in unoccupied areas adjacent to nested tables.

You cannot draw a layout table within a layout cell. Select and delete the cell if you'd like to nest a table in that area.

3.3.4 Converting Between Tables and Layers

Layers provide an alternative method of laying out elements on a web page. Although web developers traditionally use tables to create documents that will work with a wide range of browsers, modern browsers (NN 4.0 or IE 4.0 or later) support layers. DW4 quickly converts between these two formatting options, using Modify Convert Tables To Layers and Modify Convert Layers to Table.

For example, if you select the table shown in Figure 3-8 and choose Modify Convert Tables to Layers, you will be offered options for converting your table, as shown in Figure 3-12.

Figure 3-12. The Convert Tables to Layers dialog box

Dreamweaver creates layers from only the table cells that contain content (text, images, or a background color or image). The size of the layers created depends on the size of the cell's contents. For example, a cell with a background color applied would have the exact dimensions when rendered as a layer that it had as a table cell; a layer derived from a cell containing text would shrink to the size of the text. You can see these effects in Figure 3-13.

Figure 3-13. Table cells converted to layers

When converting layers to a table using Modify Convert Layers to Tables, the effect is essentially the same. Layers of specific dimensions have those dimensions retained when the layers are converted into a table. The Convert Layers to Table dialog box is shown in Figure 3-14.

Figure 3-14. Layers converted to table cells

You can also convert layers to a table using the File Convert 3.0 Browser Compatible Layers to Table command.