Project Goals

Our goal for this project is to take a table of financial information and style it for both screen and print output while adding as little as possible to the markup. We'll accomplish this mainly by adding class and ID hooks to the elements already in place.

For this project, upper management has given us a detailed set of design goals:

• The Totals row at the bottom of the report should stand out visually, preferably by boldfacing the figures.

• The labels (both across the top of the report and down the side) should be right-justified and should be separated from the figures by gray lines. The top labels should be separated by gray vertical lines.

• In a browser, each line of the report should be separated from the others by a light gray line. In print, every other row should have a light gray background, and columns should be separated by light gray vertical lines.

• Any negative number should appear as red with a yellow background in a Web browser and as italicized in print.

• The profits (in the rightmost column) need to be visually highlighted in some fashion.

• All dollar amounts should line up at the decimal point, and all others should have their thousands-separator commas line up.

In addition, we've been given the vague (but useful) directive to "make things look good." So, with those goals in mind, let's get things underway.