7.7 Modifying Cell and Row Properties in Standard View

   

7.7 Modifying Cell and Row Properties in Standard View

Cells have their own properties, separate from the properties of the table itself. So do table rows but not columns (see Section 7.7.1).

When you click inside a cell, the top half of the Property inspector displays the cell's text formatting properties; the bottom half shows the properties for that particular cell (see top image in Figure 7-16).

7.7.1 Alignment Properties

At the outset, a cell's contents hug the left wall of the cell and float halfway between the top and bottom of the cell. After selecting a row, a cell, or several cells, you can change these alignments using the Property inspector. For example, the Horz (Horizontal) menu in the Property inspector (see Figure 7-16) offers Left, Center, Right, and Default alignment options. (Default produces the same effect as Center without adding any extra HTML code.)

Note that these options are distinct from the paragraph alignment options discussed in Chapter 3. In fact, you can mix and match the two. Suppose, for example, that you have a table cell containing four paragraphs. You want all but one paragraph to be center-aligned; you want the last paragraph to be right-aligned. To do so, you could set the alignment of the cell to Center, then select just the last paragraph and set its alignment to Right. The paragraph's alignment overrides the alignment applied by the cell.

POWER USERS' CLINIC
The Dawn of Columns

As far as the standard HTML language is concerned , there really isn't any such entity as a column. Tables are created with the <table> tag, rows with the <tr> tag, and cells with the <td> tagbut there's no column tag. Dreamweaver calculates the columns based on the number of cells in a row. If there are 7 rows in a table, each with 4 cells, then the table has 4 columns. In other words, the number of cells in each row determines the number of columns.

But times are changing. Two new tags introduced in HTML 4the <colgroup> and <col> tagslet you control various attributes of columns in a table. At present, not all Web browsers understand these tags, and Dreamweaver provides no easy way to add them. You can find out more about them, however, in Dreamweaver's built-in HTML reference (see Section 10.5).

The Property inspector displays the properties of a cell (top) or a row (bottom). Rows have distinct properties that you can set independently of a cell. For example, a row can have a background and border color that are different from the individual cells in that row. (Still, when a row is selected, the Width, Height, No Wrap, or Header options affect the individual cells in the row.)

You can set the vertical alignment property in the same manner. Select the cells and then use one of the five options available in the Vert (Vertical) menu of the Property inspector: Default (the same as Middle), Top, Middle, Bottom, or Baseline.

FREQUENTLY ASKED QUESTION
Suddenly Jumbo Cells

When I added some text to a cell, it suddenly got much wider than the other cells in the row. What gives?

It isn't Dreamweaver's fault. This is how HTML works.

Web browsers (and Dreamweaver) display cells to match the content inside. In the example shown here, the first cell of the first row has a little text, the second cell is blank, and the third cell has a 125-pixel-wide image. Since the image is the biggest item, its cell is wider than the other two. The middle cell, with nothing in it, is given the least amount of space.

Usually, you won't want a Web browser making these kinds of decisions. By specifying height and width for a cell (Section 7.7.5), you can force a Web browser to display a cell with the dimensions you want.

(The Baseline option aligns the bottom of the first line of text in the cell to the baseline of text in all the other cells in the row. This option works only in Netscape browsers, so avoid it if you want your Web pages to look the same on all browsers.)

7.7.2 Table Header

The Table Header option lets you convert a <td> tag to a <th> tag for specifying a table header. It's a similar scheme to the column or row headers available in the Insert Table dialog box described in Section 7.3. You can use it to format a heading for the table as a whole, and it also adds to the accessibility of your table.

You'll usually use this option for tables that include actual tabular data, like a spreadsheet, to indicate the meaning of the data that appears in the other cells in a row or column. For example, you might have a table containing data from different years ; each cell in the top row might identify the year of the data in the cells below it.

While Dreamweaver lets you change a single cell into a header, you'll most likely apply this to a row of cells or the left hand column of cells.

7.7.3 A Property to Forget

The No Wrap options is of such little value that you'll probably go your entire Web career without using it.

But for sake of thoroughnessand in case you may actually find a use for ithere's a description. The No Wrap property prevents a Web browser from wrapping a line of text within a cell onto multiple lines. The browser instead widens the cell so that it can include the line without line breaks. The result is almost never useful or attractive. Furthermore, if you specify a width for the cell, this property doesn't work at all!

7.7.4 Cell Decoration

Cells needn't be drab. As with tables, you can give individual cells background colors or even background graphics (see Figure 7-17).

7.7.4.1 Adding cell background colors

To set the background color of one or more selected table cells or rows, do one of the following:

• Click the Bg color box in the Property inspector, and then select a color from the pop-up palette.

• Type a hexadecimal color value into the Bg color field.

You also have the option to set a color for the cell's border using the color box or Brdr field in the Property inspector. However, only Internet Explorer recognizes this property, and, since it is not officially part of HTML, it's unlikely that other browsers will ever support it.

Cascading Style Sheets do allow colored cell borders. In fact, you can set each of the four borders to a different color, if you're in that kind of mood. Many Web developers are now abandoning the Cell Background and Border properties in favor of their more versatile CSS counterparts. See Section 6.7.2 for more on CSS background properties and Section 6.7.5 for CSS border properties.

Add impact with background color. The home page for the Los Angeles County Arts Commission (www. lacountyarts.org) makes a big visual statement without being a bandwidth hog. The trick? There are only a few graphics on this page. The colorful squares are simply table cells with a variety of background colors.

7.7.4.2 Adding cell background images

You can also add an image to the background of a cell. In this instance, the cell acts much like a miniature document window; the graphic tiles (repeats endlessly) within the cell to completely cover the cell's background.

To add a background image to selected cells, try either of these steps:

• Click the Browse for File icon (the folder icon) to the right of the Bg field in the Property inspector (see Figure 7-15). In the resulting dialog box, navigate to and open the graphics file you want.

• Type the file path or URL of the graphic you want in the Bg field in the Property inspector.

You can also set a background image for a table row (<tr> tag) using Dreamweaver, but it involves some coding that isn't officially part of HTML. In fact, only Netscape versions 4 and higher can display a background image for a table row at all.

NOTE

Here's another instance where CSS outshines HTML. You can control a background image's placement inside of a table or cell and how it tiles (if at all). See Section 6.7.2.

7.7.5 Setting Cell Dimensions

Specifying the width or height of a particular cell works just as it does when you set the width or height of a table: select one or more cells and type a value in the W (width) or H (height) field in the Property inspector. This value can be either specified in pixels or percentage. For instance, if you want a particular cell to be 50 pixels wide, type 50 . For a cell that you want to be 50 percent of the total table width, type 50% . Read "Tips for Surviving Table Making" in Section 7.7.6 for detail on the tricky business of controlling cell and table dimensions.

You can also resize a column or row of cells by dragging a cell border. As your cursor approaches the cell's border, it changes shape to indicate that you can begin dragging. Dreamweaver MX 2004 adds an interactive display of cell widths (Figure 7-18) when you use this method. This helpful new feature shows you know exactly what width your cells are at all times so you can drag a cell to the exact width you're seeking.

As you drag the border between cells, Dreamweaver shows you the changing widths of the two adjacent cells in real time. The width values change to blue and update themselves as you move the mouse.

7.7.6 Tips for Surviving Table Making

Nothing can be more confounding than trying to get your tables laid out exactly as you want them. Many beginning Web designers throw their hands up in despair when working with tables, which often seem to have minds of their own. The Layout mode eliminates many of the hassles associated with using tables for page layout, but here are a few problems that often confuse designersand some tips to make working with tables more straightforward.

7.7.6.1 The contents take priority

You've created a 300-pixel-wide table and set each cell in the first row to 100 pixels wide. You insert a larger graphic into the first cell, and suddenlyKablooie! Even though you set each cell to 100 pixels wide, as shown in Figure 7-19, the column with the graphic is much wider than the other two.

That's because a cell can't be smaller than the largest piece of content inside it. In this case, although you told the cell to be 100 pixels wide, the image is 174 pixels wide, and forces the first column to grow (and the others to shrink) accordingly .

Because a Web browser can't shrink the image or hide part of it, the cell has to grow to fit it. That first column of cells is now 174 pixels wide; the other two columns must shrink in order to keep the table 300 pixels wide.

WORKAROUND WORKSHOP
Beware the Resize Handles

Dreamweaver provides several techniques for resizing tables and cells while in Standard view. Unfortunately, the easiest methoddragging a cell or table borderis also the easiest to do by mistake. Because moving the cursor over any border turns it into the resize tool, almost every Dreamweaver practitioner drags a border accidentally at least once, overwriting carefully calculated table and cell widths and heights.

On occasions like these, don't forget the undo featureCtrl+Z ( -Z). And if all is lost, you can always clear the widths and heights of every cell in a table (using the buttons in the Property inspector) and start over by typing new cell dimensions (see Figure 7-15).

7.7.6.2 Set each column manually

Suppose you've created a 580-pixel-wide table with three columns. You've set the width of a cell in each of the first two columns to 150 pixels and 50 pixels. You assume that the Web browser is smart enough to figure out what size the remaining column should be: 380 pixels, of course, which is exactly what's left over if you subtract the first two column widths from 580. But you'd be wrong, as explained in Figure 7-20.

In the top table, the designer set widths for the first two columns; the last column wound up with no width set. In the lower table, the designer manually set the width of the third column to 380 pixels; this time, the browser displays it correctly.

Web browsers aren't so smart. As you can see in Figure 7-20, Netscape Navigator 4.0 needs more information to display a table correctly.

7.7.6.3 There is no such thing as column width, only cell width

To set the width of a column of cells, you have to set the width of only one cell in that column. For example, in the second table in Figure 7-20, the first cell in the top row has a width set to 150. You don't have to set the widths of the two cells below it.

This principle can save a lot of time, and, because it reduces the amount of code on a Web page, and makes your pages load and appear faster. For consistency, it's a good idea to pick either the first or last row of a table for width-setting.

The same holds true for the height of a row. You only need to set the height of a single cell to define the height for its entire row.

Fortunately, Dreamweaver MX 2004 is smart. When you resize one or more cells, it adds width and height values only where they're needed, without filling every cell with needless height and width values.

7.7.6.4 Do the math

Calculators can be really useful when you're building tables. Although you could create a 400-pixel-wide table with three 700-pixel-wide columns, the results you'll get on the screen can be unpredictable (700 + 700 + 700 400).

As it turns out, Web browsers' loyalty is to table width first, then column widths. If you make the widths of your columns add up to the width of your table, you'll save yourself a lot of headache .

7.7.6.5 The Spacer Image Revisited

Unfortunately, even if you explicitly set cell widths, some browsers still don't do a good job at controlling the width of cells. Remembering that a cell can't be smaller than the largest item inside it, as noted previously, is half the battle. For even more control, use a spacer image, just as Dreamweaver does when you use the Autostretch option in Layout mode (see Section 7.2.6).

For example, suppose you want to create a table that's 580 pixels wide, with two rows and three columns. The widths of the columns will be 150 pixels, 20 pixels, and 410 pixels, respectively.

Specifying the widths of each cell in one of the rows would be a good start, but a more reliable approach would be to use a transparent GIF image to reinforce the column widths:

1. In a graphics program, create a 1-pixel by 1-pixel transparent GIF graphic.

   Dreamweaver can do this automatically if you use Layout mode. See Section 7.2.6.2.

2. Create a new row at the bottom of the table.

   One easy way is to click the lower-right cell of the table, and then press Tab.

3. Click in the first cell; insert the spacer image by choosing Insert Image and selecting the spacer file in your site folder.

   WORKAROUND WORKSHOP
   Shrinking Down to a Pixel

   Suppose you want to make an extremely short table cell. For example, one common trick for overcoming the drab gray quality of HTML's horizontal rule (see Section 1.2.2) involves assigning a background color to a 1-pixel tall table cell that stretches the entire width of the page. When previewed in a browser, the cell looks like a colorful 1-pixel line. Make the cell 2 pixels tall, and you've got a 2-pixel-high line.

   But sooner or later, almost every Dreamweaver student runs up against this one: Even when you set the height of an empty cell to 1 pixel, it's still a lot taller than it needs to be. No matter what you try, you can't get that cell any shorter.

   When Dreamweaver inserts a table into a document, all of the cells of the table appear to be empty. However, Dreamweaver actually inserts a nonbreaking space (see Section 2.1.1.2 page 51) into each cell as a workaround for a particular display bug in the Netscape and Internet Explorer browsers.

   A nonbreaking space takes up space. Its height is based on the default font for the Web page. And because a cell can't be smaller than the largest item in it, Web browsers can't shrink the cell down to 1 pixel.

   To get around this problem, create a 1-pixel by 1-pixel transparent GIF image and keep it in your site folder. If you insert that image into the cell, Dreamweaver graciously removes its unsolicited nonbreaking space (just as it would for any cell that's not empty). Repeat for each cell in the row. Now the row can shrink down to a single pixel.

   
   

   Dreamweaver inserts the image and selects it in the document window.

4. Using the Property inspector, change the width of the GIF to 150 pixels.

   Since the first column in the table is 150 pixels wide, this graphic keeps the column from shrinking any smallerwhich, in some browsers, it might otherwise do, thanks to an all-too-common bug.

5. In the second cell in the row, insert another spacer GIF. Set its width to 20 pixels.

   Like the previous image, this one helps maintain the 20-pixel width of the column.

6. Finally, move to the third cell in the row, insert another spacer, and set its width to 410 pixels.

   Your table is now rock-solid.

Now you can see the advantages of Dreamweaver's Layout mode, which eliminates the need for many of these workarounds. It takes care of a lot of the headaches of building table-based layouts.