HTML and CSS [Electronic resources] نسخه متنی

Table Summaries

You can summarize the content of your table using the summary attribute within the table element:

<table summary="text description">

If you're thinking "Hey, I bet this has something to do with accessibility," you're spot-on. Providing summaries does, in fact, assist people with disabilities who require more contextual information about the table.

Summaries won't appear onscreen, unlike alternative text or the title attribute used in links, which include the information as a ToolTip as the mouse passes over the table. In the case of summaries, they are read only by the assistive device, such as a screen reader for a blind user.

Example 4-8 shows the table so far, with a summary added.

Example 4-8. Adding a table summary

<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table displays
 locations and their associated weather and time zone information">
<caption>Comparing weather and time zones</caption>
<tr>
<th>Location</th>
<th>Tucson, Arizona</th>
<th>Las Vegas, Nevada</th>
</tr>
<tr>
<th>Weather</th>
<td>Warm to Hot</td>
<td>Warm to Hot</td>
</tr>
<tr>
<th>Time Zone</th>
<td>No Daylight Savings</td>
<td>Mountain Standard Time</td>
</tr>
</table>

QUANTUM LEAP

Using captions and summaries goes a long way to helping make data tables more accessible for those with disabilitiesand more understandable for everyone. To dig deeper into accessibility techniques for tables, see

Creating Accessible Tables found at WebAIM (http://www.webaim.org/techniques/tables/), which is an excellent source for accessibility information in general.