• 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 Mode

Creating a Table in Layout Mode

If you have ever had to hand-code an HTML table, you know how tedious the task can be. To simplify the building of a table, Dreamweaver 4 provides the option to create and edit tables in either layout view or standard view. In layout view, you see just the cells (boxes) that hold your content. In standard view, you see all the rows and columns of the table.

Create a new document and save it as layout.htm. Title the document Rafting Tours.

You will create a table in this document in the following steps.

Choose View > Table View > Layout View or click Layout View in the Objects panel.

You have switched to layout view, in which you can easily place elements on the page. You may see an info box, Getting Started in Layout View, which briefly describes the main tools. Layout view works much like page-layout programs in which you 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.

Likewise, when you are in layout view, you can add layout cells or a layout table to the page.

Click Draw Layout Cell in the Layout area of the Objects panel(s).

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

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 in green. 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.

Use the Image Favorites Assets panel to insert into this cell the compass_tours_logo2 graphic from the Lesson 4 folder.


From the Assets panel, you can just drag the graphic's name into the cell on the page.

You have inserted an image, as you did in Lesson 2. The cell expands 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.

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