Putting It All Together - Web Standards: Mastering HTML5, CSS3, and XML - page 417

Table Accessibility
You can further improve the markup to increase accessibility. Processing and understanding tables can be
challenging for nonvisual browsers. You can use the table header ( th ) and the caption ( caption ) markup elements
to increase table accessibility. The first element is useful for visual browsers too, while the second one is valuable for
screen readers.
The table header element th not only adds meaning to the first row but is repeated by screen readers when each
row of the table is read. It helps the visually impaired understand the correlations between table cells.
The textual description of the table can be provided by the caption element (Listing 12-14).
Listing 12-14. Table Caption
<table>
<caption>
A comparison table of iPhone models.
</caption>
<tr>
<th>Model</th><th>iPhone</th><th>iPhone 3G</th><th>iPhone 3GS</th><th>iPhone 4</th>
</tr>
<tr>
<td>Preinstalled OS</td><td>iPhone OS 1.0</td><td>iPhone OS 2.0</td><td>iPhone OS 
3.0</td><td>iOS 4.0</td>
</tr>
<tr>
<td>Display resolution</td><td>480x320</td><td>480x320</td><td>480x320</td> 
<td>960x640</td>
</tr>
<tr>
<td>CPU clockrate</td><td>620 MHz</td><td>620 MHz</td><td>833 MHz </td><td>1 GHz</td>
</tr>
<tr>
<td>Camera</td><td>2 MP</td><td>2 MP</td><td>3 MP</td><td>5 MP (rear), 0.3 MP (front)</td>
</tr>
</table>
You can also add access keys to the table cells if required.
Table Styling
Although table headers are usually rendered in bold by most browsers, the default styles of table cells, padding,
and borders are different in each rendering engine, which is not always acceptable. All table features can be styled
arbitrarily through CSS rulesets, however. For example, the default value of the border-collapse property, separate ,
can be overridden in order to make borders collapse into a single border whenever possible (Listing 12-15).
Listing 12-15. Set Borders to Collapse
table {
border-collapse: collapse;
}