| Tutorial Introduction | Getting Started | Page Properties | Text | Tables |
| Images | Links | Publishing | Templates | Collaborating | Dreamweaver Resources |

Dreamweaver Tutorial: Tables

| Inserting a Table | Editing Table Properties | The Table Menu |

In web design, tables can serve many functions. 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.

Inserting a Table

To insert a table into your web page in Dreamweaver, go to the menu bar and select "Insert," and then "Table." See image below:

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. The default padding is 1 pixel. Enter 0 for no padding
4. Cell Spacing- specify the number of pixels between each cell. The default spacing is 2 pixels. 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.

Return to Top >>

Editing Table Properties

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

To open the Properties window, go to the menu bar and select "Window," and then "Properties." The Properties window should then appear on the page you are editing in Dreamweaver. The Properties window should be open when the check mark appears next to it in the menu bar. See image below:

In order to edit your table using the Properties window, you must select your table. You can select the table by clicking on the outer border of it. 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. To see what the Properties window looks like when you are editing a table, see the image below:

All of the fields in the Property window 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.

Return to Top >>

The Table Menu

In addition to using the Properties window 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. Please look at the image below to see what these options are, and what they do:

Use the above image to aid you in learning the different features of the 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

Return to Top >>

Next Step --> Images