Advanced Tables ...

scope out the table

scope attribute on <TH> tells the browser the type of header it is - row or column

Use scope attribute on all <TH>
or
Use scope only on ambiguous <TH>

scope="col" or scope="row"

Screen readers assume <th> in first row have scope="col"

Travel Expense Report - no scope
City Date Meals Hotels Transport
San Jose 25-Aug-97 37.74 112.00 45.00
San Jose 26-Aug-97 27.28 112.00 45.00

 

<table>
<caption>
Travel Expense Report - no scope
</caption>
<tbody>
<tr>
<th>City</th>
<th>Date</th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
</tr>
....


Travel Expense Report - scope=row
Headings Date Meals Hotels Transport
San Jose 25-Aug-97 37.74 112.00 45.00
San Jose 26-Aug-97 27.28 112.00 45.00

 

<table>
<caption>
Travel Expense Report
</caption>
<tbody>
<tr>
<th scope="row">Headings</th>
<th>Date</th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
</tr>
....

or

<table>
<caption>
Travel Expense Report
</caption>
<tbody>
<tr>
<th scope="row">Headings</th>
<th scope="col">Date</th>
<th scope="col">Meals</th>
<th scope="col">Hotels</th>
<th scope="col">Transport</th>
</tr>

spanning and grouping

headers and id

Tables - CSS fun