ISTA 230 Introduction to Web Design (Spring 2017)

HTML Tables

Wade Morrison has a problem. He is in love with a girl whose father does not approve. In a last ditch effort to convince the man that he is worthy to marry his daughter, Wade has created a delicious soda and developed a web site to help sell his new drink.

While most of the site has come together nicely, Wade lacked the HTML and CSS skills necessary to properly display the nutritional information for his soda. Instead of using an HTML table, Wade decided to use <pre> tags (which you'll remember displays all white-space).

Nutrition information using HTML tables

You have been hired to take the nutritional information from <pre> tags and put it into a formatted and accessible HTML table. All necessary files can be downloaded here. You are to perform the following tasks:

You are expected to modify both the CSS and HTML files for this exercise. When finished, your HTML table should look roughly like the following:

Nutrition information using HTML tables

Solution

Solution can be downloaded here.