Project Overview

Project 11

In this project your will be introduced to the concept of creating tables with html and css.

You will apply your new knowledge to create two different tables that are responsive and styled to look appealing.

Lecture Note Links

W3 schools has ample notes on this topic and a very good test area to allow anyone to test out the core ideas on this topic.

I will be be covering these core ideas for creating tables.

Quiz 7

Lecture Videos

Lab Directions

Lab 11

Creating Tables
After viewing and practicing the techniques for creating tables, create a responsive webpage that contains two different tables. Use the following images as your target design.

image 1 old fashion cookie table image 2 college course table

Use this text for the cookie table:

  • Our old-fashioned, hand made cookies are an excellent gift for many occasions.
    Do you need a homemade gift for college students needing a goodie box from home,
    new neighbors, a thank you for someone who has done something nice for you, a
    special customer, or anyone deserving of a very special treat?!
  • Pure Ingredients
    All of our cookies are made from scratch the old-fashioned way using the finest quality,
    all natural ingredients like gourmet semi-sweet chocolate, premium flour, unsalted sweet
    cream butter, eggs, vanilla and fresh nuts. We use no preservatives, no transfats, and no
    artificial flavors or colors.
    Free Shipping
    All of our treats are baked, wrapped carefully for ultimate freshness, and shipped by United States Postal Service Priority Mail. The cost of shipping is included in the price of the cookies.

Use this text for the college course table:

Required Content

I expect that each of you can look at a reference image, like the table images I have provided, and break them down into the core required pieces. As designers you need to develop an eye for detail so you need to match the details of the tables, in colors, captions, bold text, text alignment, etc, without being explicitly told to do so.

Use the following tools to help choose colors and select color palettes:
Adobe color

To get full credit your final tables should look, in every way, like the examples. It is also permittable to improve upon the examples and expand your skills to go beyond the basics.


Make sure you validate your code to ensure it is correct. Sumbit the URL through the dropbox and upload the html document as an attachment.

All content Copyright © 2017 Derek Dallas all rights Reserved