10. Inserting Tables

You will often use tables on Web pages to present tabular information—that is, data best presented in the form of rows and columns. You can also use tables for layout—that is, to align text and images on the page—but as you’ll see later in the chapter, in most cases you should be using CSS for layout instead.

In this chapter, you’ll learn how to create and format tables, ensure that tables and their content look the way you intend, work with Dreamweaver’s many table tools, and save time when you’re using tables.

Moving Away from Tables for Layout

One of the most widespread uses for a table is as a layout device (sometimes called layout tables). You can create tables on your page, then use the table cells to contain the text and images on the page. Because you have good control over the size of the cells and the position of their boundaries, you can line up and lay out elements on the page with precision, though it often requires some extremely complex tables. By hiding the borders of the table cells, the site visitor doesn’t notice the tables. This, up until the last few years, is how most nicely designed Web pages you’ve seen were created.

However, there are many problems with using tables for layout. First of all, the table has nothing to do with the content of the page (the information your visitor sees); all it does is affect the presentation of the content. One of the biggest benefits of CSS is that it separates content from presentation. As a result, you can completely redesign CSS-based sites largely by changing one file, the style sheet. If your presentation is mixed with your content, as it is with a table-based layout, it makes site redesigns difficult and expensive. Similarly, tables make it difficult to maintain visual consistency throughout a site (because the layout tables on different pages may not be the same).

So that’s what is wrong with tables from the standpoint of the Web designer, but there are problems for the site visitor, too. Tables make the size of an HTML page unnecessarily large (costing you extra bandwidth charges), and site visitors must download the layout tables on every page they visit in the site (ditto). Pages load more slowly than with a CSS-based layout, and slow page loads drive visitors away. Table-based pages are also much more difficult to read by users with disabilities and by visitors using cell phones and PDAs.

Tables were necessary for good-looking Web sites back in 1997, because the Web browsers of the day had many limitations, not the least of which was that none of them supported the then-emerging CSS standards for layout. But all modern browsers have reasonably good support for using CSS for layout (though ironically, the most widely used browser as of this writing, Microsoft Internet Explorer 6 for Windows, lags well behind other browsers such as Internet Explorer 7, Mozilla Firefox, Apple Safari, and Opera). The vast majority of users of the Web now use Web browsers that can handle CSS-based layouts just fine.

As a result, you can (and should!) use Dreamweaver to build great-looking, CSS-based sites that are faster to load, accessible for everyone, and easier for you to redesign and maintain. To learn more about laying out your pages with CSS, see Chapter 6.

Because table-based layout has been so pervasive for almost a decade, Dreamweaver still has tools that make it easy for you to create page layouts with tables. You’ll find more about those tools at the end of this chapter in the “Using Table Layout Mode” section. We’ve covered these tools for completeness, even though we don’t recommend that you use tables for layout. Also, we figure you may be coming here after reading some other books, which solely use the table-based layout method. If all you know is table-based layout, you might wonder why we didn’t cover it, so we have briefly done that to avoid confusion between books that use older layout methods and this book.

By the way, even with sites that use tables for layout, you can still use CSS to style the text inside the tables. Some CSS markup is devoted to styling text, and some is devoted to positioning elements on the page. You can use the styling kind of CSS to make your text look good, even inside a table. You just shouldn’t mix the positioning elements of CSS with tables; choose one method or the other for positioning elements on your pages.

Creating a Table

Tables typically consist of one or more rows and one or more columns. Each rectangular area at the intersection of a row and column is called a cell. Cells contain the page’s text or images, and items within a cell can’t extend past the cell’s boundaries.

You can insert a table anywhere on a page, even within another table (this is called nesting a table). By default, Dreamweaver creates tables with three rows and three columns, but you can easily change that format during the process of inserting the table. After you do make changes, Dreamweaver remembers them and uses them as the defaults for the next table you create.

To add a table to your page

1. Place the insertion point where you want the table to appear.

2. On the Layout tab of the Insert Bar, click the Table button (Figure 10.1).

Figure 10.1. You’ll use the Layout tab of the Insert Bar to add tables to your pages.

or

Choose Insert > Table, or press Ctrl-Alt-T (Cmd-Opt-T).

The Table dialog appears (Figure 10.2).

Figure 10.2. The Table dialog lets you get started building a table.

3. Enter the number of rows you want in the table, and press Tab.

4. Enter the number of columns you want in the table, and press Tab.

5. In the Table width text box, enter a number that will either be in pixels or a percentage of the page width, then choose the units from the pop-up menu to the right of the text box (Figure 10.3).

Figure 10.3. You can set the width of your table either in pixels or as a percentage of the browser page width.

6. Set one or more (or none) of the following (see the “Anatomy of a Table” sidebar for explanations of the settings):

• Enter a figure in the Border thickness text box to set the size of the border, in pixels, that will be displayed between cells.

• Enter a figure in the Cell padding text box to set the amount of space, in pixels, between the content in the cells and the cell border.

• Enter a figure in the Cell spacing text box to set the number of pixels of space between cells.

7. In the Header section, choose the kind of header you want: None, Left, Top, or Both. The icons for the headers tell you what each choice looks like.

8. (Optional, but recommended) In the Accessibility section, enter a caption for the table, then choose how you want the caption to be displayed by choosing from the Align caption pop-up menu. Your choices are Default, Top, Bottom, Left, or Right. Caption text appears in all browsers. If you enter text in the Summary text box, that text appears only in screen readers for the visually disabled.

9. Click OK.

The table appears in your page (Figure 10.4). When a table is selected, as in the figure, or when the insertion point is in a table cell, Dreamweaver shows green dimension lines above the table. The top line shows the width of the table in pixels. Each column also has a dimension line, which shows the width of the column in pixels if you have set a fixed width for the column. Columns with widths relative to the table width show dimension lines (so you can easily see each column) without pixel values. These dimension lines appear only in Dreamweaver’s Design view, not in a Web browser.

Figure 10.4. The green dimension lines tell you the width of the table in pixels. The dimension lines above each column do not show pixel widths in this figure because the columns are set to be a percentage of the table width.

Selecting Table Elements

To work effectively with a table, you’ll need to know how to select its elements. You can select an entire table; one or more rows and columns; an individual cell or multiple cells; and nonadjacent cells, rows, or columns.

To select the entire table

• Click the table’s upper-left corner.

or

Click the bottom or the right edge of the table.

or

Click in the table, and then choose Modify > Table > Select All.

A border with resize handles appears around the table (Figure 10.9). Dimension lines also appear.

Figure 10.9. You can tell this table is selected because it has a thick border around its edges with resize handles.

To select an entire row

1. Place the pointer at the left edge of a row.

The pointer becomes an arrow.

2. Click to select the entire row (Figure 10.10).

Figure 10.10. When you move the cursor to the left edge of a table and the pointer changes to an arrow, you can click to select the whole row.

You can click and drag to select multiple rows.

The cell borders for the selected row highlight.

To select an entire column

1. Place the pointer at the top edge of a column.

The pointer becomes an arrow.

2. Click to select the entire column (Figure 10.11).

Figure 10.11. The pointer also changes to an arrow above columns. Click to select the column.

You can click and drag to select multiple columns.

or

Click the triangle in the dimension line above any column to display a pop-up menu, then choose Select Column (Figure 10.12).

Figure 10.12. If you prefer, you can use the pop-up column menu to select the column.

The cell borders for the selected column highlight.

To select a single cell

• Click and drag in the cell.

or

Click in the cell, then choose Edit > Select All, or press Ctrl-A (Cmd-A).

or

If the cell is empty, triple-click inside the cell.

The cell highlights to show it has been selected.

To select multiple adjacent cells

• Click in the first cell you want to select, and drag to the last cell.

or

Click in the first cell you want to select, hold down Shift, and then click in the last cell. All the cells in between will also be selected. You can also Shift-click in this manner to select rows or columns.

To select nonadjacent cells

• Ctrl-click (Cmd-click) in the first cell, hold down Ctrl (Cmd), and then click the other cells you want to select (Figure 10.13). You can also Ctrl-click (Cmd-click) to select nonadjacent rows or columns.

Figure 10.13. By Ctrl-clicking (Cmd-clicking), you can select nonadjacent cells.

Using Expanded Tables Mode for Selecting

When you’re selecting tables and table elements, it can sometimes be difficult to select the particular part you’re after, especially if some of the table cells are narrow horizontally or vertically (Figure 10.14). To make things easier on you, Dreamweaver offers Expanded Tables mode, which temporarily adds a border (if there is none) and increases the cell padding and cell spacing. These changes aren’t permanent, and don’t show up in a Web browser.

Figure 10.14. If you wanted to select the cells under Q3 or Q4, it could be difficult to do so because they are so small.

To enter Expanded Tables mode

1. Choose View > Table Mode > Expanded Tables Mode.

or

In the Layout tab of the Insert Bar, click the Expanded button (Figure 10.15).

Figure 10.15. Click the Expanded button in the Layout tab of the Insert Bar to enter Expanded Tables mode.

or

Press F6.

The Design view switches to Expanded Tables mode (Figure 10.16), changing the appearance of all the tables in the document.

Figure 10.16. Expanded Tables mode makes all the tables in the document bigger, so you can select table elements easier. Note the indicator bar at the top of the document window that tells you that you’re in a special mode.

An indicator bar appears at the top of the document window to let you know you’re in the Expanded Tables mode.

2. Select and edit table elements as you like.

To exit Expanded Tables mode

• Choose View > Table Mode > Expanded Tables Mode.

or

In the Layout tab of the Insert Bar, click the Standard button.

or

Click the [exit] link in the Expanded Tables mode indicator bar.

or

Press F6.

Adding Rows and Columns

You may find you need to add additional content to your table. Dreamweaver allows you to add rows or columns to your table, either singly or in multiples.

To insert a single row in a table

1. Place the insertion point in a table cell.

2. In the Layout tab of the Insert Bar, click either the Insert Row Above or Insert Row Below button (Figure 10.17). A new row appears above or below the row where the insertion point is.

Figure 10.17. You’ll use the Layout tab of the Insert Bar to make changes to tables.

or

Choose Insert > Table Objects > Insert Row Above.

or

Choose Insert > Table Objects > Insert Row Below, or press Ctrl-M (Cmd-M).

or

Right-click in the cell, and choose Table > Insert Row from the shortcut menu. This adds a row below the row where the insertion point is.

The row appears in your table (Figure 10.18).

Figure 10.18. A new row has appeared in the middle of this table.

To insert a single column in a table

1. Place the insertion point in a table cell.

2. In the Layout tab of the Insert Bar, click either the Insert Column to the Left or Insert Column to the Right button. A new column appears to the right or left of the column where the insertion point is.

or

Choose Insert > Table Objects > Insert Column to the Left.

or

Choose Insert > Table Objects > Insert Column to the Right.

or

Right-click in the cell, and from the resulting shortcut menu choose Table > Insert Column. This adds a column to the left of the column where the insertion point is.

The column appears in your table.

To insert multiple rows or columns into a table

1. Place the insertion point in a table cell.

2. Right-click, and then choose Table > Insert Rows or Columns from the shortcut menu.

or

Choose Modify > Table > Insert Rows or Columns.

The Insert Rows or Columns dialog appears (Figure 10.19).

Figure 10.19. Use the Insert Rows or Columns dialog to add multiple rows or columns to a table in one operation.

3. Select either the Rows or Columns radio button.

4. Enter the number of rows or columns you want to add. You can either type a number into the text box, or use the arrow buttons next to the text box to increase or decrease the number.

5. Next to Where, click the appropriate button to select the location of the new rows or columns.

The rows or columns appear in your table.

Merging and Splitting Cells

Dreamweaver lets you combine two or more adjacent cells into one larger cell, or split a single cell into two or more cells.

To merge cells

1. Select the cells you want to merge.

2. Choose Modify > Table > Merge Cells, or press Ctrl-Alt-M (Cmd-Opt-M).

or

Right-click, and then choose Table > Merge Cells from the shortcut menu.

The cells merge (Figure 10.20).

Figure 10.20. The four cells at the left edge of this table (top) have been merged into one cell (bottom).

To split cells

1. Place the insertion point in the cell you want to split into two cells.

2. Choose Modify > Table > Split Cell, or press Ctrl-Alt-S (Cmd-Opt-S).

or

Right-click, and then choose Table > Split Cell from the shortcut menu.

The Split Cell dialog appears (Figure 10.21).

Figure 10.21. You can use the Split Cell dialog to divide cells into multiple rows or columns.

3. Choose whether to split the cell into rows or columns.

4. Enter the number of new rows or columns for the split.

5. Click OK.

The cell divides into two or more cells (Figure 10.22).

Figure 10.22. In this example, the center cell has been split into four cells.

Resizing Table Elements

You can resize tables horizontally or vertically, and also make columns wider and rows taller. You can specify the width of tables numerically, and numerically specify the width and height of rows and columns.

To resize an entire table

1. Click the bottom or the right edge of the table. The table will be selected, and a border with resize handles appears around it.

2. Drag one of the resize handles. To widen the table, drag the handle on the right edge of the table; to make the table taller, drag the handle on the bottom edge of the table; and to make the table grow in both directions simultaneously, drag the handle at the bottom-right corner of the table. Holding down the Shift key as you drag maintains the proportions of the table.

To resize a table numerically

1. Click the bottom or the right edge of the table to select it.

2. In the Property Inspector, enter a number in the W (for width) field (Figure 10.23). In the pop-up menu next to the field, choose either %, which makes the table width a percentage of the overall width of the page, or pixels, to set an absolute size for the table width.

Figure 10.23. Use the Property Inspector to change the width of a table numerically.

3. Press the Tab key or click in the document window to apply your changes.

To resize columns

1. Select the column you want to resize.

2. Drag the column’s right border to make the column wider.

or

In the Property Inspector, type a number in the W (for width) field (Figure 10.24). The width unit is in pixels. Alternatively, click the triangle in the dimension line above the column and choose Clear Column Width from the resulting pop-up menu; this makes the column resize to fit the contents.

Figure 10.24. When you select a column, the Property Inspector changes and you can numerically set the column’s width.

To resize rows

1. Select the row you want to resize.

2. Drag the bottom border of the row to make the row taller.

or

In the Property Inspector, type a number in the H (for height) field (Figure 10.25). The height unit is in pixels.

Figure 10.25. Selecting a row allows you to numerically set the row’s height.

Deleting Table Elements

If you want to remove tables, rows, or columns, you can make short work of the task.

To delete a table

1. Select the table by clicking its right or bottom edge. A border with resize handles appears around the table.

2. Press Backspace (Delete).

To delete rows

1. Select one or more rows.

2. Press Backspace (Delete).

or

Choose Modify > Table > Delete Row, or press Ctrl-Shift-M (Cmd-Shift-M).

or

Right-click the row, and then choose Table > Delete Row from the shortcut menu.

The row disappears from the table.

To delete columns

1. Select one or more columns.

2. Press Backspace (Delete).

or

Choose Modify > Table > Delete Column or press Ctrl-Shift-minus key (Cmd-Shift-minus key).

or

Right-click the row, and then choose Table > Delete Column from the shortcut menu.

The columns disappear from the table.

Specifying Table Alignment

When you have a table and text together, you can set the alignment of the table, in some cases wrapping the text around the table (Figure 10.27). You can choose from four different alignments:

• Default uses the browser default alignment for tables (usually it places the table to the left side of the page). This setting prevents text from wrapping around the table to the right.

• Left places the table to the left side of the page, and allows text to wrap around the right side of the table.

• Center centers the table on the page, with no text wrapping.

• Right places the table to the right side of the page, and allows text to wrap around the left side of the table.

Figure 10.27. The effects of different types of table alignment. From top to bottom, Default, Left, Center, and Right alignments.

Use the Property Inspector to set table alignment. This applies HTML attributes to the <table> tag, which is acceptable, but not really compliant with best practices. Instead, you should specify table alignment with a CSS style. See Chapter 5 for more information.

To set table alignment

1. Select the table you want to align.

2. In the Property Inspector, choose the alignment you want from the Align pop-up menu.

The table moves to the alignment you selected.

Setting Cell Properties

Alignment of the text or images inside of a cell requires using the Property Inspector to set cell properties for each cell. You can use these alignment cell properties to set both the horizontal and vertical alignments. You can also set cell properties for the background color of the cell, and also set the color of the cell border.

To set cell alignment

1. Place the insertion point in the cell you want to format.

2. In the Property Inspector, from the “Horz” pop-up menu choose Default, Left, Center, or Right (Figure 10.28).

Figure 10.28. Use the Property Inspector to set horizontal and vertical alignment for cell contents.

The Default choice usually gives the same visual result as Left (Figure 10.29).

Figure 10.29. Horizontal text alignment within a cell. From top to bottom, Left, Center, and Right text alignment.

3. From the “Vert” pop-up menu choose Default, Top, Middle, Bottom, or Baseline.

The Default choice usually gives the same visual result as Middle. Baseline sets the cell alignment to match the baseline of the text within the cell, and is usually used to align images and text that are inside the same cell. Baseline usually gives the same visual result as Bottom (Figure 10.30).

Figure 10.30. Vertical text alignment within a cell. From top to bottom, Top, Middle, and Bottom alignment.

To set a cell background and border color

1. Place the insertion point in the cell you want to format.

2. In the Property Inspector, click the color well next to Bg to bring up the color picker and select the cell’s background color.

The cell’s background color changes.

3. In the Property Inspector, click the color well next to Brdr to bring up the color picker and select the color of cell’s border color.

The cell’s border color changes.

Sorting Table Content

It’s not uncommon to enter data into a table, then add more data, and then want to sort the whole thing. You asked for it, Dreamweaver can do it. The program sorts by the content of any column in your table, either numerically or alphabetically, in ascending or descending order, and it can sort on two successive criteria.

There are some limitations to Dreamweaver’s sorting abilities. You cannot sort merged cells, and Dreamweaver doesn’t have the ability to sort part of a table, so you can’t, for example, have the program ignore the merged cells you used for your table’s title. Dreamweaver displays an error message if you try to sort a table containing merged cells.

Another problem is that the sorting algorithm Dreamweaver uses isn’t terribly smart. For example, you can sort numerically, but Dreamweaver doesn’t understand dates in tables, so you’re liable to get sorts like this:

3/19/99

3/25/77

3/3/02

Dreamweaver sorted the dates numerically, reading left to right, which resulted in an incorrect sort.

Despite these restrictions, table sorting in Dreamweaver is useful—you just have to be aware of the limitations.

To sort a table

1. Place the insertion point in any cell of the table you want to sort.

2. Choose Commands > Sort Table.

The Sort Table dialog appears (Figure 10.31).

Figure 10.31. The Sort Table dialog lets you sort the contents of your table either alphabetically or numerically.

3. From the Sort by pop-up menu choose the column you want to use to sort the table.

4. In the Order pop-up menu on the left, choose whether to sort the column alphabetically or numerically.

5. In the Order pop-up menu on the right, choose whether to sort the column in ascending or descending order.

6. If you want to sort on a second set of criteria repeat steps 3 through 5 and use the Then by set of pop-up menus.

7. Make any selections from the Options list.

By default, the “Sort includes the first row” option is not selected. This is because the first row of a table is frequently a header row. If your table doesn’t seem to be sorting properly, check this option.

8. Click OK.

Dreamweaver sorts your table according to the criteria you selected.

Formatting Tables

You can apply a CSS style to an entire table (which can change the look of the table), or you can apply a CSS style to selected table cells, which can change the look of the table contents.

When you use a CSS style to format a table, the table’s look is defined by instructions in a CSS style sheet. You can choose to have the table style apply to all tables in your document (if you use the style sheet to redefine the <table> tag), or you can create a custom CSS class for a particular kind of table you want to use, and apply the style to the table with the Property Inspector.

To apply a CSS style to a table

1. Select the table or table cells you want to format.

2. In the Property Inspector, choose the style you want from the Class pop-up menu (Figure 10.32).

Figure 10.32. Apply a CSS style to a table in the Property Inspector.

The selection takes on the formatting from the CSS style you chose.

Importing and Exporting Tabular Data

Because tables are best used for tabular data, it stands to reason that Dreamweaver has an easy way to import such data (from database programs or Microsoft Excel, for example) and turn it into a table. This data needs to be in the form of a delimited text file, that is, a file that includes the data, separated by some character, such as a tab, a comma, or another delimiter.

To explain how a delimited file works, imagine that you have some data that would be displayed well in a table, such as baseball standings. Each row of the table with the standings contains information on a team, and the different columns of the table contain the team’s name, number of wins, number of losses, and winning percentage, as in the example (shown in Excel) in Figure 10.33. To use this Excel data in Dreamweaver, you first need to export the data out of Excel as a delimited file, which is easy; you simply save a copy of the file in the “Text (Tab delimited)” format. This saves the data in the Excel worksheet as a plain text file. Each column of data is separated by a tab character, and each row of the data ends with a return character. Dreamweaver can then read in this delimited text file and convert it into a table.

Figure 10.33. Tabular data to be imported into Dreamweaver often starts out as a Microsoft Excel worksheet.

Dreamweaver can also do the reverse trick of turning the data in a table into a delimited text file. This allows you to export table data to Excel or a database program for further processing, or you can take a table on a Web page and move it to a word processor or page layout program such as Adobe InDesign.

To import tabular data into a table

1. Place the insertion point where you want the table to appear.

2. Choose File > Import > Tabular Data.

or

Choose Insert > Table Objects > Import Tabular Data.

The Import Tabular Data dialog appears (Figure 10.34).

Figure 10.34. Use the Import Tabular Data dialog to select the delimited text file and format the table you are about to create.

3. Click the Browse button to select the delimited data file.

The Open dialog appears.

4. Navigate to the data file, select it in the Open dialog, then click Open.

The name of the data file appears in the Import Tabular Data dialog’s Data file text box.

5. From the Delimiter pop-up menu, choose the delimiter character used in the data file.

Your choices in this pop-up menu are Tab, Comma, Semicolon, Colon, and Other. If the data file uses an unusual delimiter character, choose Other and type that character into the text box next to the Delimiter pop-up menu.

6. In the Table width section, choose Fit to data if you want the table width to be just as wide as the data, or Set to if you want the table to be a fixed width. If you choose the latter option, enter a number in the text box and choose the units from the pop-up menu (either percent or pixels).

7. You can enter values for cell padding, cell spacing, and the table border. You can also choose to format the text in the top row of the table (which is usually a header of some sort). Your choices are no formatting, bold, italic, or bold italic.

8. Click OK.

Dreamweaver reads the delimited text file and inserts it into your page as a formatted table (Figure 10.35).

Figure 10.35. The formatted table, built from the imported data, appears in your document.

To export a Dreamweaver table’s data to a delimited file

1. Place the insertion point in any cell of the table.

2. Choose File > Export > Table.

The Export Table dialog appears (Figure 10.36).

Figure 10.36. Use the Export Table dialog to save the data from a Dreamweaver table as a delimited text file.

3. From the Delimiter pop-up menu, choose the delimiter character you want to use in the exported text file. Your choices are Tab, Space, Comma, Semicolon, or Colon.

4. From the Line breaks pop-up menu, choose the operating system that is the destination for the text file. Your choices are Windows, Mac, or UNIX.

The reason for this option is that each of the platforms has a different way of indicating the end of a line of text.

5. Click Export.

The Export Table As dialog appears.

6. Give the file a name, navigate to where you want to save it, and click Save.

Dreamweaver saves the table data as a delimited text file.

Using Table Layout Mode

Because tables have such a rich history with Web designers as a primary layout tool (even though they have now fallen out of favor for that purpose), Dreamweaver offers Table Layout mode, which allows you to draw layout tables and table layout cells directly in the document window. Dreamweaver then builds the (usually very complex) table required to implement the layout you drew.

In Table Layout mode, you can simply draw a layout table on the page, then draw layout cells within the layout table. Alternatively, you simply draw the layout cells on the page; Dreamweaver then automatically creates the layout table to contain the layout cells. Oddly, this latter method is the one you will use most often. The layout cells will hold your content; after you’ve created them, you will fill in the cells with text and images. It’s easy to move, resize, and modify the layout cells. Because you’re using the tables you create as layout devices, Dreamweaver sets the border widths for the layout table to 0, so that the borders don’t appear. Cell padding and cell spacing are also set to 0, so you can place objects precisely next to one another.

As in Extended Tables mode, the document window changes while you’re in Table Layout mode, to let you know that you have options that are not normally available. Layout tables appear on screen with a tab identifying them (this tab doesn’t appear in a Web browser).

To create a layout table

1. Choose View > Table Mode > Layout Mode, or press Alt-F6 (Option-F6) (Figure 10.37).

Figure 10.37. Enter Table Layout mode by choosing it from the Table Mode submenu of the View menu.

An indicator bar appears at the top of the document window to let you know you’re in Layout mode.

2. Click the Layout Cell button on the Insert Bar (Figure 10.38).

Figure 10.38. You’ll find the layout tools on the Insert Bar; they are only active when you are in Table Layout mode.

When you move the mouse pointer back over the document window, you will see that the cursor has changed to a crosshair.

3. Click and drag anywhere in the document window to draw the layout cell.

The layout cell appears in the document window as you drag. When you release the mouse button, Dreamweaver encloses the layout cell that you drew within a layout table (Figure 10.39). The area of the layout table outside of the layout cell will be gray.

Figure 10.39. After you draw a layout cell, Dreamweaver surrounds it with a layout table.

4. You’ll probably want more than one content area inside your layout table, so click the Layout Cell button again and draw your second layout cell. Repeat for as many content areas as you need.

5. To enter content in the layout cells, click inside a cell and type or insert an image in the usual fashion. Repeat until you are done (Figure 10.40).

Figure 10.40. This alternative layout for the HomeCook.info site uses three layout cells, which I’ve filled with text and an image.

6. To exit Layout mode, click the [exit] link in the indicator bar at the top of the document window.

or

Choose View > Table Mode > Layout Mode, or press Alt-F6 (Option-F6).