Dreamweaver Tutorials - inserting a table for layout

This tutorial will walk you through the steps to insert a table for layout purposes in Macromedia Dreamweaver MX. Newer versions of Dreamweaver, such as MX 2004 or Dreamweaver 8 will look a bit different.

For a printable version of this tutorials, download this word file. To view a Flash movie of this tutorial, click here.

Assuming you already have DreamWeaver (DW) open on your computer.

If you don't have a new file open, click on File > New and select HTML. You should see a blank page.

There are two ways to insert a table in Dreamweaver (and most other software):

1. Using the button menu, click on the Insert Table icon (looks like an icecube tray:

OR

2. Using the Menu and click on Insert > Table:

Now we set our table properties:

Set the Rows to 2 (or more) cell padding puts space between the content in the cell and the side of the cell, set to 0 or 1 (or more) Columns: at least 2, left column for navigation links and the right for content cell spacing to 0 width to 100 Percent (or if you want a fixed width table use pixels) Set your border to 0. This will make the table invisible when the page is viewed in a browser.

Click OK.

You may get an Accessibility Option dialogue box. I type in "table for layout only" in the summary field.

Click OK.

This is what you should see:

And if you look at the bottom of your screen in the Properties inspector panel:

Now you are ready to start designing your page.

Back to Tutorials

© 2004 - 5 Eli Collins-Brown