The <pre> tag was a way to quickly display tabular data in the
past. The <pre> should no longer be used to format data.
Instead, use the <table> element
so that assistive technologies can recognize that the information is in a table.
For tabular data, use the caption attribute for the <table> tag,
and/or give a summary of the table. The caption attribute, illustrated below, will
display for the person seeing the table, and it will also be there for assistive technologies.
The summary attribute can be used with the table, as shown below,
but it does not show visually on current browsers.
Example:
| Name | Cups | Type of Coffee | Sugar? |
|---|---|---|---|
| T. Sexton | 10 | Espresso | No |
| J. Dinnen | 5 | Decaf | Yes |
This is the coding at the top of the table, showing a caption attribute and a summary attribute:
<table border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <caption>Cups of coffee consumed by each senator</caption>
You could also provide a regular hyperlink to another document, giving a summary of the table's information.
In contrast to tables used for page layout purposes, data tables are designed to display data in a grid format where the columns and rows define the information provided in a cell. When using a screen reader to access information on the computer, a data table can prove to be challenging and an individual can quickly become "lost" inside a table. In order to prevent this from occurring, it is necessary to connect a data cell with the corresponding column and row headings. Web designers are required to use one of the several methods (displayed below) to provide an association between a header and its related information.
"Simple Data Tables"
The following is an example of a simple data table:
| Color | Subject | Food | Drink | Sport | Team | |
|---|---|---|---|---|---|---|
| Wilbur | Blue | History | Pizza | Pepsi | Football | Arizona Cardinals |
| Wilma | Red | Literature | Tacos | Coke | Baseball | Chicago Cubs |
Without adding tag attributes to ensure the data in the cell is connected to each column and row header, the table would be read as linear text:
Color, Subject, Food, Drink, Sport, Team Wilbur, Blue, History, Pizza, Pepsi, Football, Arizona Cardinals Wilma, Red, Literature, Tacos, Coke, Baseball, Chicago Cubs
Scope:
In order to correct the above table, a "scope" attribute needs to be added, one of
the most effective and simplest ways to ensure a data table is accessible.
The first row of each table should include column headings (the <th>
attribute). Also, the first column of a data table should contain the row headings
(<th> or <td> attributes can be used). In the following example, the
column
headings are Color, Subject, Food, Drink, Sport, and Team while the row headings
are Wilbur and Wilma.
| Color | Subject | Food | Drink | Sport | Team | |
|---|---|---|---|---|---|---|
| Wilbur | Blue | History | Pizza | Pepsi | Football | Arizona Cardinals |
| Wilma | Red | Literature | Tacos | Coke | Baseball | Chicago Cubs |
Adding the Scope Attribute:
The scope attribute is simply added into the code for the column and row
headings. The code for the table above shows the scope attribute for both the
column and row: (Currently, Web design programs do not support the addition of this
code. Consequently, the Web designer will need to add the code manually.)
<table border="1">
<caption> Favorites of Wilbur and Wilma Wildcat </caption>
<tr>
<th></th>
<th scope="col">Color</th>
<th scope="col">Subject</th>
<th scope="col">Food</th>
<th scope="col">Drink</th>
<th scope="col">Sport</th>
<th scope="col">Team</th>
</tr>
<tr>
<td scope="row">Wilbur</td>
<td>Blue</td>
<td>History</td>
<td>Pizza</td>
<td>Pepsi</td>
<td>Football</td>
<td>Arizona Cardinals</td>
</tr>
<tr>
<td scope="row">Wilma</td>
<td>Red</td>
<td>Literature</td>
<td>Tacos</td>
<td>Coke</td>
<td>Baseball</td>
<td>Chicago Cubs</td>
</tr>
</table>
By simply adding the scope attribute the table will now be read as follows:
Wilbur; Color, Blue; Subject, History; Food, Pizza; Drink, Pepsi; Sport, Football; Team, Arizona Cardinals
Wilma; Color, Red; Subject, Literature; Food, Tacos; Drink, Coke; Sport, Baseball; Team, Chicago Cubs
With the scope attribute, each row is announced with the corresponding heading as is each column - an addition that would mean the difference between knowing and understanding the data or being "lost" within the table.
Complex Data Tables:
Below is an example of a complex data table.
| Event | Dates | Hotel | Meals | Transportation | Total Amount | |
|---|---|---|---|---|---|---|
| Wilbur | ||||||
| Tucson | Rodeo Parade | 2/24 | $0.00 | $10.00 | $5.00 | $15.00 |
| Chicago | UA Orientation | 7/2 - 7/6 | $600.00 | $210.00 | $1,300.00 | $2110.00 |
| San Diego | USC Football Game | 10/31 - 11/01 | $105.00 | $55.00 | $425.00 | $585.00 |
| Total | $2710.00 | |||||
| Wilma | ||||||
| Chicago | UA Orientation | 7/2 - 7/6 | $600.00 | $210.00 | $1,300.00 | $2110.00 |
| Tucson | Jim Click Run'n'Roll | 10/6 | $0.00 | $7.00 | $5.00 | $12.00 |
| Pasadena | Rose Bowl | 12/30 - 1/3 | $725.00 | $185.00 | $645.00 | $1555.00 |
| Total | $3677.00 |
In contrast to simple data tables, complex data tables require additional coding to ensure that the cell contents are connected to the right row, column and heading information. So for example, in the above table, the information in the first data cell "Rodeo Parade" needs to be connected not only to the column (Events) and row (Tucson) headings, the cell also needs to be tied to "Wilbur." With the correct coding (shown below), each cell in the table would be correctly identified so that a user would understand exactly what the data refers to. (Again, this code will need to be added manually since Web design programs do not currently have the ability to add this information.)
<table width="100%" border="2">
<caption>Travel Expenses for UA Wildcat Mascots Wilbur and Wilma</caption>
<tr>
<td> </td>
<th id="c2">Event</th>
<th id="c3">Dates</th>
<th id="c4">Hotel</th>
<th id="c5">Meals</th>
<th id="c6">Transportation</th>
<th id="c7">Total Amount</th>
</tr>
<tr>
<th id="r2">Wilbur</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td id="r3">Tucson</td>
<td headers="c2 r2 r3">Rodeo Parade</td>
<td headers="c3 r2 r3">2/24</td>
<td headers="c4 r2 r3">$0.00</td>
<td headers="c5 r2 r3">$10.00</td>
<td headers="c6 r2 r3">$5.00</td>
<td headers="c7 r2 r3">$15.00</td>
</tr>
<tr>
<td id="r4">Chicago</td>
<td headers="c2 r2 r4">UA Orientation</td>
<td headers="c3 r2 r4">7/2 - 7/6</td>
<td headers="c4 r2 r4">$600.00</td>
<td headers="c5 r2 r4">$210.00</td>
<td headers="c6 r2 r4">$1,300.00</td>
<td headers="c7 r2 r4">$2110.00</td>
</tr>
<tr>
<td id="r5">San Diego</td>
<td headers="c2 r2 r5">USC Football Game</td>
<td headers="c3 r2 r5">10/31 - 11/01</td>
<td headers="c4 r2 r5">$105.00</td>
<td headers="c5 r2 r5">$55.00</td>
<td headers="c6 r2 r5">$425.00</td>
<td headers="c7 r2 r5">$585.00</td>
</tr>
<tr>
<td id="r6">Total</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td headers="c7 r2 r6">$2710.00</td>
</tr>
<tr>
<th id="r7">Wilma</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td id="r8">Chicago</td>
<td headers="c2 r7 r8">UA Orientation</td>
<td headers="c3 r7 r8">7/2 - 7/6</td>
<td headers="c4 r7 r8">$600.00</td>
<td headers="c5 r7 r8">$210.00</td>
<td headers="c6 r7 r8">$1,300.00</td>
<td headers="c7 r7 r8">$2110.00</td>
</tr>
<tr>
<td id="r9">Tucson</td>
<td headers="c2 r7 r9">Jim Click Run'n'Roll</td>
<td headers="c3 r7 r9">10/6</td>
<td headers="c4 r7 r9">$0.00</td>
<td headers="c5 r7 r9">$7.00</td>
<td headers="c6 r7 r9">$5.00</td>
<td headers="c7 r7 r9">$12.00</td>
</tr>
<tr>
<td id="r10">Pasadena</td>
<td headers="c2 r7 r10">Rose Bowl</td>
<td headers="c3 r7 r10">12/30 - 1/3</td>
<td headers="c4 r7 r10">$725.00</td>
<td headers="c5 r7 r10">$185.00</td>
<td headers="c6 r7 r10">$645.00</td>
<td headers="c7 r7 r10">$1555.00</td>
</tr>
<tr>
<td id="r11">Total</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td headers="c7 r7 r11">$3677.00</td>
</tr>
</table>
All contents copyright © 2007. Arizona Board of Regents.
Search Powered by:
