Forms / Tables Assignment Explained

Listed below are the steps you need to follow to complete the tables and forms assignments.

1. Read Chapter 6 "Creating Interface Components" (pgs 175-205). The author presents properties which can be used to style tables and forms. Since forms are often presented within tables these 2 elements are a natural combination.
   
2. Open the DVD > css-part2 > start-here.html > tables & forms lesson. Here is a list of what you need to watch for the table assignments.
   # table HTML
   # box table
   # horizontal zebra
   # vertical zebra
   # one column emphasis
   # background image
   # table sampler
   # hover hack for IE
   
   Create a table sampler page which has the tables shown on the DVD.
   
3. Next view the DVD lessons
   # style form pt 1
   # style form pt 2
   
   Then create a form which has these styles:
   
   Colorize the input areas where visitors enter information, style the submit button, and the text that display on the form.
   
4. If you have extra time review the additional tables found on this Web page:
   http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
5. If you have extra time try and duplicate the form demonstrated in the textbook.
6. Now open the "homework.html" page and activate the links for the tables & forms lesson. This will require you to create a link to these files:
   
   Table Sampler
   Styled Forms
   
7. These files will be placed in the folders indicated below
   
   sample folder
   
   "tables-sampler.html"
   "form.html"
   
   If you have background images in the table or form, load them into the samples folder also.
   
8. Please upload the files (including your modified homework page) onto "student". Use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created.
9. I will use the "student work" page to grade your work.