HTML Assignment 5

Let's set the table...

Once	You	Set	`up`
a table
	may N e v e r		Go
`you`			Back!

...and completely revolutionize ordinary web pages

The image above is really a table, actually a table within a table. (The code for this was taken from lesson 21 of "Writing HTML".) The outer table is a 2 x 2 grid and it holds the words in the cells in the first column and the other table the second column. There are several new tags in the code:

table marks the beginning of a table definition
tr are table row defintions.
td are table data definitions (one cell)
rowspan can be used to create cells that stretch across more than one row.
colspan can be used to create cells that stretch across more than one column.
align = right (or left or center) to allign the words horizontally in the cell.
valign = right (or left or center) to allign the words vertically in the cell.
border = determines the thickness of the border in pixels.
border color = sets the color of the border.
cellpadding = the amount of space (in pixels) between the cell contents and its walls.
cellspacing = is the amount of space (in pixels) between the cell contents and its walls.

If the border size is set to 0, the table itself is invisible, like the words on the left above. It allows alignment of the text that doesn't change when you resize the browser window. This example makes it very clear that each cell is an entity that can use all the tags of a page (font size, color, allignment; bgcolor; text type; breaks and paragraphs)

Now here is a simpler example that will make clear the order that data is entered into cells and how the column and row span works.

Row 1 col 1	Row 1 col 2	Row 1 col 3
Row 2 col 1	Row 2 col 2	Row 2 col 3
Row 3 col 1	Row 3 col 2	Row 3 col 3

Row 1 col 1 & 2		Row 1 col 3
Row 2 col 1	Row 2 and Row 3 col 2	Row 2 col 3
Row 3 col 1	Row 2 and Row 3 col 2	Row 3 col 3

This example has an outer table of 1 row and 1 col to hold the two inner tables. The table on the left shows clearly the placement of the cells and the order in which they are entered. The one on the right uses both colspan and rowspan to combine cells. Be sure to exclude definition of the cells that are spanned by previous cells.

Assignment 5

Planning is essential to make a good table. Choose a topic for your table (your schedule, sports events, stats on your favorite team, recording artists and there work, etc.) It should be about something you already introduced on page two or three. Make a drawing of the table, complete with the data in each cell. SHOW ME YOUR DRAWING BEFORE you make your table. Make the table on a new page (a5.htm) and put a link to it from information on page 2 or 3. You may add other information to this page as you have time and feel is appropriate.