Quicktips for Accessible Tables
Data Tables
Data tables are tables that display data in rows and columns.
Do not use empty rows and columns for spacing. Some reading browsers voice the word "blank" every time they encounter an empty cell, annoying users who rely on screen readers. Use CSS to control the presentation of data tables (for instance, use margin and padding to create proper spacing).
Use only col, row, summary, and caption attributes for data tables. For complex tables, use id and header attributes.
Do not use font tags or other formatting in table cells. Use CSS to control the table “look” (font, borders, etc.).
Layout Tables
Layout tables are used to position objects (text or images) on a web page.
Set table and cell width to a percentage, rather than an absolute size. Using a percentage allows the table to adjust to fit any screen size, so that users with different screen sizes or screen magnifiers can more easily read the text.
Consider using CSS divs for presentation instead of layout tables. Some assistive technology, including the text-only browsers, must linearize tables in order to present them to the user. This means that the user will receive the content of the table cell by cell, from left to right and top to bottom. With CSS, it is possible to deliver the content in a different order than what is displayed on the screen, depending on the order of divs in the code.
Use only the td, table, and tr elements in layout tables. Set the summary attribute to null. For example, <table summary="">. (no space between quote marks). Use no caption.
Simple Code Example
<table summary="This table clearly shows a
preference of chocolate ice cream for girls aged 8-13.">
<caption align="top">Favorite Ice Cream Flavors</caption>
<tr>
<th scope="col">Flavor</th>
<th scope="col">Chocolate</th>
<th scope="col">Vanilla</th>
</tr>
<tr>
<th scope="row">Girls 9-13 </th>
<td><div align="center">80%</div></td>
<td><div align="center">20%</div></td>
</tr>
<tr>
<th scope="row">Girls 3-8 </th>
<td><div align="center">48%</div></td>
<td><div align="center">52%</div></td>
</tr>
</table>
Another strategy is to use the "headers" and "id" attributes. The "headers" and "id" method should only be used for complex tables that contain more than one logical level.
Importing tabular data
Tabular data that has been created in another application (such as Excel) and saved in a delimited text format can be imported into Dreamweaver and formatted as a table.
When you export a table, the entire table is exported.
To import table data in Dreamweaver, do one of the following:
Select File > Import > Tabular Data
Select Insert > Table Objects > Import Tabular Data
The Import Tabular Data dialog box appears.
In the dialog box, enter information about the file containing your data. Click OK.
For more information, contact:
Parker Owens, Web Accessibility Coordinator, EKU, 254 Case Annex, Richmond, KY
(859) 622-2743, parker.owens@eku.edu
