Adobe 38040334 - Dreamweaver CS3 User Manual page 199

You can lay out your page using several layout cells within one layout table, which is the most common approach to
web-page layout, or you can use multiple, separate layout tables for more complex layouts. Using multiple layout
tables isolates sections of your layout, so that they aren't affected by changes in other sections.
You can also nest layout tables, by placing a new layout table inside an existing layout table. This structure enables
you to simplify the table structure when the rows or column in one part of the layout don't line up with the rows or
columns in another part of the layout. For example, using nested layout tables you could easily create a two-column
layout with four rows in the left column and three rows in the right column.
Note: As an alternative to using tables in Standard or Layout mode, you can use CSS positioning to lay out pages.
See also
"Presenting content with tables" on page 176
"Laying out pages with CSS" on page 145
Viewing table and cell widths in Layout mode
The widths of layout tables and cells (in pixels, or as a percentage of the page width) appear at the top or bottom of
the table when the table is selected or when the insertion point is in the table. Beside the widths are arrows for the
table header menu and the column header menus. Use the menus for quick access to some common commands.
Note: To disable column widths, along with table tabs and header menus, you must disable all visual aids (View > Visual
Aids > Hide All).
Sometimes, the width might not appear for a column; you might see any of the following:
•
No width. If you do not see a width for the table or for a column, then that table or column does not have a
specified width in the HTML code.
•
Two numbers. If two numbers appear, then the visual width as it appears in Design view doesn't match the width
specified in the HTML code. This can happen when you resize a table by dragging its lower-right corner or when
you add content to a cell that's larger than its set width.
For example, if you set a column's width to 200 pixels, then add content that stretches the width to 250 pixels, two
numbers appear at the top of that column: 200 (the width specified in the code) and in parentheses (250) (the visual
width of the column as it's rendered on your screen).
•
Wavy line. A wavy line appears for columns that are set to autostretch.
• Double bars. Columns that contain spacer images have double bars around the column width.
Layout table and cells grid lines
When you draw a layout cell in a layout table, a light grid of lines appears, extending from the edges of any new layout
cell out to the edges of the layout table that contains it. These lines help you align new cells with old cells, and help
you visualize the underlying HTML table's structure. The Dreamweaver grid is set and doesn't change based on the
placement of cells, so you can use it to lay out your page.
Dreamweaver automatically snaps the edges of new cells into alignment with nearby edges of existing cells. (Layout
cells cannot overlap.) Cell edges also automatically snap to the edges of the containing layout table if you draw a cell
close to the edge of a table.
September 4, 2007
DREAMWEAVER CS3 192
User Guide