More About Tables - Intermediate Level

e08a - (3:18)
- History of tables on the web.
e08b - (1:41)
- The align and valign attributes.

e08c - (1:06)
- Caption tag:
  - By default the <caption> tag contents are displayed along the top edge of a table and centered.
  - Useful for readers for the visually impaired.
  - You may want to make them <strong>.

Spans

e08d - (8:19)

The following is an ordinary table with four columns and five rows:

**Party Time Food Delivery Service**
It's Party Time!
Johnny's Joint	Specials
	Ribs	Wings	Taters
Preacher's Pizza	Specials
	Sicilian	Deep Dish	Cheese Champ

This is the same table using rowspans and colspans:

**Party Time Food Delivery Service**
It's Party Time!
Johnny's Joint	Specials
Johnny's Joint	Ribs	Wings	Taters
Preacher's Pizza	Specials
Preacher's Pizza	Sicilian	Deep Dish	Cheese Champ

Caption, rowspans and colspans used by the table above:

**Caption tag contents go here**
row 1, cell 1, <th>, colspan=4, <h2>
row 2, cell 1, <th> rowspan=2	row 2, cell 2, <th>, colspan=3
row 2, cell 1, <th> rowspan=2	row 3, cell 1 <td>	row 3, cell 2, <td>	row 3, cell 3, <td>
row 4, cell 1 <th> rowspan=2	row 4, cell 2, <th>, colspan=3
row 4, cell 1 <th> rowspan=2	row 5, cell 1 <td>	row 5, cell 2, <td>	row 5, cell 3, <td>

Assignment

Important assignment information:
- For any empty cell, put in a non-breaking space (   ) otherwise the cell may not appear normally in some browsers.
- e08e- (4:44)
  - Below are illustrations of two tables. The first table has no spans, the second table does. Follow the instructions below. Use the table code above to guide your decisions. The exercise table below is not the same as the one above, but the same principles apply.

Create a folder named yourlastname_e08
Create a new html file.
Save it in the folder as yourlastname_ e08_before.html
Create a table. Include:
- In the table tag include this attribute and value:
  - border=1
- Put in the text shown.
- Note that cells containing an "X" are not bold or centered. Please use the proper cell tag for those and also use that tag for the empty cells.
- Tip: Think how to do this easily by copying and pasting a cell then a row.

Table Exercise - Table Before

Copy the file you created above.
Name the copied file: yourlastname_ E08_after.html
Save it in the same folder as above.
Convert the copied table into the following table. Include:
- rowspans and colspans as needed.
- The caption
- The text as shown.
- Use the html align and valign attributes where needed.
Zip and send me the folder with both files in it.

Table Exercise - Table Before