7.6 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-15). You can adjust the table by entering different values for height, width, rows, columns, and so on in the appropriate fields.

Expanded Table mode lets you clearly view the structure of table-based layouts. In Standard view (top), it can be difficult to distinguish tables, rows, columns, and cells. With Expanded Table mode turned on (bottom), Dreamweaver displays tables with extra borders and cell spacing to make selecting and working with tables and cells easier. (Expanded Table mode is just an extension of the Standard mode. You can't use any of the Layout mode tools—cell or table drawing tools, for example—in Expanded Table mode.)

When you select a table, you can do everything from adjust its basic structure to fine-tune its appearance in the Property inspector. Dreamweaver MX 2004 adds two new menus—Table Id and Class—which let you apply a CSS ID selector (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.6.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 page, including paragraphs, images, or other tables, wraps 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.

7.6.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-14).

• 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" in Section 7.7.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 timesaving tools handy. You can delete the width and height measurements and start from scratch (see "Tips for Surviving Table Making" in Section 7.7.6).

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 in Section 7.6.4 for more information.)

7.6.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.4.1), then click the appropriate box in the Property inspector—Bg 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.

7.6.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 setting—or vice versa—using four buttons at the bottom of the Property inspector (see Figure 7-15).

These options depend 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 separately for the height and width of the table and its cells (see Figure 7-15).

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.