Section 7.7. Formatting Tables | Dreamweaver 8[c] The Missing Manual

7.7. Formatting Tables

When you first insert a table, you set the number of rows and columns , as well as the table's cell padding, cell spacing, width, and borders. You're not stuck, however, with the properties you first give the table; you can change any or all of these properties, and set a few additional ones, using the Property inspector.

When you select a table in Standard view, the Property inspector changes to reflect that table's settings (see Figure 7-18). You can adjust the table by entering different values for height, width, rows, columns, and so on in the appropriate fields.

Figure 7-18. When you select a table, you can do everything in the Property inspector from adjusting its basic structure to fine-tuning its appearance. Dreamweaver includes two menusTable Id and Classwhich let you apply a CSS ID selector (see Section 6.6.2) or a class style (Section 6.1.3) to a table.

In addition, the Property inspector lets you set alignment options and add colors or a background image, as described next .

7.7.1. Aligning Tables

In the normal flow of a Web page, a table acts like a paragraph, header, or any other HTML block-level element. It's aligned to the left of the page, with other elements placed either above it or below it.

But you can make several useful changes to the way a table interacts with the text and other elements around it. After selecting the table, use one of the three alignment options in the pop-up menu at the right of the Property inspector:

The Left and Right options align the table with the left or right page margins. Anything you then add to the pageincluding paragraphs, images, or other tableswraps around the right or left side of the table. You can also apply the CSS Float property to a table to achieve the same effect (see Section 6.7.4).
The Center option makes the table sit in the center of the page, interrupting the flow of the elements around it. Nothing wraps around the table.

Note: Some of the properties Dreamweaver lets you adjust to make tables look better aren't "valid" for some of the different HTML "document types" Dreamweaver can create. As you saw in the Tutorial in Chapter 1 (Section 1.3.3), Dreamweaver can create HTML 4.01 Transitional, XHTML 1.0 Transitional, and (new in version 8) several other types of HTML documents. In general, HTML 4.01 Transitional and XHTML 1.0 Transitional are the most commonly used document types. However, the more "strict" types like HTML 4.01 Strict and XHTML 1.0 Strict don't support some table propertiesthe align property discussed above, for example. This discrepancy is more a technicality than a design nuisance; most Web browsers still display the alignment you select, even when used with these types of documents. The newer and recommended method is to use CSS properties to accomplish the same display goals; for example, using CSS to set the left and right margins of a table to "auto" centers the table on the page (see Section 6.7.4.1), while applying a CSS Left Float and Right Float to a table is the same as the Left and Right align options (Section 6.7.4). See Section 14.3 for more on what "valid" HTML is.

7.7.2. Clearing Height and Width Values

Six tools hide behind the obscure-looking buttons in the bottom half of the Property inspector (see Figure 7-18).

Clicking the Clear Height Values button removes the height properties of the table and each cell. Doing so doesn't set the heights to zero; it simply deletes the property altogether.
Clicking the Clear Width Values button accomplishes the same purpose for the width properties of a table and its cells (see "Setting Cell Dimensions" on Section 7.8.5).

When creating complex table designs, it's easy to get yourself into a situation where width and height measurements conflict and produce unreliable results. For example, it's possible to set one cell to 300 pixels wide, and later set another cell in the same column to 400 pixels wide. Since a Web browser can't do both (how can one column be both 300 and 400 pixels wide?), you'll get unpredictable results.

In tables with many cells, these kinds of problems are tough to ferret out. That's when you'll find these time-saving tools handy. You can delete the width and height measurements and start from scratch (see "Tips for Surviving Table Making" on Section 7.8.5).

Four additional buttons let you convert pixel-based measurements to percentage measurements and vice versa. In other words, if a table is 600 pixels wide and you click the Convert Widths to Percentages button, Dreamweaver assigns percentages to the table and each cell whose width is specified using pixels.

These percentages depend on how much of the document window your table takes up when you click the button. If the document window is 1200 pixels wide, that 600-pixel-wide table changes to a 50-percent width. Because you'll rarely do this, don't waste your brain cells memorizing such tools. (See "Resizing a Table" below for more information.)

7.7.3. Decorating a Table

To spruce up a table, you can add color to its background and borders, and even add a background image. As usual in Dreamweaver, you make these changes in the Property inspector. First select the table (see Section 7.5), and then click the appropriate box in the Property inspectorBg color (background) or Brdr color (border)and select a color from the color palette. (See Section 1.3.3 for more on choosing colors in Dreamweaver.)

To add a graphic image to the background of a selected table, click the folder icon next to Bg Image in the Property inspector. Browse to and open an image in your Web site folder; it appears immediately as a background image for the selected table.

Note: Border color and background images aren't valid XHTML Transitional code (see the Note on the opposite page). In addition, neither HTML 4.01 Strict nor XHTML 1.0 Strict supports those properties or the background-color property.The CSS background properties (see Section 6.7.2.1) are a solution to this dilemma, and offer more control over setting background colors and images than the HTML equivalents described here. In addition, you can achieve more border effectseven different sizes, colors, and styles for each borderusing the CSS Border properties described on Section 6.7.5.

7.7.4. Resizing a Table

While you define the width of a table when you first insert it, you can always change your mind later. To do so, first select the table, and then take either of these steps:

Type a value into the W (width) box on the Property inspector and choose a unit of measurement from the pop-up menu, either pixels or percentages.
Drag one of the resize handles on the right edge or right corner of the table. (The corner handle adjusts the height and width of the table simultaneously .)

In theory, you can also convert a table from a fixed unit of measurement, such as pixels, to the stretchy, percentage-style width settingor vice versausing four buttons at the bottom of the Property inspector. What these buttons do depends on the size of the current document window in Dreamweaver. For example, suppose the document window is 700 pixels wide, and you've inserted a table that's 100 percent wide. Clicking the Convert Widths to Pixels button sets the table's width to around 700 pixels (the exact value depends on the margins of the page). However, if your document window were 500 pixels wide, clicking the same button would produce a fixed-width table around 500 pixels wide. Two buttons let you control this conversion separately for the height and width of the table and its cells (see Figure 7-18).

Note: The HTML <table> tag doesn't officially have a Height property. Dreamweaver, however, adds a Height property if you use the Property inspector or drag the bottom of the table to resize it. Most Web browsers understand this Height property and obey your wishes. But since it's not standard code, there's no guarantee that newer browsers will support this maneuver.You have several alternatives: First, you could decide not to worry about height. After all, it's difficult to control the height of a table precisely, especially if there's text in it. Since text sizes appear differently on different operating systems and browsers, the table may grow taller if the text is larger, no matter where you set the height. Or you could use the CSS Height property (Section 6.7.4) to set a height for a table. Finally, you can always insert a graphic in a table cell to pop it up to the height you want. (See "The contents take priority" on Section 7.8.6.1.)

The Convert Width to Percentages buttons take the opposite tack. They set the width or height of a table and its cells to percentages based on the amount of the document window's width and height they cover at the moment. The bigger the window, the smaller the percentage.

Because the effects of these buttons depend upon the size of the document window, you'll find yourself rarely, if ever, using these two tools.