back to the Agenda | Assignment #5

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 align the words horizontally in the cell.
valign = right (or left or center) to align 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.

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.

You may notice that sometimes I've used the STYLE tag and other times I have used attributes to set 'CSS values'.
You are to EXCLUSIVELY use STYLE tags to do all formatting.
(I want you to see that it works the 'old way' / and you may encounter that on webpages, but you should ONLY use the 'newer' way of using the STYLE attribute to set values.

In addition, I am choosing NOT to introduce THEAD / TBODY at this time. We will look at that together next week.

You are to create a page with 3 tables that relate to topics you have discussed thus far on your webpages.

1. Table 1: General basic table.
2. Table 2: Get a little more creative.
3. Table 3: Do something funky! Have fun with it.