Assignment - Tables

The object of this assignment is to use tables.

Read everything before doing anything.

Part 1

Make up a table of data. Your table must have at least four rows and four columns. It must have at least one rowspan and one colspan specifier. (And yes, the value of the attribute must be greater than one!)

This does not have to be real data; you can make up numbers. However, the table does have to make sense. Please name this file my_table.html, put it in the assignments folder, and make sure there is a link to it in your index.html file.

Part 2

Create a file named assignment_table.html which displays the following table. Click the picture for a large image that you can print and draw lines on.

Complex table for assignment

Hint: Here is the table with some helpful lines drawn on it.

The morning hours, anything before 12:00 p.m., appear in light yellow (#ffffcc). Afternoon hours, defined as 12:00-4:00 p.m., are in light green (#ccffcc). Evening hours, 5:00 or later, are in light blue (#ccccff).

The times must be right-aligned so that the colons line up. The topics must be centered. The names of the days of the week must be left-aligned. The table headings must use the <th> element. The table must have a cell padding of four pixels. The page must have a title (and a level one heading) of “XML in Three Days”

Added 26 October To get borders on your table, add this to your internal stylesheet:

table {
  border-left: 1px solid gray;
  border-top: 1px solid gray;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

th, td {
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 4px;
}

This will give you an effect much like the one you see in the screenshot. I am more concerned about correct placement of the data in the table cells than the way the border looks.

Remember to put a link in your assignments/index.html page that goes to assignment_table.html.