test file: table element with caption, thead, tbody, tfoot, tr, th, colgroup and td

Pass Criteria

Reference

Test ctbl-001: Oranges and Apples – complex table using id and headers

This table provides information about the wholesale and retail price of both imported and domestic oranges and apples in Sydney and Melbourne. There are two levels of row and column headers.

Imported and domestic orange and apple prices in Sydney and Melbourne
Imported Domestic
Oranges Apples Oranges Apples
Sydney
Wholesale $1.00 $1.25 $1.20 $1.00
Retail $2.00 $3.00 $1.80 $1.60
Melbourne
Wholesale $1.20 $1.30 $1.00 $0.80
Retail $1.60 $2.00 $2.00 $1.50

Code

<table id="ctbl-01">
	<caption>
		Imported and domestic orange and apple prices
		in Sydney and Melbourne
	</caption>
	<thead>
		<tr>
			<td></td>
			<th colspan="2" id="imported">Imported</th>
			<th colspan="2" id="domestic">Domestic</th>
		</tr>
		<tr>
			<td></td>
			<th id="oranges-imp">Oranges</th>
			<th id="apples-imp">Apples</th>
			<th id="oranges-dom">Oranges</th>
			<th id="apples-dom">Apples</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="sydney" colspan="5">Sydney</th>
		</tr>
		<tr>
			<th headers="sydney" id="wholesale-sydney">Wholesale</th>
			<td headers="imported oranges-imp sydney wholesale-sydney">$1.00</td>
			<td headers="imported apples-imp sydney wholesale-sydney">$1.25</td>
			<td headers="domestic oranges-dom sydney wholesale-sydney">$1.20</td>
			<td headers="domestic apples-dom sydney wholesale-sydney">$1.00</td>
		</tr>
		<tr>
			<th headers="sydney" id="retail-sydney">Retail</th>
			<td headers="imported oranges-imp sydney retail-sydney">$2.00</td>
			<td headers="imported apples-imp sydney retail-sydney">$3.00</td>
			<td headers="domestic oranges-dom sydney retail-sydney">$1.80</td>
			<td headers="domestic apples-dom sydney retail-sydney">$1.60</td>
		</tr>
		<tr>
			<th id="melbourne" colspan="5">Melbourne</th>
		</tr>
		<tr>
			<th headers="melbourne" id="wholesale-melbourne">Wholesale</th>
			<td headers="imported oranges-imp melbourne wholesale-melbourne">$1.20</td>
			<td headers="imported apples-imp melbourne wholesale-melbourne">$1.30</td>
			<td headers="domestic oranges-dom melbourne wholesale-melbourne">$1.00</td>
			<td headers="domestic apples-dom melbourne wholesale-melbourne">$0.80</td>
		</tr>
		<tr>
			<th headers="melbourne" id="retail-melbourne">Retail</th>
			<td headers="imported oranges-imp melbourne retail-melbourne">$1.60</td>
			<td headers="imported apples-imp melbourne retail-melbourne">$2.00</td>
			<td headers="domestic oranges-dom melbourne retail-melbourne">$2.00</td>
			<td headers="domestic apples-dom melbourne retail-melbourne">$1.50</td>
		</tr>
	</tbody>
</table>

Test ctbl-002: Nuts and Bolts – complex table using scope, colgroup and scope="rowgroup".

This table provides information about the wholesale and retail prices for two sizes of brass and steel nuts and bolts. There are two levels of row and column headers.

Prices of Brass and Steel nuts and bolts
Brass Steel
Bolts Nuts Bolts Nuts
10cm
Wholesale $1.00 $1.25 $1.20 $1.00
Retail $2.00 $3.00 $1.80 $1.60
20cm
Wholesale $1.20 $1.30 $1.00 $0.80
Retail $1.60 $2.00 $2.00 $1.50

Code

<table>
	<caption>
		Prices of Brass and Steel nuts and bolts
	</caption>
	<colgroup>
	</colgroup>
	<colgroup span="2">
	</colgroup>
	<colgroup span="2">
	</colgroup>
	<thead>
		<tr>
			<td></td>
			<th scope="colgroup" colspan="2">Brass</th>
			<th scope="colgroup" colspan="2">Steel</th>
		</tr>
		<tr>
			<td></td>
			<th scope="col">Bolts</th>
			<th scope="col">Nuts</th>
			<th scope="col">Bolts</th>
			<th scope="col">Nuts</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="rowgroup" colspan="5">10cm</th>
		</tr>
		<tr>
			<th scope="row">Wholesale</th>
			<td>$1.00</td>
			<td>$1.25</td>
			<td>$1.20</td>
			<td>$1.00</td>
		</tr>
		<tr>
			<th scope="row">Retail</th>
			<td>$2.00</td>
			<td>$3.00</td>
			<td>$1.80</td>
			<td>$1.60</td>
		</tr>
		<tr>
			<th scope="rowgroup" colspan="5">20cm</th>
		</tr>
		<tr>
			<th scope="row">Wholesale</th>
			<td>$1.20</td>
			<td>$1.30</td>
			<td>$1.00</td>
			<td>$0.80</td>
		</tr>
		<tr>
			<th scope="row">Retail</th>
			<td>$1.60</td>
			<td>$2.00</td>
			<td>$2.00</td>
			<td>$1.50</td>
		</tr>
	</tbody>
</table>

Test ctbl-003: Cherries and apricots – very complex table using id and headers.

This table provides information about the wholesale and retail price of both imported and domestic cherries and apricots in Sydney and Melbourne. The cherries are presented in two different grades. There are three levels column headers and two levels of row headers.

Imported and domestic cherry and apricot prices in Perth and Adelaide
Imported Domestic
Apricots Cherries Apricots Cherries
A Grade B Grade A Grade B Grade
Perth
Wholesale $1.00 $9.00 $6.00 $1.20 $13.00 $9.00
Retail $2.00 $12.00 $8.00 $1.80 $16.00 $12.50
Adelaide
Wholesale $1.20 N/A $7.00 $1.00 $11.00 $6.00
Retail $1.60 N/A $11.00 $2.00 $13.00 $10.00

Code

<table>
	<caption>
		Imported and domestic cherry and apricot prices in Perth and Adelaide
	</caption>
	<thead>
		<tr>
			<td></td>
			<th id="imp" colspan="3">Imported</th>
			<th id="dom" colspan="3">Domestic</th>
		</tr>
		<tr>
			<td></td>
			<th headers="imp" id="imp-apr">Apricots</th>
			<th headers="imp" id="imp-che" colspan="2">Cherries</th>
			<th headers="dom" id="dom-apr">Apricots</th>
			<th headers="dom" id="dom-che" colspan="2">Cherries</th>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<th headers="imp imp-che" id="imp-che-agrade">A Grade</th>
			<th headers="imp imp-che" id="imp-che-bgrade">B Grade</th>
			<td></td>
			<th headers="dom dom-che" id="dom-che-agrade">A Grade</th>
			<th headers="dom dom-che" id="dom-che-bgrade">B Grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="perth" colspan="7">Perth</th>
		</tr>
		<tr>
			<th headers="perth" id="perth-wholesale">Wholesale</th>
			<td headers="imp imp-apr perth perth-wholesale">$1.00</td>
			<td headers="imp imp-che imp-che-agrade perth perth-wholesale">$9.00</td>
			<td headers="imp imp-che imp-che-bgrade perth perth-wholesale">$6.00</td>
			<td headers="dom dom-apr perth perth-wholesale">$1.20</td>
			<td headers="dom dom-che dom-che-agrade perth perth-wholesale">$13.00</td>
			<td headers="dom dom-che dom-che-bgrade perth perth-wholesale">$9.00</td>
		</tr>
		<tr>
			<th headers="perth" id="perth-retail">Retail</th>
			<td headers="imp imp-apr perth perth-retail">$2.00</td>
			<td headers="imp imp-che imp-che-agrade perth perth-retail">$12.00</td>
			<td headers="imp imp-che imp-che-bgrade perth perth-retail">$8.00</td>
			<td headers="dom dom-apr perth perth-retail">$1.80</td>
			<td headers="dom dom-che dom-che-agrade perth perth-retail">$16.00</td>
			<td headers="dom dom-che dom-che-bgrade perth perth-retail">$12.50</td>
		</tr>
		<tr>
			<th id="adelaide" colspan="7">Adelaide</th>
		</tr>
		<tr>
			<th id="adelaide-wholesale">Wholesale</th>
			<td headers="imp imp-apr adelaide adelaide-wholesale">$1.20</td>
			<td headers="imp imp-che imp-che-agrade adelaide adelaide-wholesale">N/A</td>
			<td headers="imp imp-che imp-che-bgrade adelaide adelaide-wholesale">$7.00</td>
			<td headers="dom dom-apr adelaide adelaide-wholesale">$1.00</td>
			<td headers="dom dom-che dom-che-agrade adelaide adelaide-wholesale">$11.00</td>
			<td headers="dom dom-che dom-che-bgrade adelaide adelaide-wholesale">$6.00</td>
		</tr>
		<tr>
			<th id="adelaide-retail">Retail</th>
			<td headers="imp imp-apr adelaide adelaide-retail">$1.60</td>
			<td headers="imp imp-che imp-che-agrade adelaide adelaide-retail">N/A</td>
			<td headers="imp imp-che imp-che-bgrade adelaide adelaide-retail">$11.00</td>
			<td headers="dom dom-apr adelaide adelaide-retail">$2.00</td>
			<td headers="dom dom-che dom-che-agrade adelaide adelaide-retail">$13.00</td>
			<td headers="dom dom-che dom-che-bgrade adelaide adelaide-retail">$10.00</td>
		</tr>
	</tbody>
</table>

Test ctbl-004: Nuts and Bolts – complex table using scope, colgroup, col and scope="rowgroup".

This table provides information about the wholesale and retail prices for two sizes of brass and steel nuts and bolts. There are two levels of row and column headers.

Prices of Brass and Steel nuts and bolts
Brass Steel
Bolts Nuts Bolts Nuts
10cm
Wholesale $1.00 $1.25 $1.20 $1.00
Retail $2.00 $3.00 $1.80 $1.60
20cm
Wholesale $1.20 $1.30 $1.00 $0.80
Retail $1.60 $2.00 $2.00 $1.50

Code

<table id="ctbl-004">
	<caption>
		Prices of Brass and Steel nuts and bolts
	</caption>
	<colgroup>
		<col span="1">
		<col span="1">
	</colgroup>
	<colgroup span="2">
	</colgroup>
	<thead>
		<tr>
			<td></td>
			<th scope="colgroup" colspan="2">Brass</th>
			<th scope="colgroup" colspan="2">Steel</th>
		</tr>
		<tr>
			<td></td>
			<th scope="col">Bolts</th>
			<th scope="col">Nuts</th>
			<th scope="col">Bolts</th>
			<th scope="col">Nuts</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="rowgroup" colspan="5">10cm</th>
		</tr>
		<tr>
			<th scope="row">Wholesale</th>
			<td>$1.00</td>
			<td>$1.25</td>
			<td>$1.20</td>
			<td>$1.00</td>
		</tr>
		<tr>
			<th scope="row">Retail</th>
			<td>$2.00</td>
			<td>$3.00</td>
			<td>$1.80</td>
			<td>$1.60</td>
		</tr>
		<tr>
			<th scope="rowgroup" colspan="5">20cm</th>
		</tr>
		<tr>
			<th scope="row">Wholesale</th>
			<td>$1.20</td>
			<td>$1.30</td>
			<td>$1.00</td>
			<td>$0.80</td>
		</tr>
		<tr>
			<th scope="row">Retail</th>
			<td>$1.60</td>
			<td>$2.00</td>
			<td>$2.00</td>
			<td>$1.50</td>
		</tr>
	</tbody>
</table>