Tables with Dreamweaver

Lay Out with Tables: Create a Table
Another way to lay out text and images is to use tables: grids with rows and columns.

1. Click your cursor where you’d like to insert a table.
   
   
2. From the Insert menu, choose Table. An Insert Table dialog box appears.
   Make a table with two columns and two rows.
   
   
   
   
3. In the Rows: field enter 2. In the Columns: field enter 2.
   Leave the other settings as they are for now.
   
   
4. Click OK. A table with the specified number of rows and columns appears.
   
   
   

Lay Out with Tables: Add Images
You can add images to a table by clicking in the cell where you want the image to appear and locating the image you want to add.

1. Click in the upper-right cell.
   
   
2. From the Insert menu, select Image. A Select Image Source dialog box appears.
   
   
3. Locate and select your image. The image appears in the cell.
   The cell sizes are skewed, but you’ll adjust them in a moment. First, insert another image in the cell below the first image.
   
   
4. Click in the cell below the cell with the first image. Using the Insert menu, locate and select another image. The second image appears in the cell.

Lay Out with Tables: Edit Table
Depending on the size of the images, the cells with the images may be wider than necessary. You can change the cell size in a couple of ways to get rid of excess white space inside the images' cells.

1. Place the cursor over the line dividing the columns. The cursor turns into a two-headed arrow.
   
   
2. Click and drag the two-headed arrow to the right to the middle of the table. The cells adjust so that the images just fit the width of the second column.
   
   
3. Save and preview your work in Netscape. Try making your browser window as big as possible. Note that the table size changes as the browser window size changes, and the white space reappears – why?
   The reason the table size is not constant is because the width of the table itself is expressed as a percentage of the total width of the browser window, in this case, 75%. If you wish to lock the table to a specific size, you have to express the table dimensions differently.
   
   
4. Return to Dreamweaver, and click on one of the images. Then, in the lower left corner of the page window, click the <table> tag (shown below) to select the entire table. <TABLE> is the HTML tag that draws a table on the screen, and Dreamweaver uses it as a symbol here to represent the table as a whole.
   
   
5. Notice the "W" field displayed in the Property Inspector; this stands for the width of the table, which is expressed as a percentage. If you wanted to lock the table to a specific size, you would specify a size and change the units to pixels.
   
   
6. Change the width of the table to a pixel width (say, 400) instead of percent in the Property Inspector.
   
   
7. Click once on one of the images and ascertain its width from the Property Inspector. Then, click the <td> tag (shown below) to select the table cell that contains the image. <TD> is the tag for a table cell ("table data" cell)
   
   
8. Expand your Property Inspector by clicking the triangle on its lower right corner, to see the width of the table cell. Your palette should look similar to the one below.
   
   
   
   
9. In the bottom half of the Property Inspector, change the width of the table cell to something slightly bigger than the width of the image.
   Do the same for the other cells in the table.
   
   
10. Save and preview your work in the browser again. Resize your browser window to convince yourself that the table will not change size.
    
    It’s easy to adjust the number of rows and columns in a table. Add a new row to your table and insert another image.
    
    
11. Click in one of the rows of your table. Then from the Modify menu, Table submenu, choose Insert Row. A new row appears above.
    
    
12. Click in the second column of the new row and insert another image. The image appears in the cell.
    
    
13. Save your work and preview it in Netscape.

Lay Out with Tables: Add Text
The cells next to your three images are blank. Fill them with fascinating information about your images.

1. Switch back to Dreamweaver.
   
   
2. Click in each blank cell and type some text about the respective image.
   
   
3. Format the text. Try the alignment options in the Property Inspector. Change the size, color or style of the text.
   
   
4. To end a line of text with a carriage return without line space after it, place the cursor at the end of the line, hold down the Shift key, and press Enter. Pressing Enter without the Shift key produces a carriage return with one line space after it.
   
   
5. Save your work and preview in Netscape.

Back to the Index