These pages use Javascript to provide a stylesheet appropriate to your browser. The pages are functional without javascript but not aesthetically pleasing.

DreamweaverMX Tutorials

6. Tables & CSS

Dreamweaver Tutorials

6.3 Creating Tables

Dreamweaver has a new table wizard, which can be accessed via the Insert Menu or the Insert Bar.

exercise

  1. Create a new HTML document. Call it my_table.html
  2. In Design View, type My Table. Highlight the text. Using Property Inspector, make this an H1
  3. Click the Table tab on the Insert Bar or choose Insert > Table.
  4. Complete the Table dialog box with these parameters and then select ok
    • 3 rows
    • 3 columns
    • width 90%
    • border 1
    • cell padding 0
    • cell spacing 0
  5. Merge the left column rows into one cell.
    Highlight the three cells by clicking/dragging (mouse button stays depressed). Choose Modify > Table > Merge Cells
  6. Merge middle row cells into one cell.
    Click in the left-middle cell; drag the cursor to the right-middle cell, keeping the mouse button depressed. In the Property Inspector, click Merge Cells. This is a second way to accomplish this task. [A third way is to type the code in Code View!
  7. Delete the top row.
    Click in the left-middle cell; drag the cursor to the right-middle cell, keeping the mouse button depressed. Choose Edit > Cut (Ctr/Cmd+X)
  8. Insert a new bottom row.
    Click in the left-middle cell of the bottom row. Choose Modify > Table > Insert Rows or Columns. Select Insert Rows, Number of Rows:1, Where: Below the Selection. Click ok.
next previous PDF print home