Formatting Tables


Dreamweaver comes with 17 preset table formats, which apply fonts, cell borders, and cell -background colors to tables to provide a more attractive look and make the table data more readable ( Figure 9.32 ). These formats are similar to features of Microsoft Excel's AutoFormat option for worksheets.

Figure 9.32. Using contrasting colors in rows can often make tables more readable.


If you like the look of one of the preset formats, you can apply it to your table with just a few clicks, and move on to other work. But if you want to customize the formatting further, you can do that, too.

Because the table formatting gets applied to the entire table, you'll be best off if the table already contains all of its data (or at least has its complete structure) before you start formatting it. Otherwise, you might have to reapply the formatting if you add or subtract rows or columns .

You can also use a CSS style to format a table, with the table's look being defined by instructions in a CSS style sheet. You can choose to have the table style apply to all tables in your document (if you use the style sheet to redefine the <table> tag), or you can create a custom CSS class for a particular kind of table you want to use, and apply the style to the table with the Property Inspector.

To apply table formatting:

1.
Place the insertion point inside the table you want to format.

2.
Choose Commands > Format Table.

The Format Table dialog appears ( Figure 9.33 ).

Figure 9.33. Use one of the preset formats in the Format Table dialog as is, or customize it to create your own format.


3.
From the scrolling list, choose a format.

A sample of the format appears in the dialog, next to the list.

4.
If you are pleased with the look of the format you chose, skip to Step 9.

5.
(Optional) To modify the row colors, choose First and Second colors by clicking in either of the color wells to bring up the color picker. Then choose how you want the rows to alternate colors by choosing from the Alternate pop-up menu.

6.
(Optional) You can format the top row differently from the rest of the table; this is often done for a table header. Choose how you want to align the top row text by picking from the Align pop-up menu, then choose Regular, Bold, Italic, or Bold Italic from the "Text style" pop-up menu. You can also set the background color of the table or the text color of the top row by clicking in the respective color well to bring up the color picker.

7.
(Optional) You can also format the text in the left column. Choose the text alignment from the Align pop-up menu, then choose the text style.

8.
(Optional) To set the width of the border (in pixels), enter a number in the Border text box.

9.
Click OK.

Dreamweaver applies the format to the table ( Figure 9.34 ).

Figure 9.34. The customized format, as applied to the table.


Tips

  • The preset formats only work on one table at a time. If you have nested tables, you'll need to apply a preset format to each table separately.

  • You can't create and save a custom table format in the Format Table dialog, but you can certainly create, format, and save an empty table for later use. Just create and format the table, select it, then save it as a snippet. See Chapter 13 for more about creating snippets.


To apply a CSS style to a table:

1.
Select the table you want to format.

2.
In the Property Inspector, choose the style you want from the Class pop-up menu ( Figure 9.35 ).

Figure 9.35. Apply a CSS style to a table in the Property Inspector.


The table takes on the formatting from the CSS style you chose.




Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net