Styling a Table - Exercise

Contact Us or call 1-877-932-8228
Styling a Table - Exercise

Styling a Table

Duration: 20 to 30 minutes.

In this exercise, you will style some pages.

  1. Open ClassFiles/Dreamweaver/Exercises/table.html in Dreamweaver.
  2. Click somewhere in the table and then clear the deprecated HTML properties shown in the screen shot below:
  3. Add a stylesheet called styles.css in the same folder.
  4. Create rules for the following:
    1. All caption elements should be bold and left-aligned with white text and a dark blue background.
    2. All table headers (th) should have dark blue text and should have 4 pixels of padding on all sides.
    3. All table data cells (td) shoud have 4 pixels of padding on all sides.
    4. All odd rows starting with the one under the table header, should have a light gray background color (#ccc).
    5. The heading 1 (h1) should be centered.
    6. The table should be centered. To center the table, you will need to change the left and right margins to "auto".
  5. When you're finished, open the page in your browser. It should look like this:

Solution:

There are different ways to accomplish this look. To compare how you did it with our solution, look at the CSS Styles panel. In the top part, you will see the selectors. Ours look like this:

Click on each selector (e.g., caption) individually and compare what you have with what we show below:

Attaching an Existing Style Sheet

Style sheets that are saved as separate files can be used over and over again. To illustrate this:

  1. Open ClassFiles/Dreamweaver/Exercises/sales-report.html in Dreamweaver.
  2. Click somewhere in the table and then clear the deprecated HTML properties shown in the screen shot below:
  3. In the CSS Styles panel, click on the Attach Style Sheet icon:
  4. Using Dreamweaver CC: In the CSS Designer panel, click on the Add CSS Source and choose Attach Existing Style Sheet icon:
  5. In the Attach External Style Sheet dialog, browse to styles.css in the ClassFiles/Dreamweaver/Exercises folder:
  6. Click OK.
  7. Select the last table row showing the Grand Total and enter an id of "summaryrow":
  8. Create a rule using an ID selector that sets the background color to dark green and the font to white and bold. The page should look like this:

Style sheets that are saved as separate files can be used over and over again. To illustrate this:

  1. Open ClassFiles/Dreamweaver/Exercises/sales-report.html in Dreamweaver.
  2. Click somewhere in the table and then clear the deprecated HTML properties shown in the screen shot below:
  3. In the CSS Styles panel, click on the Attach Style Sheet icon:
  4. Using Dreamweaver CC: In the CSS Designer panel, click on the Add CSS Source and choose Attach Existing Style Sheet icon:
  5. In the Attach External Style Sheet dialog, browse to styles.css in the ClassFiles/Dreamweaver/Exercises folder:
  6. Click OK.
  7. Select the last table row showing the Grand Total and enter an id of "summaryrow":
  8. Create a rule using an ID selector that sets the background color to dark green and the font to white and bold. The page should look like this:
Next