MAT 125: Web Design 1: Fundamentals : EXERCISES

<< .. Go to .. Home .. Class Demos .. Previous Exercise < .. > Next Exercise .. >>

Exercise 5:
TABLES

In this exercise we will build tables to organize data. A place for everything and everything in its place!

HTML Elements

  • <table> </table>
    • border="pixels"
    • width="pixels"
    • cellpadding="pixels"
    • cellspacing="pixels"
    • bgcolor="#xxxxxx"
  • <caption> </caption>
  • <tr> </tr>
  • <th> </th>
  • <td> </td>
    • rowspan="# of rows"
    • colspan="# of columns"
    • align="x"
      • left, right, center
    • valign="x"
      • top, middle, bottom, baseline

CSS: Border Styles

  • <style> </style>
    • type="text/css"
  • table {property: value;}
    • border-style: n;
      • dotted, dashed, double, groove, ridge, solid, none
    • border-color: x;
      • hex code or color name
    • border-width: x;
      • pixels or thin, medium, thick

Exercise Requirements

  • This is a multiple page exercise!
  • Create at least 6 tables exploring how all the different tags and attributes can be used. MORE is better. Use different variables and sizes.
  • Use CSS classes to try all the different border styles.
  • For content, you can write about what each tag does or make up your own creative content.
  • Link all pages - make sure I can tell which is page one of your exercise.

NOTE: be sure to add varying amounts of information in the cells so valign will work. One word in one cell, a long sentence in another, an image in a third.

Images

  • optional - but nice
  • the background attribute can be used in the table, tr and td tags. background="image.jpg"

Design Process and Final Presentation

  • Create a project folder named "YourLastNameE5"
  • Create as many HTML documents as you need. Name your first page index.html. Link all pages.
  • Add text, images, links and tags as needed.
  • Save all HTML docs and images in your project folder.
  • Review your work in a browser before uploading to the server
  • Upload your HTML documents to the school server and view them in a browser.

Evaluation

This exercise is worth 25 points.

  • Coding (5)
  • Functionality (5)
  • Meeting project requirements (5)
  • Your effort (7)
  • Meeting deadlines (3)

Due Date

Text Reference

  • Chapter 8: pg 129 - 139
  • Review Lecture in Course Content on Blackboard

Online Demos

  • Demos for Exercise 5
  • Exercise 5 TAGs and Attributes defined

<< .. Go to .. Home .. Class Demos .. Previous Exercise < .. > Next Exercise .. >>