A5 – HTML and CSS for Tables


Objectives: Gain experience using building tables with HTML and using CS to format them.

Description: In this assignment you will develop a page that includes tables, and apply CSS to give the table a professional appearance.


Structure an HTML Page

Use Notepad++ to develop an html page that shows current average starting salaries for IT positions.

Name your file assn05.htm.

As always, work on a local copy and then upload it to the server. (classweb.cob.isu.edu) using these directions.

Useful Downloads

Here are some useful downloads:

  • The text for the web page content can be downloaded here.

Head Element

The head section should include the following line to enable the table behavior:

<script type="text/javascript" src="http://homepages.cob.isu.edu/parkerkr/courses/INFO1110/Spring15/assignments/scripts/assn5.js"></script>

Be sure to take a peek at the JavaScript file to see if you can figure out how it works: link. Note that it works almost like advising tables: link

Table Functionality

First, be sure that you included the link to the JavaScript file, as explained in the section titled "Head Element".

When the page is first opened you can see the introductory text and a table of salary data. When you click on a job row, a row opens below it listing salary enhancements. If you click that row again or if you click the description, the description closes. Multiple descriptions can be opened at a time.

Visual Guidance

  • Your web page should resemble the demo page as closely as possible.

HTML Details

Be sure that your modified overview page includes the following features:

  • Use a header for the h1 tag and the logo image.
    • The h1 should appear on the left.
    • The logo should be on the right.
    • See CSS Details for more.
  • Your body tag should look like this

    <body onload="prepPage();">

  • Use a section for the introductory text and table.
  • Include a table
    • The table must include a caption.
    • The table must include a thead with one table row.
    • The table must include a tfoot with two table rows. You will need to include a colspan attribute in the td tags.
    • The table must include a tbody.
    • Every odd numbered table body row consists of job title, low end salary, high end salary, and percent change since last year.
    • Every even numbered table body row spans four columns, should be assigned the class "orangetint".
      • Every td in even numbered tr tags should be assigned the class "descr".
    • Every tr tag in the table body should include these attributes:
    • onclick="toggle(this)" title="Click to toggle course description."

CSS Details

Please try to follow the order below when creating your CSS selectors.

The CSS for the introductory section is very similar to what you used in A4.

  • My solution only reused the A4 selectors for universal (the spec for font size was removed), body, h1 (the spec for font family was removed), img#logo, and header.

The CSS for the table is the real challenge in this assignment.

  • For the table tag you want the following:
    • Set the font family to Verdana, "Times New Roman", serif , proportional.
    • Collapse the border.
    • Set border to...
    • Set the padding to 2 pixels.
    • Set margin to auto.
    • Set margin bottom to 3 em.
    • Set color to #262626.
    • Show empty cells.
    • Set table layout to auto.
  • The CSS for the table caption is exactly like the example in the notes. You will not need to include the "caption p" selector.
  • thead needs a background color of #F5FFFA.
  • Table header (th) requires the following
    • Align text in the center.
    • Vertically align text in the middle.
    • Set a left and right margin of 1 em.
    • Set a thin white solid right border.
    • Set background color to #F48D0D.
    • Set color to #313131.
  • tfoot needs a background color of #D3D3D3.
  • The selector for a td inside a tfoot should include
    • Set border to none.
    • Set font size to 0.85 em.
  • The selector for a p and a ul inside a td inside a tfoot should include set font-size to 1 em.
  • Table data (td) should include
    • Vertically align text in the middle.
    • Set a left margin of 1 em.
    • Set a right margin of 5 em.
    • Set a thin #F7AF56 solid right border.
    • Set a thin #F7AF56 solid bottom border.
    • Set padding to 0.25 em on top and bottom and 0.5 em on right and left.
  • There must be a combined class and element selector named "orangetint" for tr cells.
    • Set the background color to #F7AF56.
    • Set the color to #1A1A1A.
  • Next the combined class and element selector "descr" for td cells.
    • Left align the text.
    • Vertical align the cells to the middle.
    • Set border to none.
  • The next four selectors are pseudo structural classes. Oh no!
    • Use td:nth-child to right align even numbered columns.
    • Use td:nth-child to right align column 3.
    • Use td:nth-child to put a thin white solid right border on column 4.
    • Figure out how to use tr:nth-last-child to put a thick white solid bottom border on the last visible row. Note that the last visible row will be an even numbered row!

Notes

  • Your lines will not break where the demo lines break. The demo screen shot was taken in Chrome, full screen, with a negative zoom. Do not use <br/> tags to force artificial breaks.
  • Name your file assn05.htm.

Alternative Versions

  • If you wish to express your creativity by coming up with a more visually appealing page than the demo, feel free to do so. While you must upload a version of the assignment that meets the specs so the grader can do an efficient job, I would welcome the opportunity to see how creative you can be. An alternate version would provide you with additional practice as well.

Reminder! You should ALWAYS do the following, whether I specify it or not.

  • Include the HTML5 doctype.
  • Include a title using the title tag.
  • Nest your tags correctly.
  • Indent code correctly.
  • Validate your html using the W3C HTML Validator.
  • Validate your css using the W3C CSS Validator.
  • Link your page to your index page. There will be a 15 point deduction if you fail to do so.
  • For each assignment that you set up this semester you need to include adequate commenting. For example, in the first part of this assignment you might include a comment block like the following at the top, per the instructions at the bottom of the Assignments Page:

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
           Ima Student
           April 1, 2018
          Assignment 5
          Purpose: This web page....
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->