CHAPTER 2 WORKING WITH TABLES

Presenting Content with Tables

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver allows you to manipulate columns as well as rows and cells.

After you create a table you can easily modify both its appearance and structure. You can do any of the following:

• Add content
• Add, delete, split, and merge rows and columns
• Modify table, row, or cell properties to add color and alignment
• Copy and paste cells

Note: Many designers use tables to lay out web pages. Dreamweaver provides two ways to view and manipulate tables: Standard view, in which tables are presented as a grid of rows and columns, and Layout view, which allows you to draw, resize, and move boxes on the page while still using tables for the underlying structure (see Laying Out Pages in Layout View).

This chapter contains these sections:

• Inserting a table
• Adding content to a table cell
• Importing tabular data
• Selecting table elements
• Formatting tables and cells
• Resizing tables
• Changing column widths and row heights
• Adding and removing rows and columns
• Nesting tables
• Cutting, copying, and pasting cells
• Sorting tables
• Exporting table data
• Reference

LESSON Inserting a table

Use the Insert bar or the Insert menu to create a new table. For information on creating accessible tables in Dreamweaver, see Authoring for accessibility.

To insert a table:

1. In the Design view of the Document window, place the insertion point where you want the table to appear.

Note: If your document contains no content, then the only place you can place the insertion point is at the beginning of the document.

2. Do one of the following:
• Click the Table button in the Common category of the Insert bar.
• Choose Insert > Table.

The Insert Table dialog box appears.

3. Enter new values as desired.

For more information, see Setting the Insert Table dialog box options.

LESSON Adding content to a table cell

You can add text and images to table cells the same way that you add text and images outside of a table.

For more information, see Inserting and Formatting Text and Inserting Images.

When you add or edit content in your table, you can save time by using the keyboard to navigate the table.

To move from one cell to another using the keyboard, do any of the following:

• Press Tab to move to the next cell.

Pressing Tab in the last cell of a table automatically adds another row to the table.

• Press Shift+Tab to move to the previous cell.
• Press the arrow keys to move up, down, left, or right.

LESSON Importing tabular data

Tabular data that has been created in another application (such as Microsoft Excel) and saved in a delimited text format (with items separated by tabs, commas, colons, semicolons, or other delimiters) can be imported into Dreamweaver and formatted as a table.

To import table data:

1. Do one of the following:
• Choose File > Import > Tabular Data.
• Choose Insert > Table Objects > Import Tabular Data.

The Import Tabular Data dialog box appears.

2. In the dialog box, enter information about the file containing your data.

For more information, see Setting the Import Tabular Data dialog box options.

Related topic

Displaying Database Records

LESSON Selecting table elements

You can select an entire table, row, or column at once. You can also select a contiguous block of cells within a table. After you’ve selected a table or cells, you can do the following:

• Modify the appearance of selected cells or of the text contained in them. See Formatting tables and cells.
• Copy and paste cells. See Cutting, copying, and pasting cells.

You can also select multiple nonadjacent cells in a table and modify the properties of those cells. You cannot copy or paste sets of nonadjacent cells.

To select an entire table, do one of the following:

• Click the upper left corner of the table or click anywhere on the right or bottom edge.
• Click in a table cell, and then select the table tag in the tag selector at the lower left corner of the Document window.
• Click in a table cell, and then choose Modify > Table > Select Table.
• Click in a table cell, and then select the table tag in the Tag Inspector.

Selection handles appear on the selected table’s lower and right edges.

To select rows or columns:

1. Position the pointer to point to the left edge of a row or the top edge of a column.
2. When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or columns.
   

To select a single cell, do one of the following:

• Click in the cell, and then select the td tag in the tag selector at the lower left corner of the Document window.
• Click in the cell, and then choose Edit > Select All.

Tip: Choose Edit > Select All again when a cell is selected to select the entire table.

• Click in a table cell, and then select the td tag in the Tag Inspector.

To select a line or a rectangular block of cells, do one of the following:

• Drag from a cell to another cell.
• Click in one cell, and then Shift-click another cell.

All of the cells within the linear or rectangular region defined by the two cells are selected.

To select nonadjacent cells:

Control-click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select.

If each cell, row, or column you Control-click or Command-click isn’t already selected, it’s added to the selection. If it is already selected, it’s removed from the selection.

Formatting tables and cells

You can change the appearance of tables by setting properties for the table and its cells or by applying a preset design to the table. See Viewing and setting table properties, Viewing and setting cell, row, and column properties, and Using a design scheme to format a table.

To format text in tables, you can apply formatting to selected text or use styles. See Inserting and Formatting Text.

About conflicts in table formatting

When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting.

The order of precedence for table formatting is:

1. Cells
2. Rows
3. Table

For example, if you set the background color for a single cell to blue, and then set the background color of the entire table to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.

Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column.

LESSON Viewing and setting table properties

When a table is selected, the Property inspector lets you view and change table properties.

To view table properties:

1. Select the table.
2. Choose Window > Properties to open the Property inspector.

To view all table properties:

If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.

To format a table in the Property inspector:

1. Select a table. For more information, see Selecting table elements.
2. Choose Window > Properties to open the Property inspector.
3. Change the table’s formatting by setting properties.

For more information, see Setting table properties.

Related topic

Using a design scheme to format a table

LESSON Viewing and setting cell, row, and column properties

When a cell or a set of cells is selected, the Property inspector allows you to view and change the cell properties.

Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag rather than changing the attributes of each td tag in the row, When you’re applying the same format to all the cells in a row, applying the format to the tr tag produces cleaner, more concise HTML code.

To view table-element properties:

1. Select a cell or a set of cells in a row or column.
2. Choose Window > Properties to open the Property inspector.

To view all cell, row, or column properties:

If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.

To format table elements in the Property inspector:

1. Select a cell, a row, or a column. For more information, see Selecting table elements.
2. Choose Window > Properties to open the Property inspector.
3. Change the table element’s formatting by setting properties.

For more information, see Setting cell, row, and column properties.

Related topic

Selecting table elements

LESSON Using a design scheme to format a table

Use the Format Table command to quickly apply a preset design to a table. You can then select options to further customize the design.

Note: Only simple tables can be formatted using preset designs. You can’t use these designs to format tables that contain merged cells (colspan or rowspan), column groups, or other unusual formatting that keeps the table from being a simple rectangular grid of cells.

To use a preset table design:

1. Select a table, and then choose Commands > Format Table.

The Format Table dialog box appears.

2. Customize options as desired.

For more information, see Setting the Format Table dialog box options.

3. Click Apply or OK to format your table with the selected design.

LESSON Resizing tables

You can resize an entire table or individual rows and columns. When you resize an entire table, all of the cells in the table change size proportionately.

Note: If a table’s cells have explicit widths or heights specified, resizing the table changes the visual size of the cells in the Document window but does not change the specified widths and heights of the cells.

To resize a table:

1. Select the table.
2. Do one of the following:
• To resize the table horizontally, drag the selection handle on the right.
• To resize the table vertically, drag the selection handle on the bottom.
• To resize in both dimensions, drag the selection handle at the lower right corner.

Related topics

Selecting table elements

Changing column widths and row heights

Changing column widths and row heights

You can change the width of a column or the height of a row by using the Property inspector or by dragging the borders of the column or row. You can also change cell widths and heights directly in the HTML code using Code view.

If you have trouble resizing, you can clear the column widths or row heights and start over.

Tip: You can specify widths and heights as either pixels or percentages, and you can convert from pixels to percentages and back. For more information, see Viewing and setting table properties.

To resize a column or a row visually, do one of the following:

• To change a column’s width, select the column, and then drag the right border of the column.

If the column is not the rightmost column of the table, the adjacent column’s width also changes, keeping the same overall table width. If the column is the rightmost column, the whole table’s width changes, and all of the columns grow wider or narrow proportionately.

• To change a row’s height, select the row, and then drag the lower border of the row.

To set a column’s width or a row’s height using the Property inspector:

1. Select the column or row.
2. Choose Window > Properties to open the Property inspector.
3. Change the table element’s formatting by setting properties.

For more information, see Setting cell, row, and column properties.

To clear all set widths or heights:

1. Select the table.
2. Do one of the following:
• To clear all specified widths, choose Modify > Table > Clear Cell Widths or click the Clear Column Widths button in the Property inspector.
  
• To clear all specified heights, choose Modify > Table > Clear Cell Heights or click the Clear Row Heights button in the Property inspector.
  

Related topics

Selecting table elements

Resizing tables

Coding in Dreamweaver

LESSON Adding and removing rows and columns

To add and remove rows and columns, use the commands in the Modify > Table submenu.

Tip: Pressing Tab in the last cell of a table automatically adds another row to the table.

To add rows or columns:

1. Click in a cell.
2. Do one of the following:
• To add a row above the current cell, choose Modify > Table > Insert Row.
• To add a column to the left of the current cell, choose Modify > Table > Insert Column.
• To add multiple rows or columns at once, or to add a row below the current cell or a column to the right of it, choose Modify > Table > Insert Rows or Columns.

The Insert Rows or Columns dialog box appears.

3. If you chose Insert Rows or Columns, enter the necessary information in the dialog box, then click OK.

For more information, see Setting the Insert Rows or Columns dialog box options.

To delete a row or column:

1. Click in a cell within the row or column you want to delete.
2. Do one of the following:
• To delete a row, choose Modify > Table > Delete Row.
• To delete a column, choose Modify > Table > Delete Column.

Tip: Alternatively, you can select a complete row or column and then choose Edit > Clear or press Delete; the entire row or column is removed from the table.

To add or delete rows or columns using the Property inspector:

1. Select the entire table.
2. In the Property inspector, do one of the following:
• Increase or decrease the Rows value to add or delete rows.

Dreamweaver adds and removes rows at the bottom of the table.

• Increase or decrease the Cols value to add or delete columns.

Dreamweaver adds and removes columns at the right side of the table.

Note: Dreamweaver does not warn you if you are deleting rows and columns that contain data.

Related topics

Selecting table elements

Inserting a repeating table

Displaying multiple behaviors

LESSON Splitting and merging cells

Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells. You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary COLSPAN or ROWSPAN attributes) to create the specified arrangement.

In the following illustration, the cells in the middle of the first two rows have been merged so that they span two rows.

As an alternative approach to merging and splitting cells, Dreamweaver also provides tools for increasing and decreasing the number of rows or columns spanned by a cell.

To merge two or more cells in a table:

1. Select the cells. The selected cells must be contiguous and in the shape of a rectangle.

In the following illustration, the selection is a rectangle of cells, so the cells can be merged.

In the following illustration, the selection is not a rectangle, so the cells can’t be merged.

2. Choose Modify > Table > Merge Cells, or click the Merge Cells button in the Property inspector.

The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell.

To split a cell:

1. Click in the cell.
2. Choose Modify > Table > Split Cell, or click the Split Cell button in the Property inspector.
3. In the Split Cell dialog box, specify how to split the cell.

For more information, see Setting the Split Cell dialog box options.

To increase or decrease the number of rows or columns spanned by a cell:

1. Select a cell.
2. Choose Modify > Table > Increase Row Span or Modify > Table > Increase Column Span or Modify > Table > Decrease Row Span or Modify > Table > Decrease Column Span.

LESSON Nesting tables

A nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears.

To nest a table within a table cell:

1. Click in a cell of the existing table.
2. Choose Insert > Table.
3. In the Insert Table dialog box, specify the desired properties for the nested table, then click OK.

LESSON Cutting, copying, and pasting cells

You can cut, copy, or paste a single table cell or multiple cells at once, preserving the cells’ formatting.

You can paste cells at the insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the cells will be pasted.

To cut or copy table cells:

1. Select one or more cells in the table. The selected cells must be contiguous and in the shape of a rectangle.

In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied.

In the following illustration, the selection is not a rectangle, so the cells can’t be cut or copied.

2. Cut or copy the cells using Edit > Cut or Edit > Copy.

If you selected an entire row or column and you choose Edit > Cut, the entire row or column is removed from the table (not just the contents of the cells).

To paste table cells:

1. Choose where you want to paste the cells.
• To replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells on the clipboard. For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2 block of cells to replace by pasting.
• To paste a full row of cells above a particular cell, click in that cell.
• To paste a full column of cells to the left of a particular cell, click in that cell.
• To create a new table with the pasted cells, place the insertion point outside of the table.

Note: If you have less than a full row or column of cells in the clipboard, and you click in a cell and then paste the cells from the clipboard, the cell you clicked in and its neighbors may (depending on its location in the table) be replaced with the cells you are pasting.

2. Choose Edit > Paste.

If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced. If you are pasting outside a table, the rows, columns, or cells are used to define a new table.

To remove cell content but leave the cells intact:

1. Select one or more cells. (Make sure the selection does not consist entirely of complete rows or columns.)
2. Choose Edit > Clear or press Delete.

Note: If only complete rows or columns are selected when you choose Edit > Clear or press Delete, the entire rows or columns—not just their contents—are removed from the table.

To delete rows or columns that contain merged cells:

1. Select the row or column to be deleted.
2. Choose Modify > Table > Delete Row or Modify > Table > Delete Column.

LESSON Sorting tables

You can sort the rows of a table based on the contents of a single column. You can also perform a more complicated table sort based on the contents of two columns.

You cannot sort tables that contain COLSPAN or ROWSPAN attributes—that is, tables that contain merged cells. (For more information, see Splitting and merging cells.)

To sort a table:

1. Select the table (or click in any cell).
2. Choose Commands > Sort Table.

The Sort Table dialog box appears.

3. In the Sort Table dialog box, specify how to sort the table.

For more information, see Setting the Sort Table dialog box options.