Creating Tables in Dreamweaver
Before we begin creating our tables, there is some basic terminology you will need to know.
Rows - stand for the number of rows in your table.
Columns - stand for the number of columns in your table.
Width - is the width across the screen that your table takes up. You can define the width in terms of the number of pixles or in terms of the percentage.
Border - will represent the thickness of the border around the table.
Cell Padding - representes the space around the contents of each cell of your table.
Cell Spacing - represents the space between the cells.
To insert a table into your document, from the menu bar, select INSERT >> TABLE. You will be presented with the dialog box below.
Once you have filled in this screen, select the OK key and your table will be inserted into your document. All you need to do is type the data into each cell.
Once you have created your table, you will notice that the Selection Properties box has changed to allow you to customize your tables. Among the things you can do is:
There are times when you will not want to create an n by n cell table. For example, say you want a 3 cell by 3 cell table, but you want the first column to be just one cell.
Our first step is to create the 3 x 3 cell table following the steps above.
The second step is to highlight the cells you want to merge together. To do this, click on the first cell you want to merge and drag your mouse until all of the cells you want to merge have a black line around them.
Finally, click on the merge cells button. It is located at the lower left corner of the Selection Properties box. The icon is reprinted below.
The results appear below.
To split a cell into two cells, highlight the cell to be split and select the split cells button (to the right of the merge cells button). You will get the dialog box below. Simply select the number of new rows (or columns) you want and hit OK. I selected the middle cell in the last column. Notice the effect it had on the rest of the table.
Dreamweaver will also allow you to align the contents of a cell both vertically and horizontally. By default, the alignment is to set the horizontal placement of text to the left of a cell and the vertical placement in the middle.
Your choices for vertical alignment is top, middle, bottom or baseline.
Your choices for horizontal alignment is left, center or right.
To alter the alignment of your text in a cell, click on the arrow next to either Horiz or Vert and select the alignment you want. In the table below, I set the horizontal alignment to middle.
| Homework | ||
HTML will allow you to define the background color or a background image for a table. A word of caution applies here. Internet Explorer and Netscape handle background images in tables very differently. Netscape will load the image into each cell. IE will allow you to load the image in individual cells or have a single background for the entire table. Since a background image is very difficult to read, I would suggest you not using this feature.
Let's change the background color of the cell in the first column. There are two boxes labeled Bg. The top box allows you to select an image. The bottom box allows you to select a color. To select a background image, click on the file on the top row of boxes and search for the image you want to use. To select a background color, simply click on the little arrow next to the lower Bg box and select the color you want. The section of the Select Properties box is reprinted below.
| Homework | ||
Another word of caution applies here. IE supports changing the colors of borders of table cells. Netscape, through version 5 does not. To change the border of a cell, next to the bottom Bg command is the Brdr option. Click on the arrow next to the Brdr box and select your color.
| Homework | ||
Assignment: This exercise should help you in creating a simple, but functional table. For instructions on creating a table for homework questions, select the table.html link.
Copyright 2002: Donna Tupper