Applying Styles To Data Tables

Previously, you created a table in your test web page. Today, you will apply CSS styles to that table and understand the difference between formatting that affects one table (in-line formatting) and formatting that affects al of your tables (style sheet formatting). Refer to your table handout for specific examples. You must enter at least three different styles to your tables.

  1. First, copy and paste your table within the bady tags to create a second table on your web page.
  2. Create a style section for the Selector table within the <style> tags. Remember the format is Selector {property:value;}
  3. You can enter all three fo your Properties and values within the one set of curly brackets. In the example, I used a variety of Properties.
  4. In table 1, use the <th> tag to create an additional row that spans all columns.
  5. In table 1, add the property border to the table tag.
  6. In table 2, add <th> tags to create colspan and rowspan as indicated in the handout. Add additional rows as needed.
  7. Remember to view your work in the browser periodically to ensure that all is well.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License