• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Elements of Page Design > Creating a Table in Layout View

Creating a Table in Layout View

Dreamweaver MX provides two options for creating tables: layout view and standard view. Layout view works much like a page-layout program in which you can draw boxes on the page and then fill the boxes with text or graphics. You can resize the boxes, and you can place the boxes anywhere on the page.

In this exercise, you will begin to create a page in the “Lights of the Coast” project site using layout view. You will learn about standard view, and how to create tables using that method, later on in this lesson.


In layout view, the exact numeric values of cell widths and heights, as well as the placement of those cells, will be somewhat different from the examples shown here. Use the examples as guides for the general layout of your page.

Create a new HTML document and save it as foghorns.html in the Lesson_04Tables folder. Title the document Lights of the Coast: Technology: Sound and set the background color of the page to white.

The page you are creating is a part of the Technology section of the “Lights of the Coast” project site. The page title you have typed will indicate this to the visitors of the site.

You will use layout view to create a table in this document in the following steps.

From the Insert bar, select the Layout tab and click Layout View.

You have switched to layout view, in which you can easily place elements on the page. You may see the info box titled “Getting Started in Layout View,” which briefly describes the main tools: the layout cell and the layout table. You can click OK to close this dialog box.


There is a check box for “Don't show me this message again.” If you leave this box unchecked, the next time you restart Dreamweaver you will see this dialog box again if you switch to layout view.

A light gray bar, with the text “Layout View” centered on it, appears just below the document window toolbar (Macintosh) or the document title bar (Windows), appearing to be within the document itself. This bar will not be visible in the browser as it is used only in Dreamweaver to indicate that you are working in layout view.


You can also choose View > Table View > Layout View to switch to layout view. You can also use the keyboard shortcut Command+F6 (Macintosh) or Ctrl+F6 (Windows) to switch to layout view.

Click the Draw Layout Cell icon in the Layout area of the Insert bar.

The pointer changes to a plus sign (+) when you move the pointer into the document window.

A layout cell lets you draw a boxed area, called a cell, anywhere on the page. All content in a table will always be contained within a cell. Every table has one or more cells. A cell is the area created by the intersection of a row and a column. In layout view, you don't need to worry about the number or arrangement of rows and columns when creating your table—Dreamweaver creates and manages the rows and columns for you automatically when you designate the location of the cells on your page.

Place the pointer in the center of the page; then click and drag to draw the cell.

A layout table is drawn automatically to contain the cell. The layout table is drawn as wide as the document window, but you can resize the table to any size you need. The cell is outlined in blue to distinguish it from the table, which appears outlined in green. A solid blue line indicates that the insertion point is within the cell, while a dotted blue line indicates that the insertion point is not in the cell. All parts of the table other than the cell are shown in gray. The thin white lines indicate the rows and columns Dreamweaver creates in order to construct a table when you draw layout cells. When you move the pointer over the border of the cell, it turns red to indicate which cell you are over.


By default, layout tables appear with a tab at the top. The tab makes it easier to identify the table; it contains column numbers and a column menu. The tab causes the table to drop down from the top of the page; this extra space will not be visible in the browser, however. To remove the tab from the table, choose View > Table View > Show Layout Table Tabs. A checkmark next to an option in the menu indicates that option is enabled.

Insert the foghorn_title.gif graphic from the Lesson_04_Tables/Images folder into the layout cell you just drew.


From the Site portion of the Image Assets panel, you can just select and drag the graphic from the Assets panel into the cell on the page.

You have inserted an image as you did in Lesson 2. The cell will expand to fit the graphic if it was smaller than the size of the graphic. The new size is displayed in parentheses at the top of the window.


If you get the accessibility options when you insert the foghorn_title.gif, you should go to Edit > Preferences and select the accessibility category. Uncheck all of the boxes and click OK to turn the accessible images option off.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint