Unit 5 - Tables Associated Web Pages Descriptions And HTML Code 1. badsampletable.html — This table looks fine, but when you look at the HTML code, you'll see it lacks the details that provide context. Filename: badsampletable.html <--Begin Web Page Description--> Page Title: Sample table without contextual markup This is a ruled table with navy blue text against a white background. Table Caption: Source of Contact Table has four columns and eight rows. Row 1 (Heading Row) Row 1, Column 1: Blank Row 1, Column 2: Male Row 1, Column 3: Female Row 1, Column 4: TOTAL Row 2, Column 1: Family (Heading) Row 2, Column 2: 32 Row 2, Column 3: 55 Row 2, Column 4: 87 Row 3, Column 1: Peer (Heading) Row 3, Column 2: 21 Row 3, Column 3: 27 Row 3, Column 4: 48 Row 4, Column 1: Self (Heading) Row 4, Column 2: 15 Row 4, Column 3: 22 Row 4, Column 4: 37 Row 5, Column 1: Supervisor (Heading) Row 5, Column 2: 46 Row 5, Column 3: 53 Row 5, Column 4: 99 Row 6, Column 1: Union (Heading) Row 6, Column 2: 19 Row 6, Column 3: 12 Row 6, Column 4: 31 Row 7, Column 1: Other (Heading) Row 7, Column 2: 25 Row 7, Column 3: 34 Row 7, Column 4: 59 Row 8, Column 1: TOTALS Row 8, Column 2: 158 Row 8, Column 3: 203 Row 8, Column 4: 361 <--End of Page Description--> <--Begin HTML Code--> Sample table without contextual markup

Source of Contact
	Male	Female	TOTAL
Family	32	55	87
Peer	21	27	48
Self	15	22	37
Supervisor	46	53	99
Union	19	12	31
Other	25	34	59
TOTALS	158	203	361

<--End HTML Code--> 2. goodsampletable.html — Another version of the "bad" table that looks exactly the same but provides the contextual information that is important to screen reader users. Filename: goodsampletable.html Page title: Sample table with markup that provides contextual information This table also contains the same information as the page in example 1, so we will not duplicate it here. The significant difference with this table -- which will be demonstrated by hearing the page read by a screen reader -- is that the HTML has been written to provide the maximum amount of context for non-visual visitors. <--Begin HTML Code--> Sample table with markup that provides contextual information

Source of Contact
	Male	Female	TOTAL
Family	32	55	87
Peer	21	27	48
Self	15	22	37
Supervisor	46	53	99
Union	19	12	31
Other	25	34	59
TOTALS	158	203	361

<--End HTML Code--> 3. oceaniaholidays.html — Laying out tables isn't always about rules. Sometimes, as demonstrated here, you need to think about what information you're trying to convey. Filename: oceaniaholidays.html Page Title: Oceania Official Holidays - Simple Table Design Example Page Format: Black text on a white background. Page Heading: Simple Tables The first table was designed to parallel the paper memo that went out to all staff as a quick and easy way of designating Oceania's Official Holidays. It worked well in a paper format, and no one complained. However, when we posted it to the web site, one of our customers wrote to complain that our holiday list was jumbled. Table Caption: Oceania Official Holidays, 2004 Table of two columns, six rows, no headers Row 1, Column 1: 1. New Year's Day (Jan 1.) Row 1, Column 2: 7. Labor Day (Sept. 6) Row 2, Column 1: 2. Dr. Martin Luther King Jr. Day (Jan. 19) Row 2, Column 2: 8. Colombus Day (Oct. 11) Row 3, Column 1: 3. Lincoln's Birthday (Feb. 12) Row 3, Column 2: 9. Election Day (Nov. 2) Row 4, Column 1: 4. Washington's Birthday (Feb. 16) Row 4, Column 2: 10. Veteran's Day (Nov. 11) Row 5, Column 1: 5. Memorial Day (May 31) Row 5, Column 2: 11. Thanksgiving Day (Nov. 25) Row 6, Column 1: 6. Independence Day (July 5) Row 6, Column 2: 12. Christmas Day (Dec. 25) This particular customer accesses our site using a screen reader. When we realized why the information was reported to him in a seemingly unorganized fashion, we changed the table to split up the two types of data being presented — one of the problems with the original table — he was able to hear the holidays in order, and the information was much easier to understand. Table Caption: Oceania Official Holidays, 2004 Table of two columns, thirteen rows, plus a header row Header Row: Column 1: Date Column 2: Holiday Row 2, Column 1: Thursday, January 1 Row 2, Column 2: New Year's Day Row 3, Column 1: Monday, January 19 Row 3, Column 2: Dr. Martin Luther King, Jr. Day Row 4, Column 1: Thursday, February 12 Row 4, Column 2: Lincoln's Birthday Row 5, Column 1: Monday, February 16 Row 5, Column 2: Washington's Birthday (Observed) Row 6, Column 1: Monday, May 31 Row 6, Column 2: Memorial Day Row 7, Column 1: Monday, July 5 Row 7, Column 2: Independence Day (Observed) Row 8, Column 1: Monday, September 6 Row 8, Column 2: Labor Day Row 9, Column 1: Monday, October 11 Row 9, Column 2: Columbus Day Row 10, Column 1: Tuesday, November 2 Row 10, Column 2: Election Day Row 11, Column 1: Thursday, November 11 Row 11, Column 2: Veteran's Day Row 12, Column 1: Thursday, November 25 Row 12, Column 2: Thanksgiving Day Row 13, Column 1: Saturday, December 25 Row 13, Column 2: Christmas Day <--End Page Description--> <--Begin HTML Code--> Oceania Official Holidays - Simple Table Design Example

Simple Tables

The first table was designed to parallel the paper memo that went out to all staff as a quick and easy way of designating Oceania's Official Holidays. It worked well in a paper format, and no one complained. However, when we posted it to the web site, one of our customers wrote to complain that our holiday list was jumbled.

Oceania Official Holidays, 2004
1. New Year's Day (Jan 1.)	7. Labor Day (Sept. 6)
2. Dr. Martin Luther King Jr. Day (Jan. 19)	8. Colombus Day (Oct. 11)
3. Lincoln's Birthday (Feb. 12)	9. Election Day (Nov. 2)
4. Washington's Birthday (Feb. 16)	10. Veteran's Day (Nov. 11)
5. Memorial Day (May 31)	11. Thanksgiving Day (Nov. 25)
6. Independence Day (July 5)	12. Christmas Day (Dec. 25)

This particular customer accesses our site using a screen reader. When we realized why the information was reported to him in a seemingly unorganized fashion, we changed the table to split up the two types of data being presented — one of the problems with the original table — he was able to hear the holidays in order, and the information was much easier to understand.

Oceania Official Holidays, 2004
Date	Holiday
Thursday, January 1	New Year's Day
Monday, January 19	Dr. Martin Luther King, Jr. Day
Thursday, February 12	Lincoln's Birthday
Monday, February 16	Washington's Birthday (Observed)
Monday, May 31	Memorial Day
Monday, July 5	Independence Day (Observed)
Monday, September 6	Labor Day
Monday, October 11	Columbus Day
Tuesday, November 2	Election Day
Thursday, November 11	Veteran's Day
Thursday, November 25	Thanksgiving Day
Saturday, December 25	Christmas Day

<--End HTML Code--> 4. oceaniatravelreimbursement.html — Here is an example of a complex table, organized two different ways. The first way uses the ROWSPAN attribute; the second way does not. Filename: oceaniatravelreimbursement.html <--Begin Page Description--> Page Title: Oceania Travel Reimbursement Rates - Complex Table Design Example Page Format: White background with navy blue text. Page Heading: Complex Tables This is an example of a complex table. Although technically correct, it's possible that the instances of column span ("Maximum Amounts in Dollars") and row span (Essex and Saratoga Counties) would not be rendered correctly in a screen reader. Table Caption: Oceania Maximum Allowances for Receipted Lodging and Meal Expenses for Overnight Travel in New York State Table contains five columns, twelve rows. Row 1/2 (Header Row[s]): The table headers are composed of two rows, and several cells span multiple rows or columns. The first two columns span both rows: Locality/County Season The next heading spans three columns: Maximum Amounts in Dollars The column headings spanned: Lodging Per Diem Meals Per Diem Maximum Allowance Row 3, Column 1: Albany Row 3, Column 2: Blank Row 3, Column 3: 74 Row 3, Column 4: 42 Row 3, Column 5: 116 Row 4, Column 1: Bronx, Brooklyn, and Queens Row 4, Column 2: Blank Row 4, Column 3: 170 Row 4, Column 4: 46 Row 4, Column 5: 216 Row 5, Column 1: Dutchess Row 5, Column 2: Blank Row 5, Column 3: 74 Row 5, Column 4: 38 Row 5, Column 5: 112 Row 6, Column 1: Erie Row 6, Column 2: Blank Row 6, Column 3: 74 Row 6, Column 4: 42 Row 6, Column 5: 116 Row 7, Column 1: Essex (spans two rows) Row 7, Column 2: 6/1-10/31 Row 7, Column 3: 79 Row 7, Column 4: 38 Row 7, Column 5: 117 Row 8, Column 2: 11/1-5/31 Row 8, Column 3: 58 Row 8, Column 4: 38 Row 8, Column 5: 96 Row 9, Column 1: Manhattan Row 9, Column 2: Blank Row 9, Column 3: 198 Row 9, Column 4: 46 Row 9, Column 5: 244 Row 10, Column 1: Monroe Row 10, Column 2: Blank Row 10, Column 3: 58 Row 10, Column 4: 42 Row 10, Column 5: 100 Row 11, Column 1: Saratoga (spans two rows) Row 11, Column 2: 6/15-10/31 Row 11, Column 3: 95 Row 11, Column 4: 38 Row 11, Column 5: 133 Row 12, Column 2: 11/1-6/14 Row 12, Column 3: 56 Row 12, Column 4: 38 Row 12, Column 5: 94 In this table, we've eliminated one of the possible problems by adding the "Maximum Amounts in Dollars" to the table's CAPTION element. We solved the rowspan problem by repeating the names of the counties in the "Locality/County" column for those that had multiple "Season" entries. Table Caption: Oceania Maximum Allowances for Receipted Lodging and Meal Expenses for Overnight Travel in New York State (Maximum Amounts in Dollars) Table contains five columns, eleven rows. Row 1 (Header Row): Locality/County Season Lodging Per Diem Meals Per Diem Maximum Allowance Row 2, Column 1: Albany Row 2, Column 2: Blank Row 2, Column 3: 74 Row 2, Column 4: 42 Row 2, Column 5: 116 Row 3, Column 1: Bronx, Brooklyn, and Queens Row 3, Column 2: Blank Row 3, Column 3: 170 Row 3, Column 4: 46 Row 3, Column 5: 216 Row 4, Column 1: Dutchess Row 4, Column 2: Blank Row 4, Column 3: 74 Row 4, Column 4: 38 Row 4, Column 5: 112 Row 5, Column 1: Erie Row 5, Column 2: Blank Row 5, Column 3: 74 Row 5, Column 4: 42 Row 5, Column 5: 116 Row 6, Column 1: Essex Row 6, Column 2: 6/1-10/31 Row 6, Column 3: 79 Row 6, Column 4: 38 Row 6, Column 5: 117 Row 7, Column 1: Essex Row 7, Column 2: 11/1-5/31 Row 7, Column 3: 58 Row 7, Column 4: 38 Row 7, Column 5: 96 Row 8, Column 1: Manhattan Row 8, Column 2: Blank Row 8, Column 3: 198 Row 8, Column 4: 46 Row 8, Column 5: 244 Row 9, Column 1: Monroe Row 9, Column 2: Blank Row 9, Column 3: 58 Row 9, Column 4: 42 Row 9, Column 5: 100 Row 10, Column 1: Saratoga Row 10, Column 2: 6/15-10/31 Row 10, Column 3: 95 Row 10, Column 4: 38 Row 10, Column 5: 133 Row 11, Column 1: Saratoga Row 11, Column 2: 11/1-6/14 Row 11, Column 3: 56 Row 11, Column 4: 38 Row 11, Column 5: 94 <--End Page Description--> <--Begin HTML Code--> Oceania Travel Reimbursement Rates - Complex Table Design Example

Complex Tables

This is an example of a complex table. Although technically correct, it's possible that the instances of column span ("Maximum Amounts in Dollars") and row span (Essex and Saratoga Counties) would not be rendered correctly in a screen reader.

Oceania Maximum Allowances for Receipted Lodging and Meal Expenses for Overnight Travel in New York State
Locality/County	Season	Maximum Amounts in Dollars
Locality/County	Season	Lodging Per Diem	Meal Per Diem	Maximum Allowance
Albany		74	42	116
Bronx, Brooklyn, and Queens		170	46	216
Dutchess		74	38	112
Erie		74	42	116
Essex	6/1-10/31	79	38	117
Essex	11/1-5/31	58	38	96
Manhattan		198	46	244
Monroe		58	42	100
Saratoga	6/15-10/31	95	38	133
Saratoga	11/1-6/14	56	38	94

In this table, we've eliminated one of the possible problems by adding the "Maximum Amounts in Dollars" to the table's CAPTION element. We solved the rowspan problem by repeating the names of the counties in the "Locality/County" column for those that had multiple "Season" entries.

Oceania Maximum Allowances for Receipted Lodging and Meal Expenses for Overnight Travel in New York State
(Maximum Amounts in Dollars)
Locality/County	Season	Lodging Per Diem	Meal Per Diem	Maximum Allowance
Albany		74	42	116
Bronx, Brooklyn, and Queens		170	46	216
Dutchess		74	38	112
Erie		74	42	116
Essex	6/1-10/31	79	38	117
Essex	11/1-5/31	58	38	96
Manhattan		198	46	244
Monroe		58	42	100
Saratoga	6/15-10/31	95	38	133
Saratoga	11/1-6/14	56	38	94

<--End HTML Code--> 5. sampletable2.html — This is an example of a table used for layout and what can happen if the table is not laid out properly. Filename: sampletable2.html <--Begin Page Description--> Page Title: Using an improperly laid-out table for layout Page Format: White background with black text in three columns, each table cell has a different color background. Page Heading: Inside a lavendar table row: "The Spirit Times" This is an example of a table used to provide newspaper-style three-column layout. The columns on the left and the right are approximately 25% the width of the table; the center column is approximately 50% of the width of the table, and contains what appears to be a news story with the heading "Today's News: Man Opens Closet, Gets More Than Bargained For". Table contains three columns, three rows. Row 1, Columns 1,2,3 (lavendar background): The Spirit Times Row 2, Column 1 (turquoise background): NEW in Today's Edition: Keeping the Lions from Eating the Lambs Row 2, Column 2 (white background): Today's News: Man Opens Closet, Gets More than Bargained for SALEM, Massachussetts — When Gater Putney opened his closet door this morning he wasn't prepared for what he saw. "There I was, naked, right out of the shower. I opened up my closet to pull out a suit, and everything was covered in this odd green slime." Putney said he'd never seen anything like it. Row 2, Column 3 (light green background): Sections: * Hauntings * ESP Incidents * Cold Spots * Things That Go "Bump" Row 3, Column 1 (light orange background): Scores: Hill House v. Addams Family Poltergeists v. Ha'nts Vampires v. Werewolves Row 3, Column 2 (white background): A technician from exTerminex was called to the Putney home, and after testing the gook, said that it was "low-grade ectoplasm." It's from the Apparations, Inc. crew. I must have had a dozen calls from places they've infested." He held up a handful of the green slime. "This is their calling card. The cheapest stuff they can find." Janice, Putney's wife, was nonplussed. "I've seen worse," she said. "I been cleaning his drawers for nigh on twenty years now." But Putney was insistent that this was far from the norm. "No sir, this is nothing I'm responsible for. And when I find out who is responsible, they're going to get a piece of my mind and my dry-cleaning bill!" Calls made by this reporter to Apparations, Inc., requesting the identity of the entity involved were not returned by press time. Row 3, Column 3 (light yellow background): Today's Weather: Temp — 45-50°F Sky — Cloudy, w/Fog Sunrise — 5:45 a.m. Sunset — 6:29 p.m. <--End Page Description--> <--Begin HTML Code--> Using an improperly laid-out table for layout

The Spirit Times

NEW in Today's Edition:

Keeping the Lions from Eating the Lambs

Today's News:

Man Opens Closet, Gets More Than Bargained For

SALEM, Massachussetts — When Gater Putney opened his closet door this morning he wasn't prepared for what he saw.

"There I was, naked, right out of the shower. I opened up my closet to pull out a suit, and everything was covered in this odd green slime." Putney said he'd never seen anything like it.

Sections:

Scores:

Hill House v. Addams Family
Poltergeists v. Ha'nts
Vampires v. Werewolves

A technician from exTerminex was called to the Putney home, and after testing the gook, said that it was "low-grade ectoplasm." It's from the Apparations, Inc. crew. I must have had a dozen calls from places they've infested." He held up a handful of the green slime. "This is their calling card. The cheapest stuff they can find."

Janice, Putney's wife, was nonplussed. "I've seen worse," she said. "I been cleaning his drawers for nigh on twenty years now."

But Putney was insistent that this was far from the norm. "No sir, this is nothing I'm responsible for. And when I find out who is responsible, they're going to get a piece of my mind and my dry-cleaning bill!"

Calls made by this reporter to Apparations, Inc., requesting the identity of the entity involved were not returned by press time.

Today's Weather:

Temp — 45-50°F
Sky — Cloudy, w/Fog
Sunrise — 5:45 a.m.
Sunset — 6:29 p.m.

<--End HTML Code-->