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 file table.htm, which 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. If you haven't already done so, 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 © 2005-2008 by University of Washington. Permission is granted to use these materials in whole or in part for educational, noncommercial purposes provided the source is acknowledged. This product was created with support from the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306), and is maintained with support from the National Science Foundation (grant #CNS-054061S). The contents do not necessarily represent the policies of the U.S. federal government, and you should not assume their endorsement.