Using a table for layout
Although novices and intermediate Web authors generally find it easier to use a layout box than an ordinary table to create a multi-column layout, experienced authors may prefer tables for their familiarity or their greater flexibility. Creating a layout table is not difficult, but you do need to be aware of various behaviors of tables and cells and how they can affect your layout. Here are some guidelines for using layout tables:
Use the table drawing tools
Namo WebEditor’s table drawing tools can greatly simplify creating a layout table. Use the Table Pencil to draw a single-cell table of the desired size, and then draw column and row borders to create cells for content. Use the Table Eraser to merge cells by “erasing” the border between them.
Align content with the tops of cells
If you don’t specify the vertical alignment of content in a cell otherwise, most browsers put content in the middle of the cell. For a layout table, you’ll probably want content to start at the top of most cells. To specify top vertical alignment in a cell, do this:
- Right-click the cell and select Layout Cell Properties in the shortcut menu.
- Click the Vertical alignment box and select Top.
You can select several cells and set the vertical alignment of all of them in one operation.
Pay attention to borders, margins, and padding
For layout tables, you’ll usually want the borders to be invisible in browsers. After creating a layout table in Namo WebEditor, make sure to set the border width to zero to make the borders invisible.
In most browsers, the default spacing between cells is 2 pixels, and the default cell padding is 1 pixel. This may interfere with your page design if your design calls for adjacent cells to contain images that have no space between them. On the other hand, you might want more space between cells that contain text, for better readability. You can adjust the cell spacing and padding values for a table in the Table Properties dialog box.
Note that these values apply to an entire table; pure HTML does not provide a way to control spacing and padding on a cell-by-cell basis. For greater control, set both cell spacing and cell padding to zero and use the padding properties of cascading style sheets on individual cells as needed.
Be careful when setting table and cell widths
When you create a table using the table drawing tools or the Create Table button on the Standard Toolbar, Namo WebEditor automatically sets column widths in absolute, pixel units. However, pixel units are not always appropriate for layout tables. If you use only pixel units, your table’s width cannot grow or shrink in response to changing browser window sizes, so people who view your page in a small window may have to scroll sideways to see all your content. It’s usually best to leave the width of at least one column unspecified, so that column can grow or shrink depending on the window size.
In the example below, the “content” cell’s width is unspecified, while the table’s width is set to 100%. This allows the table width to shrink or grow while the width of the “navigation” cell remains fixed.
A layout table using both fixed and unspecified cell widths
Also, try to avoid specifying table and cell sizes that conflict with one another. Conflicting size settings can confuse browsers and lead to unexpected results. For example, avoid specifying a table width that is smaller than the combined width of its columns.
Don’t rely on cell height
If you specify the height of a row or cell, keep in mind that browsers treat the value as a minimum value only. Browsers will always override the specified height of a cell when necessary to show all its contents.