Start Basics Color Forms Frames Images Links Lists Tables Type

Tables: Dreamweaver 4:
Create a Table in Layout View

Once you have mastered the basic table and learned how to control the look of the data in the individual table cell, you will want to create more complex table designs.

Take a look at a web page that uses tables to control layout.

You can create such a table in Standard view.

However, Dreamweaver gives you the option to draw a table or a table cell any place you wish to on your document.

First you must switch your design view from standard to layout view.
On the Objects panel, click on the design view button in the View Panel 

Layout View button
Layout View

Dreamweaver opens a Getting Started In Layout View dialog box with information on how to use Layout View. If you don't wish to see this box every time you switch to Layout View, click on Don't show me this message again.

Once you are in design view you will notice that the Insert Table and Draw Layer buttons on the Object panel have been disabled and the Draw Layout Cell and Draw Layout Table buttons appear in the Layout panel 

Object Panel, Layout View

Draw Layout Cell button
Draw Layout Cell

Draw Layout Table button
Draw Layout Table

To draw a layout table:
  • Position your cursor on your page.
  • Click on the Draw Layout Table button. Your cursor will turn into a cross
  • Drag your cursor to create the table.
  • Grab the table handles to resize the table

Layout Table

To create a layout cell:
  • Position your cursor on your page.
  • Click on the Draw Layout Cell button. Your cursor will turn into a cross
  • Drag your cursor to create the cell.
  • Grab the cell  handles to resize the cell.

In the layout table below, I have created a cell in the middle of the table.

Layout Table with middle cell

NOTE: If you create a layout cell without first creating the table, Dreamweaver will automatically create a table to hold the cell.
To add text to a layout cell, position your cursor inside the cell and start typing.

To work with your table in standard view, click on the Standard View button on the objects toolbar.

Here is another layout table with several layout cells.

Layout Table with three cells

Note how the table changes when I switch to Standard view.
Layout Table in Standard View
You can see how easy it would be to create an elaborate layout design for your page in layout view.

Dreamweaver automatically converts such a design to a standard table.

Tables, especially borderless tables, can be used to great effect to force a particular layout design on a web page.

However, you will need to tinker with your table by adjusting the table and cell properties. It is a good idea to save and preview the file after every adjustment to your table.

VERY IMPORTANT: Be sure to preview the table in both Microsoft Internet Explorer and Netscape Navigator before you publish the page.

Both browsers have a tendency to interpret table tags and attributes in different ways.

Tables: Dreamweaver 4
Overview
Create a Table in Standard View

Set Table Cell Properties

Experiment with Advanced Design
Create a Table in Layout View

Start Basics Color Forms Frames Images Links Lists Tables Type

 

Personal Home PageWeb Design CenterTutorial MenuTop of Page

Web Design Center
Last Revised: September 2, 2001
© Agatha Taormina