Guideline 5. Create tables that transform gracefully.

Source Article: http://www.w3.org/TR/WCAG10/#gl-table-markup

Tables are widely used throughout the internet. Their two most common uses are to display tabular data and also for layout. However, tables used for layout destroy the fluidity of a page. They become very difficult to transform to handicapped users needs and become very difficult to format with CSS. There are a few occasions when it is okay to use tables for layout, but only if the data makes sense when linearized.

There are many tools provided to make tables accessible to users with or without disabilities. Once again, usability boils down to how well somebody can understand the page in a text only format. Here is a brief list of these tools.

The key here is to 1)understand these tools, 2)use them to increase the usability of your tables, and 3)only use them for what they are intended.

I intend to practice using these tools in any tables I make so that I am familiar with them and so the users can familiarize themselves very quickly.

Example

<table border="1" cellpadding="2" cellspacing="2" summary="this table overviews the inventory of acme inc. and includes the item id, item name, a thumbnail image, the price, number of items in stock and the category of each item.">
<caption>The Acme Inc. Inventory</caption>
<thead>
<tr>
<th id="itemname" abbr="item">Item name</th>
<th id="itemprice" abbr="price">Item price</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">This is a sample footer.</td></tr></tfoot>
<tbody>
<tr>
<td headers="itemname">1</td>
<td headers="itemprice">5.50</td>
</tr>
</tbody>
</table>