See
“Formatting Text” on page 177.
About table tags
When formatting tables in the Document window, you can define properties that apply to the entire table or to selected rows, columns, or cells in the table. When a property such as background color or alignment is set one way for the whole table and another way for individual table cells, it is useful to understand how Dreamweaver interprets the HTML source code.
When the same property is set more than once in a table, it is interpreted in this way: cell formatting, which is part of the TD tag, takes precedence over table row formatting (the TR tag), which in turn takes precedence over table formatting (the TABLE tag). Therefore, if you specify a background color of blue for a single cell and then set the background color of the entire table to yellow, the blue cell will not change to yellow, since the TD tag takes precedence over the TABLE tag.
In the following example, the TABLE tag sets a background color of yellow (#FFFF99) for the entire table. The first TR tag changes those cells to green (#33FF66), and the second TD tag changes the top center cell to blue (#333399).
The TR and TD tags in the bottom row have not been altered, so those cells take on the table color, which is yellow.
<TABLE BORDER="1" WIDTH="75%" BGCOLOR="#FFFF99">
<TR BGCOLOR="#33FF66">
<TD> </TD>
<TD BGCOLOR="#333399"> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
Creating Tables
221
Setting table properties
The Property inspector displays table properties when a table is selected.
You can also use the Format Table command to quickly apply a preset design to a selected table. See “Formatting a table with a preset design” on page 225.
To specify table properties:
1
Select the table.
2 Choose Window > Properties to open the Property inspector. Click the expander arrow in the lower right corner to see all properties.
To name the table:
In the Table Name field, type a name for the table.
To select table layout options:
In the Rows and Cols fields, specify the number of rows and columns in the table.
In the W and H fields, specify the width and height of the table as a number of pixels or as a percentage of the browser window. You usually don’t need to set the height of a table.
Use the Align field to specify how a table aligns with other elements in the same paragraph, such as text or images. Left aligns the table to the left of other elements, right aligns the table to the right of other elements, and Center centers the table. You can left-align, right-align, or center the table relative to the other elements. You can also choose the browser’s default alignment.
In the V Space and H Space fields, specify the number of pixels of white space to leave above, below, and on both sides of the table.
Use the Clear Row Heights and Clear Column Widths buttons to delete all table row height and column width values from the table.
Use the Convert Table Widths to Pixels button to convert the table width from a percentage of the browser window to its current width in pixels.
Use the Convert Table Widths to Percent button to convert the current table width from pixels to a percentage of the browser window.
222
Chapter 8
To set cell layout, choose from the following options:
In the CellPad field, specify the number of pixels between the cell content and the cell boundary (or wall).
In the CellSpace field, specify the number of pixels between each table cell.
When cell spacing and cell padding are not assigned specific values, Netscape Navigator, Microsoft Internet Explorer, and Dreamweaver all display the table as if cell spacing were set to 2 and cell padding were set to 1.
To set table borders, choose from the following options:
In the Border field, specify the width of the table border in pixels. Most browsers display the border as a three-dimensional line.
If you are using the table for page layout, specify a border value of 0. To view cell and table boundaries when the border is set to 0, choose View > Table Borders.
Use the Light Brdr and Dark Brdr fields to select border colors that have a highlight and shadow effect, respectively, giving the border a three-dimensional appearance. (To return to the default gray shades, remove the color values and leave the fields blank.)
Use the Brdr field to select a border color for the entire table.
Use the Bg options to select the background image or background color for the table.
Setting column, row, and cell properties
Select any combination of cells and then use the Property inspector to change the appearance of individual cells, rows, or columns. To select cells, rows, and
columns, see “Selecting table elements” on page 219. To apply formatting to the entire table, see “Setting table properties” on page 222.
To format a row, column, or cell:
1
Select any combination of cells in the table.
2 Choose Window > Properties to open the Property inspector, and click the expander arrow in the lower right corner to see all properties.
Creating Tables
223
3 Choose from the following appearance options:
Use the Horz pop-up menu to set the horizontal alignment of a cell’s, column’s, or row’s contents. You can align the contents to the left, right, or center, or to the browser’s default (usually left for regular cells and center for header cells).
Use the Vert pop-up menu to set the vertical alignment of the cell’s, column’s, or row’s contents. You can align the contents to the top, middle, bottom, or baseline, or to the browser’s default (usually middle).
In the W and H fields, specify the width and height of selected cells in pixels.
To use percentages, follow the value with a percent symbol (%).
To set a background image for a cell, column, or row, use the top Bg field.
Click the folder icon to browse to an image; you can also type the image’s path or use the Point-to-File icon.
To set the background color for a cell, column, or row, use the bottom Bg field. You can use the color picker or type the hexadecimal code for the color you want.
To set a border color for cells, use the Brdr option.
4 Choose from the following layout options: