This tutorial explains how to create a table-based page layout in Macromedia Dreamweaver 8. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and Macromedia Flash content.

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. You can use tables to create your layout quickly and easily. In this tutorial you’ll create a number of tables in a new Dreamweaver document. The rows and cells of the tables effectively act as container boxes for the content you’ll add later.

Create and Save a New Page

After you set up a site, you are ready to begin building web pages. You’ll start by creating a new page, and saving it in the cafe_townsend local root folder of your website. The page eventually becomes the home page for Cafe Townsend, a fictional restaurant.

1. In Dreamweaver, select File > New.
2. On the General tab of the New Document dialog box, select Basic Page from the Category list, select HTML from the Basic Page list, and click Create.
3. Select File > Save As.
4. In the Save As dialog box, browse to and open the Cafe Townsend folder that you defined as the site’s local root folder.
5. Enter index.html in the File Name text box and click Save.

6. The filename now appears in the title bar at the top of the application window.

7. In the Document Title text box at the top of your new document, type Cafe Townsend.

   

   This is the title of your page (different from the filename). Your site visitors will see this title in the browser window title bar when they view the page in a web browser.

8. Select File > Save to save your page.

Insert tables

Next you’ll add a table that will hold text, graphics, and Macromedia Flash assets.

1. Click once on the page to place the insertion point in the upper-left corner of the page.

   

2. Select Insert > Table.
3. In the Insert Table dialog box, do the following:
   • Enter 3 in the Rows text box.
   • Enter 1 in the Columns text box.
   • Enter 700 in the Table Width text box.
   • Select Pixels from the Table Width pop-up menu.
   • Enter 0 in the Border Thickness text box.
   • Enter 0 in the Cell Padding text box.
   • Enter 0 in the Cell Spacing text box.

     

4. Click OK.

   A table with three rows and one column appears in your document. The table is 700 pixels wide with no border, cell padding, or cell spacing.

   

   ABOUT...

   More about tables Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. When you create multiple rows with multiple cells, the cells form columns. Technically, a cell is a division within a horizontal row, and a column is the vertical accumulation of those cell divisions. Dreamweaver displays the table width and the width for each table column in the Table selector (indicated by green lines) when the table is selected or when the insertion point is in the table. Next to the widths are arrows for the table header menu and the column header menus. You can use the menus for quick access to common table-related commands. You can also enable or disable the display of the widths and menus by selecting View > Visual Aids > Table Widths. Tables can have borders, and the cells of a table can have padding, spacing, or both. Cell padding refers to the number of pixels between the cell’s content and the cell’s boundaries. Cell spacing refers to the number of pixels between adjacent table cells. If you don’t explicitly assign values for cell padding and cell spacing, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. If you want to ensure that browsers display the table with no padding or spacing, set cell padding and cell spacing to 0.

5. Click once to the right of the table to deselect it.
6. Select Insert > Table to insert another table.
7. In the Insert Table dialog box, do the following for the second table:
   • Enter 1 in the Rows text box.
   • Enter 3 in the Columns text box.
   • Enter 700 in the Table Width text box.
   • Select Pixels from the Table Width pop-up menu.
   • Enter 0 in the Border Thickness text box.
   • Enter 0 in the Cell Padding text box.
   • Enter 0 in the Cell Spacing text box.
8. Click OK.

   A second table with one row and three columns appears below your first table.

   

9. Click to the right of the table to deselect it.
10. Insert a third table by selecting Insert > Table and entering the following values in the Insert Table dialog box:
    • Enter 1 in the Rows text box.
    • Enter 1 in the Columns text box.
    • Enter 700 in the Table Width text box.
    • Select Pixels from the Table Width pop-up menu.
    • Enter 0 in the Border Thickness text box.
    • Enter 0 in the Cell Padding text box.
    • Enter 0 in the Cell Spacing text box.
11. Click OK.

    A third table, with one row and one column, appears below your second table.

    

    Click to the right of the table to deselect it. Your page should now look as follows:

    

    NOTE

    You may see the Table selector (indicated by green lines) after you insert a table. You can always make the Table selector disappear by clicking outside the table. You can also disable the Table selector by selecting View > Visual Aids > Table Widths.