503
Chapter 11: Using Behaviors
2. Select the object in the Document window or the tag in the Tag Selector to which your
behavior is attached.

3. Double-click the action that you want to alter. The appropriate dialog box opens, with
the previously selected parameters.

4. Make any modifications to the existing settings for the action.

5. Click OK when you are finished.
Sequencing behaviors
When you have more than one action attached to a particular event, the order of the actions is
often important. For example, you should generally implement the Go to Timeline Frame action
ahead of the Play Timeline action to make sure the timeline is playing from the correct frame. To
specify the sequence in which Dreamweaver triggers the actions, reposition them as necessary in
the Actions column. To do this, simply select an action and use the up and down arrow buttons
(refer to Figure 11-1) to reposition it in the list.
Deleting behaviors
To remove a behavior from a list of behaviors attached to a particular event, simply highlight the
behavior and click the Remove (–) button.
Modifying Behaviors
To further reveal the power of Dreamweaver’s standard behaviors, add another series of behaviors to your
practice page. In the process, you’ll get a chance to adjust attributes of an applied behavior.
1. From the Files panel, re-open the behaviors_start.htm file you previously worked upon.

2. Place your cursor anywhere in the Living Room link.

3. From the Behaviors panel, click Add (+) and select Open Browser Window.

4. In the Open Browser Window dialog, set the following parameters:

Click the Browse button and choose
L
living_room.htm from the dialog box.
In the Window Width field, enter
L
200.
In the Window Height field, enter
L
100.
Select the Resize Handles option.
L
continued

504
Part III: Adding Advanced Design Features
5. Click OK when you’re done.
A second behavior is added to the link in the Behaviors panel, with the default event of onClick.

6. Save your file and press F12 (Option+F12) to preview the page in your primary browser.

7. Click the Living Room link to test the behavior.

8. You’ll notice that the window height is too small for the text; you can easily make the adjustment.
In Dreamweaver’s Behaviors panel, double-click the Open Browser Window event to re-open the
dialog box.

9. Change the Window Height value to 150; click OK when you’re done.

10. To verify that the change is sufficient, test the page in the browser as before.


11. In Dreamweaver, repeat Steps 2–5 for the Kitchen North link and set the Browser Window behavior
to open kitchen.htm with a width of 200 pixels and height of 150 pixels.

12. Repeat Steps 2–5 for the Kitchen South link and again set the Browser Window behavior to open
kitchen.htm with a width of 200 pixels and height of 150 pixels.
13. Save your page.
Test your page in the browser to verify that all the windows open as expected.
continued

505
Chapter 11: Using Behaviors
Summary
Dreamweaver behaviors can greatly extend the Web designer’s palette of possibilities — even if
the Web designer is an accomplished JavaScript programmer. Behaviors simplify and automate the
process of incorporating common and not-so-common JavaScript functions. The versatility of
the behavior format enables anyone proficient in JavaScript to create custom actions that can be
attached to any event. When considering behaviors, keep the following points in mind:
Behaviors are combinations of events and actions.
L
Behaviors are written in HTML and JavaScript and are completely customizable from
L
within Dreamweaver.
Different browsers support different events. Dreamweaver enables you to select a spe-
L
cific browser or a specification, such as HTML 4.01, on which to base your event choice.
Dreamweaver includes 25 standard actions. Some actions are not available unless a par-
L
ticular object is included, and selected, on the current page.
In the next chapter, you learn how to work with tables and structured data.



507
Setting Up Tables
IN THIS CHAPTER
Learning about tables in HTML
Setting up a table in
Dreamweaver
Dreamweaver Technique:
Adding a Table to the Page
Customizing tables
Sorting table contents
Dreamweaver Technique:
Inserting Table Content
Dreamweaver Technique:
Adjusting Table Properties
Importing tabular data
T
ables bring structure to a Web page, and they are especially impor-
tant when displaying data for Web applications. Whether it is used
to align numbers in a spreadsheet or arrange columns of infor-
mation on a page, an HTML table brings a bit of order to otherwise free-
flowing content. Tables are the preferred method for presenting structured
information.
Dreamweaver’s implementation of tables reflects this trend in Web page
design. Drag-and-drop table sizing, easy organization of rows and columns,
and instant table reformatting all help get the job done in the shortest
time possible. Table editing features enable you to select and modify any-
thing in a table — from a single cell to multiple columns. Moreover, using
Dreamweaver’s commands, you can sort static table data in a variety of
ways or completely reformat it.

Cross-Reference
This chapter covers everything you need to know to get started creating
HTML tables in Dreamweaver. You can also dynamically add data to tables
from an external data source using server-side processing. Using dynamic
data is covered in Chapter 19.
n

508
Part III: Adding Advanced Design Features

If you’re familiar with HTML tables and just want to know how to add a table in Dreamweaver, follow
these steps:
1. Place your cursor on the page where you’d like the table to appear.
2. From the Common category of the Insert panel, click Table.

3. When the Table dialog box appears, enter the number of rows and columns you want to start within
the appropriate fields.

4. Set the width of the table in pixels or percentage.

5. Specify any of the other parameters you want, such as border width, cell padding, cell spacing,
header placement, and caption.

6. Click OK.
Add content to the table by clicking into any cell and typing or inserting images or other
media. As you’ll learn in the rest of this chapter, there’s a lot you can do with tables, but
this should get you started.
HTML Table Fundamentals
A table is basically a grid that expands as you add text or images. Tables consist of three main
components: rows, columns, and cells. Rows extend across a table from left to right, and columns

run up and down. A cell is the area within the intersection of a row and a column; it’s where you
enter your information. Cells expand to fit whatever they hold. If you have enabled the table bor-
der, your browser shows the outline of the entire table and each cell.
In HTML, the structure and all the data of a table are contained between the table tag pair,
<table> and </table>. The <table> tag can take numerous attributes, determining a table’s

509
Chapter 12: Setting Up Tables
width (which can be given in absolute pixel measurement or as a percentage of the screen) as well
as the border, alignment on the page, and background color. You can also control the size of the
spacing between cells and the amount of padding within cells.
Note
You can insert a <table> . . . </table> pair directly in your code by choosing Insert ➪ Table Objects ➪
Table or by clicking the Table Tag button in the Tables category of the Insert panel. You must do this in Code
view, where you can see the exact location of your cursor before inserting the tag pair.
n
HTML uses a strict hierarchy when describing a table. You can see this clearly in Listing 12-1,
which shows the HTML generated from a simple table in Dreamweaver.
Listing12-1
Code for an HTML Table
<table border=”1” width=”75%”>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>

</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Note
The &nbsp; in the table code is HTML for a non-breaking space. Dreamweaver inserts this code in each
empty table cell because some browsers collapse the cell without it. Enter any text or image in the cell, and
Dreamweaver automatically removes the &nbsp; code.
n
Rows
After the opening <table> tag comes the first row tag <tr> . . . </tr> pair. Within the current
row, you can specify attributes for horizontal alignment or vertical alignment. In addition, brows-
ers recognize row color as an added option.

510
Part III: Adding Advanced Design Features
If you are working directly in Code view, you can insert a <tr> . . . </tr> pair by choosing
Insert ➪ Table Objects ➪ TR or by clicking the Table Row button in the Tables category of the
Insert panel. See “Inserting rows and columns” later in this chapter for methods of inserting rows
in Design view.
Cells
Cells are marked in HTML with the <td> . . . </td> tag pair. No specific code exists for a col-
umn; rather, the number of columns is determined by the maximum number of cells within a
single table row. For example, in Listing 12-1, notice the three sets of
<td> tags between each
<tr> pair. This means the table has three columns.
Note

Most <tr> attributes are better set up using CSS; attributes such as bgcolor were deprecated under HTML
4.0 and XHTML 1.0 specifications and have been removed from XHTML 1.1 entirely.
n
A cell can span more than one row or column — in these cases, you see a rowspan=value or
colspan=value attribute in the <td> tag, as illustrated in Listing 12-2. This code is also for a
table with three rows and three columns, but the second cell in the first row spans two columns.
Listing12-2
HTML Table with Column Spanning
<table width=”75%” border=”0”>
<tr>
<td>&nbsp;</td>
<td colspan=”2”>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Cells can also be given horizontal or vertical alignment attributes, which override any similar
attributes specified by the table row. When you give a cell a particular width, all the cells in that
column are affected. Width can be specified either in an absolute pixel measurement or as a per-
centage of the overall table.

511

Chapter 12: Setting Up Tables
Note
Again, modern Web designers prefer to use CSS rather than HTML attributes to format and style table cells.
Both the align and bgcolor attributes have been deprecated and recent browsers don’t support other attri-
butes such as height.
n
In Code view, you can insert a <td> . . . </td> pair to define a single table cell by choosing
Insert ➪ Table Objects ➪ TD or by clicking the Table Data button in the Tables category of
the Insert panel.
Column and row headings
HTML uses a special type of cell called a table header for column and row headings. Information
in these cells is marked with a
<th> tag and is generally rendered in boldface, centered within
the cell.
To insert a
<th> . . . </th> pair for a table heading cell, choose Insert ➪ Table Objects ➪ TH
or click the Table Heading button in the Tables category of the Insert panel. See the section
“Setting cell, column, and row properties” later in this chapter for another way to designate table
header cells.
Tip
After the initial <table> tag, you can place an optional caption for the table. In Dreamweaver, you can enter
the <caption> tag in the Code view or Code inspector by choosing Insert
➪ Table Objects ➪ Caption. From
Code view, you can also click the Table Caption button in the Tables category of the Insert panel.
The following example shows how the tag works:
<caption valign=”bottom”>Table of Periodic Elements</caption>
n
Inserting Tables in Dreamweaver
You can control almost all of a table’s HTML features through Dreamweaver’s point-and-click
interface. To insert a table in the current cursor position, use one of the following methods:

Choose Insert
L
➪ Table.
Click the Table button in either the Common or Layout category of the Insert panel.
L
Use the keyboard shortcut: Ctrl+Alt+T (Command+Option+T).
L
Depending on your preference settings, any one of these methods either immediately inserts a
table into your page or opens the Table dialog box. The dialog box is bypassed — and the pre-
vious settings used — if the Show Dialog When Inserting Objects option in Preferences is not
enabled. The Table dialog box, shown in Figure 12-1, contains the values shown in Table 12-1
when it is first displayed.

512
Part III: Adding Advanced Design Features
tabLe12-1
Default Values for the Table Dialog Box
Attribute Default Description
Rows 3 Sets the number of horizontal rows.
Columns 3 Sets the number of vertical columns.
Width 200 pixels Sets the preset width of the table. This can be specified as a percentage
of the containing element (screen, AP element, or another table) or an
absolute pixel size.
Border 1 pixel Sets the width of the border around each cell and the entire table.
Cell Padding 0 Sets the space between a cell’s border and its contents, measured in
pixels. A value of 0 indicates no margin space within the cell.
Cell Spacing 0 Sets the number of pixels between each cell. A value of 0 indicates no
space between cells.
Header None Determines whether the top row and/or column is designated as a
header cell. In addition to simply creating the header cell with <th>

tags instead of the usual <td>, this attribute adds the scope attribute
to the cell. The scope attribute helps nonvisual browsers interpret and
present the structure of the table, by indicating whether the cell is a
column heading or a row heading. In visual browsers, text in header
rows or columns is typically displayed as bold and centered.
Caption Blank Sets a brief description for the table.
Align
Caption
default Enables you to specify whether the table caption appears at the top,
bottom, left, or right of the table. Choosing default does not add an
align attribute to the <caption> tag and uses the browser’s default
alignment instead. Note that the align attribute on the <caption>
tag is deprecated in HTML 4.0. This means that, although the attribute
is still currently supported, the preferred method to achieve the same
effect in newer browsers is to use CSS.
Summary Blank
Enables you to add the summary attribute to your <table> tag. The
summary is a verbal description of the table layout, so that people who
are having the page read to them (for example, through a nonvisual
browser) can understand it. For example, your summary could say,
“This table compares the number of students and teachers in each
Minnesota secondary school for the years 1997 through 2002. It lists
each school in Minnesota, grouped by school district. For each of the
years 1997 through 2002, there are columns for the number of students
and number of teachers in each school.” This is particularly important
for complex tables. The text you enter for the summary is not displayed
in visual browsers.

513
Chapter 12: Setting Up Tables

If you aren’t sure of the number of rows and/or columns you need, put in your best guess — you
can add or delete rows or columns later as necessary.
The default table is sized to take up 200 pixels of the browser window. You can alter this percent-
age by changing the value in the Width text box. The table maintains this proportion as you add
text or images, except in the following situations:
When an image is larger than the specified percentage
L
When the
L
nowrap attribute is used for the cell or table row and there is too much text
to fit
In either case, the percentage set for the table is ignored, and the cell and table expand to accom-
modate the text or image. (For further information on the
nowrap attribute, see the “Cell wrap”
section later in this chapter.)
Figure12-1
The Table dialog box starts out with a default table of three columns and three rows; you can adjust it as
needed and Dreamweaver will remember your last choices.
Note
The Table dialog box uses what are called sticky settings, displaying your previously used settings the next
time you open the dialog box. This handy feature enables you to set the border width to 0, for example, and
forget about resetting it each time.
n
If you prefer to enter the table width as an absolute pixel value, instead of the relative percentage,
type the number of pixels in the Width text box and select Pixels in the drop-down list of width
options.

514
Part III: Adding Advanced Design Features
With Dreamweaver’s Table Widths feature, you can tell at a glance whether your table and cells

are set to percentages or pixels — and exactly what these values are. The Table Widths feature
is a design-time visual aid that appears above or below (depending on its position in the win-
dow) a table when one or more table cells are active. The widths are presented in two lines: the
outermost line shows the width of the entire table, and the innermost line displays cell-width
measurements.
With the Table Widths feature enabled, tables or cells using percentages actually display two
values. The first value shown is the actual percentage; it is followed by a second value in paren-
theses that indicates the current size in pixels. For example, if a table is set to 75% and placed in
a browser window where the interior screen width is 970 pixels, the actual width of the table is
693 pixels. Dreamweaver displays 75% (693), as shown in Figure 12-2. The same figure shows
two other tables: one at 100%, which takes up the full width of the browser window, minus any
margins. The third table is fixed at 400 pixels — approximately half of an 800 × 600 window.
Figure12-2
In addition to displaying overall table and column widths, the Table Width visual aid provides a quick
method for working with columns.
Although viewing Table Widths definitely helps with certain stages of the design process, it can
impede others. To turn off the dimensioning, deselect View ➪ Visual Aids ➪ Table Widths; the
same option exists under the View Options menu of the Document toolbar.

515
Chapter 12: Setting Up Tables
Tip
You don’t have to declare a width for your table at all. If you delete the value in the Width text box of the
Table dialog box, your table starts out as small as possible and only expands to accommodate inserted text or
images. However, this can make it difficult to position your cursor inside a cell to enter content — a situation
Expanded Tables mode (covered later in this chapter) is intended to alleviate.
n
The Table Widths feature also offers a number of context menus to make table operations even eas-
ier. Click the down arrow next to the table width measurement to select the table, clear all heights
and/or widths, make all widths consistent, or hide the table widths. Choose the down arrow over a

column to select that column, clear the column width, or insert columns to either side.
AddingaTabletothePage
In this first Technique of the chapter, you practice inserting two tables and setting their initial values.
1. In the Files panel, switch to the Dreamweaver Bible working site previously created.

2. Expand the 13_Tables folder and open the file table_start.htm.

3. Place your cursor at the end of the first paragraph under the About Us heading and press Enter
(Return) to create a new line.

4. From the Insert panel’s Common category, click the Table object.

5. When the Insert Table dialog box opens, set the following parameters:
Rows: 4
Columns: 2
Table Width: 500 pixels
Border Thickness: 0
continued

516
Part III: Adding Advanced Design Features
6. Leave both the Cell Padding and Cell Spacing fields blank.

7. In the Header area, select Left.

8. Leave all the fields in the Accessibility area at their defaults and click OK.
The first table is inserted at the cursor position, ready for data. Now, add a second table near the bottom
of the page.
1. Place your cursor at the end of the paragraph under the Our Top Staff heading and press Enter
(Return).


2. Click the Table object on the Insert panel.

3. When the Insert Table dialog box opens, set the following parameters:
Rows: 4
Columns: 4
Table width: 75 percent
Border Thickness: 0

4. Leave both the Cell Padding and Cell Spacing fields blank.

5. In the Header area, select Top.

6. Leave all the fields in the Accessibility area at their defaults and click OK.

7. Save your page.
In the next Techniques, you continue working with these practice tables, adding content and
changing their structure.
Modifying Tables
Most modifications to tables start in the Property inspector. Dreamweaver helps you manage the
basic table parameters — width, border, and alignment — and provides attributes for other use-
ful but more arcane features of a table. These include converting table width from pixels to per-
centage of the screen, and vice versa.
Selecting table elements
As with text or images, the first step in altering a table (or any of its elements) is selection.
Dreamweaver simplifies the selection process, making it easy to change both the properties and
the contents of entire tables, selected rows or columns, and even non-adjacent cells. You can
change the vertical alignment of a row, for example, with a click or two of the mouse — instead
of highlighting and modifying each individual cell.
continued


517
Chapter 12: Setting Up Tables
Note
All the following discussions about table selections pertain only to Standard mode; they are not applicable in
Layout mode.
n
In Dreamweaver, you can select the following elements of a table:
The entire table
L
A single row
L
Multiple rows, either adjacent or separate
L
A single column
L
Multiple columns, either adjacent or separate
L
A single cell
L
Multiple cells, either adjacent or separate
L
After you select a table element, you can modify its properties.
Selecting in Expanded Tables mode
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 ➪ Table Mode ➪ Expanded Tables Mode or use

the keyboard shortcut F6 (Option+F6). You can also easily switch between it and the two other
Dreamweaver modes (Standard and Layout) by selecting buttons found on the Layout category
of the Insert panel. An indicator bar appears on top of the document window when you enter
Expanded Tables mode.
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.
Tip
You don’t need to be in Expanded Tables mode to see the table outlines. If the Mouse-Over option is enabled,
the outlines appear when you’re in Standard mode when you hold down the Ctrl (Command) key and move
over the table.
n
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).

518
Part III: Adding Advanced Design Features
Selecting an entire table
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:
With the cursor positioned in the tables, choose Modify
L
➪ Table ➪ Select Table.
With any table row already selected, choose Edit
L
➪ Select Parent Tag or use the key-

board shortcut, Ctrl+[ (Command+[).
Right-click (Control+click) inside a table to display the context menu and choose
L
Table ➪ Select Table.
To select an entire table with the mouse, use one of the following techniques:
Click the bottom or right border of the table. You can also click anywhere along the
L
table border when the pointer becomes a four-sided arrow.
Select the
L
<table> tag in the Tag Selector.
Click immediately to one side of the table and drag the mouse over the table.
L
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.
Selecting a row or column
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 intui-
tive 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 tech-
niques, 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

519

Chapter 12: Setting Up Tables
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 bor-
der. 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.
Tip
If you have trouble positioning the mouse so that the single-arrow pointer appears, you can use two other
methods to select columns or rows. In the first method, you click and drag across all the cells in a column or
row. The second method uses another keyboard modifier, the Shift key. With this technique, click once in the
first cell of the column or row. Then, hold down the Shift key while you click in the final cell of the column
or row (in Mac OS X, you must perform two single-clicks in the final cell). You can also use this technique to
select multiple adjacent columns or rows; just click in the last cell of another column or row.
n
Selecting cells
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 boundar-
ies. 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.
Tip
You can also select a single cell by pressing the Ctrl (Command) key and clicking once in the cell, or you can

select the rightmost <td> tag in the Tag Selector.
n
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.

520
Part III: Adding Advanced Design Features
Tip
If you Ctrl+click (Command+click) a cell that is already selected, that cell is deselected — regardless of the
method you used to select the cell initially.
n
Editing a table’s contents
Before you learn how to change a table’s attributes, let’s look at basic editing techniques. Editing
table text in Dreamweaver is slightly different from editing text outside of tables. When you begin
to enter text into a table cell, the table borders expand to accommodate your new data, assuming
no width has been set. The other cells appear to shrink; but they, too, expand after you start typ-
ing in text or inserting an image. Unless a cell’s width is specified, the cell currently being edited
expands or contracts, and the other cells are forced to adjust their width. Figure 12-4 shows a
table (with one row and three columns) in three different states. In the top table, only the first
cell contains text; notice how the other cells have contracted. In the middle table, text has been
entered into the second cell as well, and you can see how the first cell is now smaller. Finally, in
the bottom table, all three cells contain text, and the other two cells have adjusted their width to
compensate for the expanding third cell.

Figure12-4
As text is entered into a cell, the cell expands and other cells contract, even if they already contain text.

521
Chapter 12: Setting Up Tables
If you look closely at the middle table in Figure 12-4, you can see that the text doesn’t line up
vertically. That’s because the default vertical alignment in Dreamweaver, as in most browsers,
provides for entries to be positioned in the middle of the cell. (Later in this section, you learn
how to adjust the vertical alignment.)
Cross-Reference
The expandability of table cells is very significant when you are inserting information from a data source
because the data is often of varying length. See Chapter 21 for details about how to use Dreamweaver’s Live
Data view to check your layout.
n
Moving through a table
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.
Tip
Pressing Tab has a special function when you’re in the last cell of a table — it adds a new row, with the same
column configuration as the current one.
n
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.
Tip
To enter a table without using the mouse, position the cursor directly before the table, press Shift+right
arrow to select the table, and then press the down arrow key to move into the first cell. To move out of a table
without using the mouse, move the cursor to the first or last cell in the table, press Ctrl+A (Command+A) to
select the cell, and then press the left arrow if the cursor is in the first table cell, or the right arrow if the cur-
sor is in the last cell. Alternatively, press Ctrl+A (Command+A) twice to select the entire table and then use
either the left or right arrow to exit the table.
n
Cutting, copying, and pasting in tables
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

522
Part III: Adding Advanced Design Features
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 ➪ Copy or use the keyboard shortcut, Ctrl+C (Command+C).

3. To cut cells, choose Edit ➪ Cut or use the keyboard shortcut, Ctrl+X (Command+X). If
you cut an individual cell, the contents are removed, but the cell remains. If, however, you
cut an entire row or column, the cells are removed.

523
Chapter 12: Setting Up Tables
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
L
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 imme-
L
diately 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
L
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
L
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
L
table.

5. Paste the copied or cut cells by choosing Edit ➪ Paste or pressing Ctrl+V (Command+V).
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
➪
Table
➪ Select Table or by using one of the other techniques previously described. Next, in the Table Property
inspector, increase the number of rows or columns by altering the values in the Rows or Cols text boxes.
Finally, select the newly added rows or columns and choose Edit
➪ Paste.
n
Copying contents only
You often need to move data from one cell to another, while keeping the destination cell’s attri-
butes, 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 ➪ Paste, choose Edit ➪ Paste Special or use the keyboard shortcut Ctrl+Shift+V
(Command+Shift+V). Once the Paste Special dialog box opens, choose the Text Only option and
click OK. Unlike copying both contents and attributes, as described in the previous section,
content-only copying has a couple of limitations:
You can copy the contents only one cell at a time, and you can paste those contents into
L

only one cell at a time.
You can’t replace the entire contents of one cell with another and maintain all the text
L
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

524
Part III: Adding Advanced Design Features
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 automati-
cally 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
Lydia Catch Houses
Frank Gordon Co-ops

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.
Working with table properties
The <table> tag has a large number of attributes, and most of them can be modified through
Dreamweaver’s Property inspector. As with all objects, you must select the table before it can be
altered. Choose Modify ➪ Table ➪ Select Table or use one of the other selection techniques previ-
ously described.

525
Chapter 12: Setting Up Tables
After you’ve selected the table, the Property inspector presents the table properties, as shown in
Figure 12-6. If the inspector isn’t open, choose Window ➪ Properties.
Figure12-6
The expanded Table Property inspector gives you control over all the table-wide attributes.
Setting alignment
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.

526
Part III: Adding Advanced Design Features
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.
CenteringaTableinCSS
The align attribute in the <table> tag is deprecated in HTML 4.0, which means a newer, preferred
method of achieving the same effect is available. In this case, Cascading Style Sheets (CSS), covered in
Chapter 6, provide the preferred method of setting an object’s alignment. To center a table using CSS, you
need two CSS rules: one for the table itself and one for a
<div> surrounding the table. If, for example,
the
class of the div is centerDiv, the CSS rules look like this:
.centerDiv {
text-align: center;
}

.centerDiv table {
margin-right: auto;
margin-left: auto;
text-align: left;
}
Without the text-align: left attribute in the .centerDiv table rule, the text in the table is centered.
This approach works in all current browsers, in both strict and regular modes. (To find out more about
strict and regular modes, see Chapter 6.)
This CSS code is used later in this chapter in a Dreamweaver Technique.
Resizing a table
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.

527
Chapter 12: Setting Up Tables
As noted earlier, tables are initially sized according to their contents. After you move a table bor-
der 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.
Note
What about height? The height attribute for the <table> tag has been removed in HTML 4.0 and higher by
the W3C, and its further use is highly discouraged. Although rendered in Dreamweaver, the attribute no lon-
ger functions properly in most modern browsers, including Firefox, Safari, and Netscape 6.x. You’ll need to

use CSS (described in Chapter 6) to set the height and, preferably, the width.
n
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.