table element with caption, thead, tbody, tfoot, tr, th, colgroup and tdThis 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 | 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 |
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.
| 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 | 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 |
<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>
<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>
Data table example from http://usability.com.au/2005/06/accessible-data-tables-2005/