Section 7.8. Modifying Cell and Row Properties in Standard View

7.8. 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.8.2).

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 Figure 7-19, top).

Figure 7-19. 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 background and border colors 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.)

7.8.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-19) 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, and then select just the last paragraph and set its alignment to Right. The paragraph's alignment overrides the alignment applied by the cell.

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.

(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. Internet Explorer and Opera display this correctly, but Firefox and Safari ignore the Baseline setting.)

7.8.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 on Section 7.4.

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 9.6).


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 may have a table containing data from different years ; each cell in the top row may 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 column of cells.

7.8.3. A Property to Forget

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

But for the sake of thoroughnessand in case you may actually find a use for it here'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!

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 a width for a cell (Section 7.8.5), you can force a Web browser to display a cell with the dimension you want, but keep in mind that there are exceptions to this rule; see "The contents take priority" on Section 7.8.6.1.


7.8.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-20).

7.8.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 isn't officially part of HTML, it's unlikely that other browsers will ever support it.


Note: The same caveats about Table backgrounds (see the note on Section 7.7.3) apply to cell backgrounds. Many Web developers have already abandoned the Cell Background and Border properties in favor of their more versatile CSS counterparts. See Section 6.7.2.1 for more on CSS Background properties and Section 6.7.5 for CSS Border properties.
Figure 7-20. 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? Instead of using graphics to add colorful squares to the page, they've simply applied background colors to the table cells.

7.8.4.2. Adding cell background images

You can also add an image to the background of a cell. In this scenario, 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-19). 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, Internet Explorer won't display a background image for a table row at all.


Note: Here's another instance where CSS outshines HTML. With CSS, 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.1.

7.8.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" below for details 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 also provides an interactive display of cell widths (Figure 7-21) when you use this method. This helpful feature lets you know exactly what width your cells are at all times so you can drag a cell to the exact width you're seeking.

7.8.6. Tips for Surviving Table Making

Nothing is 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. 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.

Figure 7-21. 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 your mouse.

7.8.6.1. The contents take priority

Say 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-22, 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 155 pixels wide and forces the first column to grow (and the others to shrink) accordingly .

Figure 7-22. 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 155 pixels wide; the other two columns must shrink in order to keep the table 300 pixels wide. The numbers at the bottom of each cell indicate its width as set in the HTML100and the actual width as displayed in Dreamweaver in parentheses (155, 67, and 68).

7.8.6.2. There's 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, say you have a table with three rows and three columns. You need only to set the width for the top row of cells; you can (and should) leave the cell widths for the remaining cells in the two bottom rows empty. (You can do this with any row of cells, not just the top row.)

This principle can save a lot of time and, because it reduces the amount of code on a Web page, 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 need only to set the height of a single cell to define the height for its entire row.

Fortunately, Dreamweaver 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.8.6.3. Do the math

Calculators are 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'd get on the screen could be unpredictable (700 + 700 + 700 400).

As it turns out, Web browsers' loyalty is to table width first, and 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 .

You'll need to account for a few other factors if you add borders, cell padding, and cell spacing. For example, say you create a 500-pixel-wide table with two columns and 10 pixels of padding. If you want the first column to be 100 pixels wide, you would set the width value to 80 pixels: 10 pixels left padding + 80 pixels of cell space + 10 pixels of right padding = 100 pixels total width.

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 feature, Ctrl+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-18).


7.8.7. 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.3.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 x 1pixel, transparent GIF graphic .

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

  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 .

    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.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

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