Exercise 7

The goal of this exercise is to work with tabular data and table styling.

Due Date and Time

Exercise 7 is due by 5:59pm on March 21st, 2019. I will disable submission at the start of class.

Instructions

Setup

  1. Download the exercise files from the Box Folder named CS0134-E7-<username> that I shared with you.
  2. Unzip and copy the ‘CS0134-E7-<username>’ folder onto your flash drive.
  3. Open toys.html and style.css in Notepad++.

Goals

Each goal is worth 1 point unless otherwise marked. Total of 12 points.

Place all style rules in the style.css file.

  • In toys.html
    • Add the column scope to the th for Toy Name and the th for Price
    • Add three rows to the tbody element containing pet toys of your choice with made up prices (3 points)
    • For each of the three rows you added above, add the headers attribute to each td element and set the value to hdr-toy and hdr-price for toy name cells and price cells respectively (3 points)
  • In style.css
    • Set border-collapse to collapse for the table element
    • Set width of table element to 100%
    • Set a 1px solid border in grey on the th and td elements
    • Set text-align to right for the all td elements with the headers attribute set to hdr-price (use attribute selector)
    • Set the even table rows within the tbody element to have a background color of light grey

Results

Your site should look similar to the following.

toys.html after Exercise 7

How to Submit Your Work

Upload your toys.html and style.css files to the ‘CS0134-E7-<username>’ Box folder.

Note: When you want to upload a new version of one of your exercise files, click on the file in box and select “Upload New Version”.

I highly recommend that each time you work on this or any other exercise, that you upload your files to Box even if you are not done with the exercise. In this way, if something happens before the submission deadline that keeps you from uploading the finished exercise, there is still something to be graded.