table assignment explained

This week we learn about tables.

Here are a couple of examples to refer to. These will open in a new window, so you can view the source code. Make sure you view the css code, too!
Linda's example
Dave's example

Preparation:

Text: Chapter 13 - Getting Tabular: tables and lists

In the old days (3 years ago), we taught web design by means of using tables to position content on the page. It had its limitations, but it was certainly better than a straight linear presentation. Now that we've moved to using CSS to position elements on a page, we can use tables for their original purpose - to present tabular information.

I will post the taping of the class

CD: View lesson 5 (optional)

For Credit:

1. Develop an HTML page which has the following elements:

   1. (10 pts) Include a table of at least four columns and four rows, using the table, tr, th, td, and caption elements. Also include a summary attribute.
      

   2. (10 pts) Use box properties, background-color, color, and padding or margin properties to style your table. Use any other properties that appeal to you.
      

   3. (5 pts) Use the colspan and rowspan attributes at least once each within your table code.
      

   4. (10 pts) Use a nested table with at least 2 rows and 2 columns in your table.

   5. (5 pts) Include an image or a background image in your table.
      

   The webpage must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code. Note that points will be deducted from your score for each error in your XHTML or CSS code.

2. Upload your webpage and css file to the server. Upload them directly into your public_html folder, not into a subfolder.

3. Update your homework page so it now links to your table code.

View a sample homework page

You do not need to submit a URL this week since the student work page has a link to yoru homework page, and I will grade your work from there.

http://www.santarosa.edu/~lhemenw/html2/student-work.html