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.2 Modifying Tables

We can modify table appearance - such as color - globally or cell-by-cell. Other modifications apply to the entire table (border, spacing, padding).

In this exercise, we will modify some basic table parameters.

exercise

  1. Open lesson_5c.html (art_of_bonsai folder)
  2. To align the image and its caption in the center of its cell, we will add this code to each TD: "align=center"
    • In Design View, click inside the cell that holds the Formal Upright bonsai image.
    • The Tag Inspector - at the foot of the document window - shows the relevant HTML tags. Click on the opening TD tag: <td>
    • The Property Inspector shows you your design options. Set Horizontal to center and Vertical to middle. Look at the code in Split View.
    • Do this for the other image cells.
    • Click inside the cell that holds the Formal Upright bonsai text. Set Horizontal to left and Vertical to top.
    • Do this for the other text cells.
    • Save and preview in browser. See what happens with different settings.
    • In Design View, click on <table> in the Tag Inspector.
    • Change border to 1; preview in browser. Review the other table setting options.
next previous PDF print home