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.
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".
Your table will insert!
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.
By clicking the appropriate tag, you can select the desired table area.
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:
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.
Changing Cell Attributes
Selecting Multiple Cells
By selecting multiple cells you can apply the same formatting to many cells
at the same time.
* 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
The following are cell attributes you can change on the Properties Palette:
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.
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.
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.
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.
**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)
web design course - Awesome website with no stupid netscape loading images.
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
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-> LAYOUT VIEW
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.