The basic layout of almost all HTML web pages is controlled using tables. Dreamweaver makes table creation easier and much less time consuming than hand coding.

BASIC TABLE CREATION RULES

There are a few rules that, if followed, will make your table building life much happier.

1. Columns width needs to be the same all the way down. You cant have a cell one width and the cell above or below it a different width. This is a basic rule of HTML.
   The problem is that Dreamweaver will allow you to manually input different widths for different cells in a the same column. Dont do it. The browser will freak out when it tries to open your page.
   Ive found that this is the biggest error Dreamweaver newbies make when building tables. If your tables are freaking out, click in each cell in each column. Make sure they either have the same width, or no width at all.
2. Read rule number one again. Its an important one.
3. If things get complicated, use nested tables instead of merging cells. A nested table is a table kept in another table. Nested tables are much easier to deal with than merged cells.
4. Draw your table by hand before attempting to build it in Dreamweaver. Adding or removing cells and rows can sometimes be problematic after tables start getting complicated.

Building Tables in Dreamweaver

To insert a table in Dreamweaver:

          Click INSERT -> TABLE

The Insert Table window will open. You can set the number of rows and columns, Cell Spacing and Padding in pixels, the table width in percent or pixels, and the border width in pixels.

If you choose a border width of "0", Dreamweaver will still show you a line, but itll be gone in the browser. 

** IMPORTANT: A blank window field in Dreamweaver does not mean "0". A blank window field means "use the HTML default". For example, if you leave the Cell Padding window blank, Dreamweaver will automatically use cellpadding=4. If you want "0", youll have to insert "0".

1. Fill in the Insert Table window with the above values.
2. Hit OK

Your table will insert!

3. Click inside the first cell and type your name. Notice that the cell stretches. We havent set its width yet.
4. Make sure the Properties Palette is open. (WINDOW-> PROPERTIES)

Right now, the Properties Palette is displaying information for the cell you just clicked in. Sometimes it is hard to tell what area of the table the Properties inspector thinks you are editing. There is an easy way to select different parts of a table and to determine what part of the table is selected.

5. When editing a table: In the lower left corner of the Dreamweaver window you will see different table tags, like <TD> <TR> and <TABLE>

By clicking the appropriate tag, you can select the desired table area.

6. Click <table>
   You will notice that the Properties Palette changes to display table attributes.

Later, when you start nesting tables, it will be much easier to accurately select elements using the table selector in the lower left corner of the Dreamweaver window.

Changing Table Attributes

The following are table attributes you can change on the top row of the Properties Palette:
Change the settings to see what happens. Have fun. You cant hurt anything. If youre really worried you can set them back to what they used to be.

Rows: The total number of rows in the table

Cols: The total number of Columns in the table

W: Table width, in pixels or %

H: Table height, in pixels or %

CellPad: Cell padding for the table. Cell padding is the space between each cell wall and the cells contents

CellSpace: Cell Spacing for the table. Cell Spacing is the space in pixels between each cell.

Align: The tables alignment relative to the page.

Border: The table border in pixels.

The following are table attributes you can change on the bottom row of the Properties Palette:

 Clear Column/Row heights/widths: these buttons can be used to clear out all the Column and row settings if your table gets seriously messed up. Youll have to re-input your width and height values, but at least you wont have to rebuild the whole table. This button is for bad little Dreamweaver users who ignored the rule about keeping your column widths the same all the way down.

 Change Pixels to Percent / Percent to Pixels: These buttons convert percentage based tables to pixel and vice versa. Not the most useful button

Vspace: (Vertical Space) Space between the table and anything above or below it.

Hspace: (Horizontal Space) Space between the table and anything to the left or right of it.

Light Brdr / Dark Brdr: (Light & Dark Cell Borders) In each cell the top and left border is darker to create a slight shadow. You can change these colors. Clever designers sometimes match one color to the background color to create an accent.

Bg: You can set a background color or image. Note that Netscape will not support table background images.

Brdr: You can set the outside border color for the table here. If you want all the borders in the site to change youll have to adjust the cell border colors, too.

7. Build a 100% table with the following attributes:
   3 rows, 4 columns, and a red 1 pixel border         

Changing Cell Attributes

Selecting Multiple Cells

By selecting multiple cells you can apply the same formatting to many cells at the same time.
To select multiple cells:

*         Click and drag over the cells you want to select

*         CTRL+Click or CMD+Click

*         Shift+Click. If you click one cell and then shift+click another Dreamweaver will select both cells and any cells in-between

*         Select a whole row or column: If place your cursor directly to the right of any row or directly above any column, your cursor will become a black arrow. Click, and the whole row/column will become selected.

Editing Cell Properties with the Properties Palette

1. Click a cell. Notice that the Properties palette changes to display changeable values for the cell. The top row of the Properties palette is for text in the cell. Each cell is treated like its own little page. Youll have to reset your font formatting.

The following are cell attributes you can change on the Properties Palette:

        Merge/Split Cells: To merge or split cells using ROWSPAN and CELLSPAN, select the cells to merge/split and click this button. Remember that for complicated tables you are much better off nesting tables than merging/splitting cells.
**NOTE you must select multiple cells to merge cells.

Horz: (Horizontal cell alignment) Horizontally aligns text in a cell

Vert: (Vertical Cell Alignment) Vertically aligns text in a cell. Remember that text lines up to the middle of a cell by default.

W:  Cell Width. If you want %, youll have to manually add the %. Leave this attribute blank if you want the column to resize itself automatically based on the screen size.
***NOTE: Youre better off setting width before you put text in the cells.

H: Cell Height. You can set a cells height, but it is usually best not to mess with height. The cell may need to re-size depending on the viewers monitor settings.

Bg: You can set a background color or image for each cell. Cell background colors and images supercede table colors or images.

Brdr: Border color for individual cells.

2. See if you can build the following table:

Using Spacer Images

Images will stretch a cell if the image is larger than the cell. This can be useful because a column will collapse if it has nothing in it. You can use a transparent gif, called a spacer image or shim, to keep a column from collapsing. Properly sized, a gif will hold a cell open to the images height or width. You will learn how to make a transparent gif later on.

Go get it!

The gif is only one pixel square. This is the smallest file you can make. After inserting the gif, you can immediately resize it using HEIGHT and WIDTH.

1. Insert the gif into a cell.
2. Resize the gif to H:200

**You are better off setting either height or width, but not both. Netscape shows a stupid graphic surrounded by a box while loading images. The graphic is confusing and looks bad, but users cant see the graphic if its only 1 pixel high (or wide)

Stupid Netscape Loading Image

web design course - Awesome website with no stupid netscape loading images.

Nested Tables

Remember that you will use nested tables to make complicated tables easier. Most people have a pretty hard time hand coding nested tables in HTML, but Dreamweaver makes nesting tables incredibly easy.

To Create a Nested Table in Dreamweaver

1. Click inside a cell
2. Click INSERT-> TABLE

Selecting What You Want to Select

Selecting an entire nested table can sometimes get tricky. Remember that you have the table tags in the lower left hand corner of the Dreamweaver window.

To select the following red bordered nested table:

You would click the nested <table> tag in the below example. Notice that there are two table tags. The first on is for the main table.

Creating Tables Using the Table Layout View

Dreamweaver 4 has a new feature that allows you to draw tables in what it calls Layout View. Although drawing tables is easy, you still have to understand standard table view to correctly use Dreamweaver.

To open Table Layout View, Click:

          VIEW-> TABLE VIEW-> LAYOUT VIEW
            (An annoying pop-up will open. You can close it)

When you enter into Layout View, youll notice that the Objects Pallet automatically opened. At the bottom of the Objects Palette are the buttons that youll use to control building tables in Layout View.

Draw Cells:  Draw cells is the most useful button. You can just, well, draw cells. It is unnecessary to draw a table first. When you draw a cell, Dreamweaver automatically draws a table. The table height look too large at first, but the table will resize to fit any cells you draw.  

After you draw a cell you can resize it by dragging its handles or changing the width and height on the Properties Inspector.

Hold Ctrl/Cmd to draw multiple cells.

Draw Layout Table

Dreamweaver will automatically create a table when you first begin drawing cells, but if you want to nest tables, youll have to use the Draw Layout Table button to draw them.

Setting a Column to Automatically Resize

Setting a column to automatically stretch on larger monitors is easy in Layout Mode. First you must make sure that the column is a single column all the way down. If the column is part of a merged cell, or if a merged cell intersects the column, it will not resize correctly.

Simply click on the column width pull-down and choose Make Column Autostretch.

Dreamweaver will want to insert a spacer image in the remaining cells to insure that they hold their correct size. Go ahead and let it.

Continue to Advanced Buttons | Back to Courseware