Web Design & Development I

UNIT 3 > MODULE 1

Lesson 3: Applying Styles to Data Tables

Overview

In the previous two lessons you have learned how to use CSS to stylize HTML documents. Practically any HTML element can be stylized. In this example, you will continue to practice applying CSS, by stylizing the various elements of the data table you created in an earlier lesson.

Learner Outcomes

At the completion of this exercise:

• you will be able to apply CSS to the various tags that make up an XHTML data table.

Activities

1. Open the table you created in the earlier exercise on Creating a Data Table.
2. Review your table's source code. At a minimum, it should include the following HTML elements:

   <table>
   <caption>
   <tr>
   <th>
   <td>
   

3. Add a <style></style> section to the top of the web page.
4. Add style declaractions for each of the above HTML elements. Try applying different styles, colors, borders, backgrounds, etc. Be creative, but try to maintain a professional look.
5. Each time you apply a new style, save the page and view it in your browser.

Handouts/Online Documents

• The earlier exercise on Creating a Data Table
• CSS2 Specification
• CSS2 Properties Index
• WDG Guide to Cascading Style Sheets
• WDG List of CSS Properties
• CSS Zen Garden
• Wellstyled Color Scheme Generator
• VisiBone Webmaster's Color Lab

All done?

Show your instructor your results before starting the next module.

Copyright © 2006 by University of Washington. Permission is granted to copy these materials for educational, noncommercial purposes provided the source is acknowledged. This product was funded by the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306). However, the contents do not necessarily represent the policy of the Department of Education, and you should not assume their endorsement.