CSCI 150 Homework 9

CSCI 150 Homework 9
Tables

Goals

Write some more HTML
learn about the <table> tag
To draw the calendar page for April 2003

Background

Tables occur naturally in many contexts, but in html we use them for formatting purposes in places where they seem less intuitive.

To build a table, you use three different kinds of tags:

a <table> tag and its matching </table> tag
a <tr> tag (tr stands for table row and an optional matching </tr> tag.
a <td> tag (td stands for table data and an optional matching </td> tag.

The whole table is enclosed by the <table> tag and its matching </table> tag. Each row is begun with a <tr> tag, and each separate item is begun with a <td> tag. Although matching </tr> and </td> are not required by either Netscape or Internet Explorer, it is a good idea to use them anyway.

Heres an example:

<table>
  <tr>
    <td> 1,1 </td>
    <td> 1,2 </td>
    <td> 1,3 </td>
  </tr>
  <tr>
    <td> 2,1 </td>
    <td> 2,2 </td>
    <td> 2,3 </td>
  </tr>
  <tr>
    <td> 3,1 </td>
    <td> 3,2 </td>
    <td> 3,3 </td>
  </tr>
</table>

Which produces

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

Tables can be used:

For aligning pieces of text on the page
For example, one way of placing a caption next to a picture is to put the caption and the picture in adjacent cells of a table.
For isolating text from surrounding influences
For example, one way of neatly centering a list is to put the whole list as an item in a table, like this:
```
  <center>
    <table>
      <tr>
	<td>
	  <ol>
	    <li> first
	    <li> second
	    <li> third
	  </ol>
	</td>
      </tr>
    </table>
  </center>
```
which produces:
first
second
third
For controlling the placement of items on a page.

You can place a border around a table with a border = command in the <table> tag, like this:

<table border = "2">
  <tr>
    <td> 1,1 </td>
    <td> 1,2 </td>
    <td> 1,3 </td>
  </tr>
  <tr>
    <td> 2,1 </td>
    <td> 2,2 </td>
    <td> 2,3 </td>
  </tr>
  <tr>
    <td> 3,1 </td>
    <td> 3,2 </td>
    <td> 3,3 </td>
  </tr>
</table>

Which produces

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

You can also add width = and height = commands to <table> and <td> tags.

The data inside a <td> tag can be anything, in particular tables can be nested inside other tables.

Procedure

For this assignment you will use html to draw a calendar page for the month of December.

You must write in html; don't use a web-page editor. Indent your code so that it's not too hard to read and grade.

Centered at the top of the page will be the words "April 2003" in large print.
The days of the month will appear as five rows of seven boxes per row. Each should be at least 1 inch by 1 inch, so there's room to write on a printout.
A heading above each column of boxes will indicate the day of the week,
For each day, a large number telling the day of the month will appear in the uppler right-hand corner of the appropriate box.
For Sundays and Easter (April 20), the date will be printed in red; all other days should be in black.
At the bottom of the box for Easter the word "Easter" should appear. (You can use a nested table to position it.)
In the Friday box of the last week put a miniature calendar of the days of May, 2003. (A nested table, of course.)
Many calendars give the phases of the moon. For April there is one full moon, on April 16, the new moon is April 1, and the first and last quarter are on April 9 and April 23. You may use these images:

full moon

firstquarter moon

lastquarter moon

new moon

A quick glance at almost any calendar will give you a clear idea of what each of these will look like.

You will turn in

A cover sheet.
A printout of your calendar page.
A printout of the html which generates it.
Email a copy of the html file to me at croyden@mathcs.holycross.edu