Intro & Account Setup | Getting Started With Dreamweaver MX | Program Layout | Making a Page | Page Properties
Text and Text Properties | Cascading Style Sheets | Tables | Images | Links
Publishing | Templates | Collaborating | Outside Resources

Tables, which are made up of "cells" formed by rows and columns, can come in handy in many ways when designing a website. By using tables, you can organize text, hold images, and even make a web page layout. This section of the tutorial will teach you how to utilize tables in Dreamweaver MX.

Inserting a Table
To insert a table into your web page in Dreamweaver MX, go to the menu bar and select "Insert," and then "Table.”

Alternatively, you can insert a table by clicking on the “Tables” tab on the Insert panel, and click on the “Insert Table” icon.

When you select Insert >> Table, a pop up window will appear. It will ask you to input some information about your table. The information you input in this Table window will decide what your table will look like. This window has a few text fields that you will need to know about. Read the numbered list below and use the corresponding numbers on the image to see how to insert your table:

1. Rows:
Rows are made up of cells that line up horizontally. In this text box, you enter how many rows you want to have in your table.

2. Columns:
Columns are made up of cells that line up vertically. In this text box, specify how many columns you want to include in your table.

3. Cell Padding:
Specify the number of pixels between the cell content and the cell boundary. Enter 0 for no padding.

4. Cell Spacing:
Specify the number of pixels between each cell. Enter 0 for no spacing.

5. Width:
Specify the width of the table as a number of pixels or as a percentage of the browser window.

6. Border:
Specify the pixel width of the table border. Enter 0 if you don't want a border.

Click "OK" when you are done entering all of the information into the fields. A table will then appear on your web page. You can click and drag the edges of the table to change the table's dimensions.

Editing Table Properties
When you have a table in your web page, Dreamweaver MX will allow you to edit the table in many ways. By using the Properties palette, you can modify different aspects of your table.

In order to edit your table using the Properties palette, you must select your table. You can select the table by clicking on its outer border. Additionally, you may right-click inside the table and select “Select Table” from the menu. This leaves less chance for error in accidentally resizing your table by clicking on its border. Once it is selected, you'll notice that the Properties window has changed its appearance to show that it is now ready to edit your table.

All of the fields in the Property palette for tables are pretty much the same fields you see when you first insert a table. There are some additions, though. You can adjust the alignment of the content in the tables, add background or border colors to the table, add background images, and fine-tune the dimensions of the table. You can also go back and edit the number of rows and columns in your table, adjust the width and height in pixels or percent, and modify the cell padding, cell spacing, and border.

The Table Menu
In addition to using the Properties palette to edit tables, you can also modify a table by using the table menu. In your table, make sure you have some cells, rows, columns, or the entire table selected (select whatever part of the table you want, depending on how you want to edit it). With those cells selected, go to the menu bar and select "Modify," and then "Table." Under the Table menu, a number of options will appear. These options in the table menu can allow you to edit your table in even more ways than before. Here is a list of features in this menu:

Select Table:
Just as the name implies, this option selects your entire table.

Merge Cells:
This is a helpful option that lets you merge multiple cells into one cell.

Split Cell:
By selecting or putting the insertion point in a cell, you can split that cell into any number of rows or columns.

Insert Row:
Put the insertion point where you want to insert a new row, and this option inserts one new row.

Insert Column:
Same as the above, put this option inserts one new column.

Insert Row of Columns:
This option gives you more flexibility than the above two options. You can choose how many rows or columns you want to add, and where you want them to be inserted.

Delete Row:
Select or put the insertion point in the row that you want to delete, and select this option.

Delete Column:
Same as the above, but deletes columns when selected.

Increase/Decrease Row/Column Span:
By selecting a row or column, you can make its span larger or smaller.

Please note that this menu can also be accessed by right-clicking inside of a table, and selecting the options as needed.

>> next