| Tables typically consist of one or more rows and one or more columns . Each rectangular area at the intersection of a row and column is called a cell . Cells contain the page's text or images, and items within a cell can't extend past the cell's boundaries. You can insert a table anywhere on a page, even within another table (this is called nesting a table). By default, Dreamweaver creates tables with three rows and three columns, but you can easily change that format during the process of inserting the table. After you do make changes, Dreamweaver remembers them and uses them as the defaults for the next table you create. To add a table to your page: | 1. | Place the insertion point where you want the table to appear.
| | 2. | On the Layout category of the Insert Bar, click the Table button ( Figure 9.1 ).  or Choose Insert > Table, or press Ctrl-Alt-T (Cmd-Opt-T). The Table dialog appears ( Figure 9.2 ).  | | 3. | Enter the number of rows you want in the table, and press Tab.
| | 4. | Enter the number of columns you want in the table, and press Tab.
| | 5. | In the "Table width" text box, enter a number that will either be in pixels or a percentage of the page width, then choose the units from the pop-up menu to the right of the text box ( Figure 9.3 ).  | | 6. | Set one or more (or none) of the following (see the "Anatomy of a Table" sidebar for explanations of the settings): -
Enter a figure in the "Border thickness " text box for the size of the border, in pixels, that will be displayed between cells. -
Enter a figure in the "Cell padding" text box for the amount of space, in pixels, between the content in the cells and the cell border. -
Enter a figure in the "Cell spacing" text box for the number of pixels of space between cells. | | 7. | In the Header section, choose the kind of header you want: None, Left, Top, or Both. The icons for the headers tell you what each choice looks like.
| | 8. | (Optional) In the Accessibility section, enter a caption for the table, then choose how you want the caption to be displayed by choosing from the "Align caption" pop-up menu. Your choices are Default, Top, Bottom, Left, or Right. Caption text will appear in all browsers. If you enter text in the Summary text box, that text will appear only in screen readers for the visually disabled.
| | 9. | Click OK. The table appears in your page ( Figure 9.4 ). When a table is selected, as in the figure, or when the insertion point is in a table cell, Dreamweaver shows green dimension lines above the table. The top line shows the width of the table in pixels. Each column also has a dimension line, which shows the width of the column in pixels if you have set a fixed width for the column. Columns with widths relative to the table width show dimension lines (so you can easily see each column) without pixel values. These dimension lines appear only in Dreamweaver's Design view, not in a Web browser.  |  Tips -
To insert a table within a table, place the insertion point inside a cell of an existing table, then choose either of the methods in step 2. The new table appears inside the first table ( Figure 9.5 ).  -
You don't have to get the number of rows and columns right the first time; you can always add or subtract them later. See the sections "Adding Rows and Columns" and "Deleting Table Elements" later in this chapter. -
If you don't want to see the dimension lines above tables, you can turn them off by choosing View > Visual Aids > Table Widths, which removes the checkmark from the menu item. -
Table captions appear above or below (or next to) the table, and are actually part of the table. When you move the table, the caption moves with it. To edit a caption, select it and type over the existing text. To change the alignment of the caption, place the insertion point in the caption, then right-click and pick one of the choices from the Align submenu in the resulting shortcut menu.
| Besides rows and columns, tables have several other attributes that affect how they look. You'll find controls for these items in the Property Inspector when you have selected a table. Border thickness is the width of the border around the table, in pixels ( Figure 9.6 ). Dreamweaver sets it to one pixel by default, which results in a thin border. If the border thickness is set to a nonzero amount, you will also see a border between table cells. You'll often see the border thickness set to zero on pages that are using tables for page layout and the designer doesn't want you to see borders. Borders with zero thickness appear in Design view with dotted borders. 
Cell padding is the amount of space, in pixels, between a cell's borders and its content ( Figure 9.7 ). Use this setting to give cell content more breathing room within cells. If you don't specify a number here, most browsers use a default value of one pixel. 
Cell spacing is the amount of space between each table cell, also measured in pixels ( Figure 9.8 ). If you don't specify a number here, most browsers use a default value of two pixels. Wide cell spacing gives the table a look that is very 1996, so use this setting with care. 
Border color is the color of the border around the table and between the table's cells. Background color is the color of the cell's contents (though you can set the color of text in the cell separately). You can also use the Text Color attributes to color text within the cell. Background image allows you to use an image, rather than just a color, as the background for a table. Table header tags part of the table as a header. The header is formatted as bold and centered, but more important, it has the <th> HTML tag, which allows screen readers used by visually disabled users to correctly read the table. It's better to use a table header tag in Dreamweaver than to manually make cells bold and centered. |
|
