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

Table 1: 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

Table 2: 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

Table 3: 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 1)

<table summary="Wholesale and retail prices of imported and domestic oranges and apples in Sydney and Melbourne. There are two levels of column headings." border="1">
	<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>

Code (table 2)

<table summary="Wholesale and retail prices for 10 and 20 centimetre brass and steel nuts and bolts. There are two levels of column headings." border="1">
	<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>

Reference

Data table example from http://usability.com.au/2005/06/accessible-data-tables-2005/