Using scope
While someone who can see has no problem associating a specific data cell with a header, someone who uses a screen reader, to experience the web may have more of a challenge. The scope attribute helps a screen reader associate a data cell with the correct headers.
<th scope="col">lets the screen reader know that the header is associated with every data cell in that column.
<th scope="row">lets the screen reader know that the header is associated with every data cell in that row.
| Breakfast | Lunch | Dinner |
|---|---|---|
| eggs | sandwich | steak |
| migas | burger | grilled salmon |
HTML source code:
<table><caption>menu for Monday</caption>
<tr>
<th scope="col">Breakfast</th>
<th scope="col">Lunch</th>
<th scope="col">Dinner</th>
</tr>
<tr>
<td>eggs</td>
<td>sandwich</td>
<td>steak</td>
</tr>
<tr>
<td>migas</td>
<td>burger</td>
<td>grilled salmon</td>
</tr>
</table>
This technique works with simple tables where a data cell is associated with at most one column header and one row header. For complex tables with multiple column or row headers associated with a data cell the headers and id attributes are used. For an example of this technique go to the a tutorial at jimthatcher.com.
* There's a good article for information about screen readers.
Proceed to adding a border.
