It's fairly easy to select table elements when the table is fully expanded — but tables aren't always set to a 100% width. In fact, designers often remove all table width values for their layouts, thus collapsing the table to fit the content. Although this is often necessary, you may have difficulty placing your cursor in the right cell in a collapsed table. You can speed up the selection and design process considerably by temporarily entering into Expanded Tables mode.

To enable Expanded Tables mode, choose View

Expanded Tables mode makes cell selection easier by temporarily adding a border (if there is none) and increasing the cell padding and spacing. These visual changes effectively make the table view much more apparent and selection far easier. All changes take place only in Dreamweaver's Design view — no code is ever rewritten. While you are in Expanded Tables mode, an outline (red, by default) appears around the table or any cells your cursor moves over. The outline color is controlled by the Mouse-Over option found on the Highlighting category of the Preferences. Ctrl+click (Command+click) an outlined cell or table to select it.

Expanded Tables mode is best used on an as-needed basis, and you can quickly toggle between it and Standard mode by pressing F6 (Option+F6).

Several methods are available for selecting the entire table, whether you're a menu- or mouse-oriented designer. To select the table via a menu, do one of the following:

To select an entire table with the mouse, use one of the following techniques:

The selected table is surrounded by a black border, with sizing handles on the right, bottom, and bottom-right corner (as shown in Figure 12-3), just like a selected graphic.

Altering rows or columns of table text without Dreamweaver is a major, time-consuming chore. Each cell has to be individually selected, and the changes applied. Dreamweaver has an intuitive method for selecting single or multiple columns and rows, comparable — and in some ways, superior — to major word processing programs.

Figure 12-3. A selected table can be identified by the black border outlining the table and the three sizing handles.

As with entire tables, you have several methods for selecting columns or rows. None of the techniques, however, uses the main menus; row and column selections are handled primarily with the mouse. In fact, you can select an entire row or column with one click.

The one-click method for selecting a single column or row requires that you position your pointer directly above the column or to the left of the row you want to choose. This is similar to the way you select a row or column in a Microsoft Word table. Move the pointer slowly toward the table — when the pointer becomes a single arrow, with the arrowhead pointing down for columns and to the right for rows, click the mouse. All the cells in the selected column or row are bounded with a black border. Any changes now made in the Property inspector, such as a change in font size or color, affect all of the cells in the selected column or row.

You can select multiple, contiguous columns or rows by dragging the single-arrow pointer across several columns or rows. To select a number of columns or rows that are not next to one another, press the Ctrl (Command) key while selecting each individual column, using the one-click method.

Sometimes you need to change an attribute of just a few cells in a table, but not the entire row — or you might need to merge several cells to form one wide column span. In these situations, and many others, you can use Dreamweaver's cell selection capabilities. As with columns and rows, you can select multiple cells, whether or not they are adjacent.

Individual cells are generally selected by dragging the mouse across one or more cell boundaries. To select a single cell, click anywhere in the cell and drag the mouse into another cell. As you pass the border between the two cells, the initial cell is highlighted. If you continue dragging the mouse across another cell boundary, the second cell is selected, and so on. Note that you have to drag the mouse into another cell and not cross the table border onto the page. For example, to highlight the lower-right cell of a table, you drag the mouse up or to the left.

Extended cell selection in Dreamweaver is handled identically to extended text selection in most word processing programs. To select adjacent cells, click in the first desired cell, press and hold the Shift key, and click in the final desired cell. Dreamweaver selects everything in a rectangular area, using the first cell as the upper-left corner of the rectangle and the last cell as the lower-right corner. You could, for instance, select an entire table by clicking in the upper-left cell and then Shift+clicking the lower-right cell.

Just as the Shift key is used to make adjacent cell selections, the Ctrl (Command) key is used for all non-adjacent cell selections. You can highlight any number of individual cells — whether or not they are next to one another — by pressing the Ctrl (Command) key while you click in each cell.

When you've finished entering your text in the first cell, you can move to the next cell in the row by pressing the Tab key. When you reach the end of a row, pressing Tab takes your cursor to the first cell of the next row. To go backward, cell to cell, press Shift+Tab.

The Home and End keys take you to the beginning and end, respectively, of the cursor's current line. If a cell's contents are large enough for the text to wrap in the cell, move to the top of the current cell by pressing Ctrl+Home (Command+Home). To get to the bottom of the current cell in such a circumstance, press Ctrl+End (Command+End).

When you're at the beginning or end of the contents in a cell, you can also use the arrow keys to navigate from cell to cell. Use the left and right arrows to move from cell to cell in a row, and the up and down arrows to move from cell to cell in a column. When you come to the end of a row or column, the arrow keys move to the first cell in the next row or column. If you're moving left to right, the cursor goes from the end of one row to the beginning of the next row — and vice versa if you move from right to left. When moving from top to bottom, the cursor goes from the end of one column to the start of the next, and vice versa when moving bottom to top.

In the early days of Web design, woe to you if you accidentally left out a cell of information. It was often almost faster to redo the entire table than to make room by meticulously cutting and pasting everything, one cell at a time. Dreamweaver ends that painstaking work forever with its advanced cutting and pasting features. You can copy a range of cells from one table to another and maintain all the attributes (such as color and alignment as well as the content — text or images). You can also copy just the contents and ignore the attributes.

Dreamweaver has one basic restriction to table cut-and-paste operations: your selected cells must form a rectangle. In other words, although you can select non-adjacent cells, columns, or rows and modify their properties, you can't cut or copy them. Should you try, you get a message from Dreamweaver like the one shown in Figure 12-5; the table above the notification in this figure illustrates an incorrect cell selection.

Figure 12-5. Dreamweaver enables you to cut or copy selected cells only when they form a rectangle.

Copying attributes and contents

When you copy or cut a cell using the regular commands, Dreamweaver automatically copies everything — content, formatting, and cell format — in the selected cell. Then, pasting the cell reproduces it; however, you can get different results depending on where the cell (or column or row) is pasted.

To cut or copy both the contents and the attributes of any cell, row, or column, follow these steps:

1. Select the cells you want to cut or copy. Remember that to cut or copy a range of cells in Dreamweaver, they must form a solid rectangular region.

2. To copy cells, choose Edit

   

3. To cut cells, choose Edit

   

4. Position your cursor to paste the cells in the desired location:

   • To replace a cell with a cell on the clipboard, click anywhere in the cell to be replaced. If you cut or copy multiple cells that do not make up a full column or row, click in the upper-left corner of the cells you want to replace. For example, a range of six cells in a 2 × 3 configuration replaces the same configuration when pasted. Dreamweaver alerts you if you try to paste one configuration of cells into a different cell configuration.

   • To insert a new row with the row on the clipboard, click anywhere in the row immediately below where you'd like the new row to appear.

   • To insert a new column with the column on the clipboard, click anywhere in the column immediately to the right of where you'd like the new column to appear.

   • To replace an existing row or column in a table, select the row or column. If you've cut or copied multiple rows or columns, you must select an equivalent configuration of cells to replace.

   • To insert a new table based on the copied or cut cells, click anywhere outside of the table.

5. Paste the copied or cut cells by choosing Edit

   

Tip

To move a row or column that you've cut from the interior of a table to the exterior (the right or bottom), you have to first expand the number of cells in the table. To do this, first select the table by choosing Modify

Copying contents only

You often need to move data from one cell to another, while keeping the destination cell's attributes, such as its background color or border, intact. For this, use Dreamweaver's facility for copying just the contents of a cell.

To copy only the contents, select a cell and copy as previously described; then, instead of choosing Edit

• You can copy the contents only one cell at a time, and you can paste those contents into only one cell at a time.

• You can't replace the entire contents of one cell with another and maintain all the text attributes (font, color, and size) of the destination cell in Design view. If you select all the text to be replaced, Dreamweaver also selects the CSS styles or <font> tag that holds the attributes and replaces those as well; instead of applying the CSS style to the <td> tag, however, it wraps the text in a similarly styled <span> tag. The workaround for HTML-formatted text is to select and copy the source text as usual, and then select all but one letter or word in the destination cell, paste the contents, and delete the extra text. With CSS, cut and paste the entire text and then right-click (Control+click) the <span> tag in the Tag Selector and choose Remove Tag.

Inserting Table Content

In this Technique, you begin inserting content into the table so you can see first-hand how table cells react to text and images.

1. From the Files panel, open the previously saved table_start.htm file.

2. Enter the following content in the top table:

   Founded	1995
   Headquarters	New York, NY
   Agents	35

   Notice that as you enter content, the width of the table cells changes to accommodate the text; you can refresh the table at any time by clicking outside of it. The entries in the first column are automatically bolded and centered because they are table header or <th> tags.

3. Enter the following content in the bottom table, leaving the first column blank:

   Leading Agents	Specialty	Contact
   Paul Thrasher	Rentals	[email protected]
   Lydia Catch	Houses	[email protected]
   Frank Gordon	Co-ops	[email protected]

4. Place your cursor in the blank cell of the first column, second row and choose Image from the Common category of the Insert panel.

5. When the Select Image Source dialog box opens, navigate to the images folder in the root of the Techniques site and select paul_thrasher.jpg.

6. Repeat Steps 4 and 5 for the next two cells, inserting lydia_catch.jpg and frank_gordon.jpg respectively.

7. Save your page.

The table grows to compensate for the size of the images. In the next Technique, you adjust the table's properties to achieve a different look and feel.

Aligning a table in Dreamweaver goes beyond the expected left, right, and center options. You can also make a table into a free-floating object, around which you can wrap text — to the left or right.

Figure 12-7 illustrates some of the different results you can get from aligning your table.

Figure 12-7. Tables can be centered, as well as aligned left or right — with or without text wrapping.

Because the <table> tag is a block element, CSS can be used to float the table on the page to the left or right. Subsequent text wraps around the table to one side or the other. Although Dreamweaver lets you align the table left or right from the Property inspector to achieve a similar effect in older browsers, the align attribute in tables has been deprecated.

To align the table without allowing text to wrap, you need to put the table within a <div> tag and set the <div> tag's align style to left, right, or center values with CSS. Although you may be tempted to use the <div> tag's align attribute, that attribute also has been deprecated.

.centerDiv {
   text-align: center;
}
.centerDiv table {
   margin-right: auto;
   margin-left: auto;
   text-align: left;
}

The primary sizing control on the Table Property inspector is the W (Width) text box. You can assign a new width for the entire table in either a screen percentage or pixels. Just enter your value in the W text box and then select % or Pixels in the drop-down list of options.

Dreamweaver also provides a quick and intuitive way to resize the overall table width, and the column widths. Pass your pointer over any of the table's borders, and the pointer becomes a two-headed arrow; this is the resizing pointer. When you see the resizing pointer, you can click and drag any border to new dimensions.

As noted earlier, tables are initially sized according to their contents. After you move a table border in Dreamweaver, however, the new sizes are written directly into the HTML code, and the column width is adjusted — unless the contents cannot fit. If, for example, an inserted image is 115 pixels wide and the cell has a width of only 90 pixels, the cell expands to fit the image. The same is true if you try to fit an extremely long, unbroken text string, such as a complex URL, into a cell that's too narrow to hold it.

Changes to the width of a cell or column are shown in the <td> tags, as are changes to a row's width, using the width attribute. You can see these changes by selecting the table, cell, column, or row affected and looking at the W text box values.

For an overall view of what happens when you resize a cell, row, or column, it's best to look at the HTML. Here's the HTML for an empty table, resized:

<table border="1" width="70%">
  <tr>
    <td width="21%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
    <td width="45%">&nbsp;</td>
  </tr>
  <tr>
    <td width="21%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
    <td width="45%">&nbsp;</td>
  </tr>
  <tr>
    <td width="21%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
    <td width="45%">&nbsp;</td>
  </tr>
</table>

Notice how the width for both the cells and the entire table are expressed as percentages. If the table width were initially set at a pixel value, the cell widths would have been, too.

You can switch from percentages to pixels in all the table measurements, and even clear all the values at once, with the click of a button. Several measurement controls appear in the lower-left portion of the expanded Table Property inspector, as shown in Figure 12-8.

Figure 12-8. You can make table-wide changes with the control buttons in the Table Property inspector.

Table 12-2 shows the measurement controls provided in the Table Property inspector.

If you clear both row heights and column widths, the table goes back to its "grow as needed" format and, if empty, shrinks to its smallest possible size.

You can change the number of rows and columns in a table at any time. Dreamweaver provides a variety of methods for adding and removing rows and columns; you can either add them directly or by invoking a dialog box.

You have several options for adding a single row directly:

You have two ways to add a new column to your table directly:

You can add multiple rows and columns in either of the following ways:

The Insert Rows or Columns feature enables you to include any number of rows or columns anywhere relative to your current cursor position.

To add multiple columns using the Insert Rows or Columns dialog box, follow these steps:

The easiest way to delete a row or column is to select it and press the Delete key. You can also use the context menu to remove the current column or row by choosing Delete Column or Delete Row, respectively.

Alternatively, you can use the Table Property inspector to delete multiple columns and rows by reducing the numbers in the Cols or Rows text boxes. Columns are deleted from the right side of the table, and rows are removed from the bottom.

Borders are the solid outlines of the table itself. A border's width is measured in pixels; the default width is 1 pixel. You can alter this width in the Border field of the Table Property inspector.

To make the border invisible, specify a border of 0 width. You can still resize your table by clicking and dragging the borders, even when the border is set to 0. When the View

When the border is visible, you can also see each cell outlined. The width of the outline around the cells stays constant, regardless of the border's width. However, you can control the amount of space between each cell with the CellSpace value in the Table Property inspector, covered in the section "Working with cell spacing and cell padding" later in this chapter.

To change the width of a border in Dreamweaver, select your table and enter a new value in the Border text box. With a wider border, you can see the default shading: The top and left sides are a light shade, and the bottom and right sides are darker, giving the table border a pseudo-3D appearance. Figure 12-10 shows single-cell tables with borders of various widths, contrasting background attribute and CSS style usage as rendered in Live View.

Figure 12-10. Borders are far more flexible when applied with CSS.

In Dreamweaver, you can directly assign colors to the border. To choose a color for the border, select the Brdr color box or enter a color name or hexadecimal color value in the adjacent text box. Again, you get much greater control and standards compliance if you use CSS.

In addition to colored borders, a table can also have a colored background. (By default, the table is initially transparent.) Choose the background color in the Table Property inspector by selecting a color in the Bg color box or entering a color name or hexadecimal color value in the adjacent text box. As you learn later in this chapter, in "Setting cell, column, and row properties," you can also assign background colors to rows, columns, and individual cells — if used, these specific colors override the background color of the entire table.

HTML gives you two methods to add whitespace in tables. Cell spacing controls the width between each cell, and cell padding controls the margins within each cell. You can set these values independently through the Table Property inspector.

To change the amount of whitespace between each cell in a table, enter a new value in the CellSpace text box of the Table Property inspector. If you want to adjust the amount of whitespace between the borders of the cell and the actual cell data, alter the value in the CellPad text box of the Table Property inspector. Figure 12-11 shows an example of tables with wide (10 pixels) cell spacing and cell padding values (the shaded space is the actual cell size).

Figure 12-11. You can add additional whitespace between each cell (cell spacing) or within each cell (cell padding).

You have seen how cells in HTML tables can extend across (span) multiple columns or rows. By default, a cell spans one column or one row. Increasing a cell's span enables you to group any number of topics under one heading. You are effectively merging one cell with another to create a larger cell. Likewise, a cell can be split into multiple rows or columns.

Dreamweaver enables you to combine and divide cells in two different ways. If you're more comfortable with the concept of merging and splitting cells, you can use two handy buttons on the Property inspector. If, on the other hand, you prefer the older method of increasing and decreasing row or column span, you can still access these commands through the main menu and the context menus.

To combine two or more cells, first select the cells you want to merge. Then, from the Property inspector, click the Merge Cells button or press the keyboard shortcut, M. If the Merge button is not available, multiple cells have not been selected.

To divide a cell, follow these steps:

You can achieve the same effect by using the menus. To do so, first position the cursor in the cell to be affected and then choose one of the commands shown in Table 12-3 from the Modify

Existing text or images are put in the same cell if the cells containing them are joined to span rows or columns. Figure 12-13 shows a table containing both row and column spanning.

Figure 12-13. This spreadsheet-like report was built using Dreamweaver's row- and column-spanning features.

You can set the horizontal alignment attribute, align, to specify the default alignment, or left, right, or center alignment, for the contents of a cell, column, or row. This attribute can be overridden by setting the alignment for the individual line or image. Generally, left is the default horizontal alignment for cells.

The HTML valign attribute specifies whether the cell's contents are vertically aligned to the cell's top, middle, or bottom, or along the baseline. Typically, browsers align cells vertically in the middle by default. Select the Vertical Alignment option arrow in the Cell, Column, or Row Property inspector to specify a different alignment.

Top, middle, and bottom vertical alignments work pretty much as you would expect. A baseline vertical alignment displays text near the top of the cell and positions the text — regardless of font size — so that the baselines of all the text in the affected row, column, or cell are the same. Figure 12-14 illustrates how images and text of various sizes are displayed under the different vertical alignment options.

Figure 12-14. You can vertically align text and images in several arrangements in a table cell, row, or column.

Normal behavior for any cell is to automatically wrap text or a series of images within the cell's borders. You can turn off this automatic feature by selecting the No Wrap option in the Property inspector for the cell, column, or row.

You might use this option, for example, if you need three images to appear side by side in one cell. In analyzing the results, however, you might find that, on some lower-resolution browsers, the last image wraps to the next line.

Quite often in tables, a column or row functions as the heading for that section of the table, labeling all the information in that particular section. Dreamweaver has an option for designating these cells: the Header option. Table header cells are usually rendered in boldface and centered in each cell. Figure 12-15 shows an example of a table in which both the first row and first column are marked as table header cells.

Figure 12-15. Table header cells are a good way to note a category's labels — for a row, column, or both.

The gridlike structure of a table makes it impossible to resize only one cell in a multicolumn table. Therefore, the only way you can enter exact values for a cell's width is through the W text box available in the Column Property inspector. You can enter values in pixels or as a percentage of the table. The default enables cells to automatically resize with no restrictions outside of the overall dimensions of the table.

Similarly, whenever you change a cell's height, the entire row is altered. If you drag the row to a new height, the value is written into the H text box for all cells in the row. On the other hand, if you specify a single cell's height, the row resizes, but you can see the value only in the cell you've changed. If different cells in the same row are assigned different heights, the row is sized to the tallest height.

Just as you can specify color backgrounds and borders for the overall table, you can do the same for columns, rows, or individual cells. Corresponding color swatches and text boxes are available in the Property inspector for the following:

As with all Dreamweaver color pickers, you can use the Eyedropper tool to select a color from the Web-safe palette or from any item on a page. You can also click the Default color button to delete any previously selected color. Finally, click the System Color Picker button to open the Color dialog box and select any available color.