Comp25: HTML - Tables

Learning Objectives

To use tables to enhance the appearance and functionality of your website in a variety of ways

Open your products.html page for editing. Remember that we recently added information about all of the products that you sell. It's time to clean up the appearance of this page using tables.
Create a new table near the top of the page with code similar to the following:

Copy-and-paste the second row from our sample as many times as necessary to create additional rows for each of your products. Preview your new table to make sure it looks correct.
Using the descriptions and images that you have already written, transfer (using cut-and-paste) your previously written content into the appropriate data cells (td). Each product should end up in its own row.
1. Create a four-digit product code
2. Enter the product name
3. Paste the description along with your bullet point benefits
4. Paste the product image
Preview your completed table and correct any mistakes in your code. Once you have transferred your product content into the table, delete the original content.
Using Paint or some other photo editing tool, edit your product photos so that they are not super huge and look similar to each other in size.

Enhance the appearance of your tables.

Edit your existing style sheet with the following styles: (NOTE: The colors are examples only --- use your own color schemes and preferences.)
After saving your style sheet, refresh your webpage to see your table styled like the following:

Edit your stylesheet to change the appearance of your tables further. Refer to the reading for additional table styles.
Upload products.html to Blackboard when you are finished.

This assignment will be graded using the following guidelines: