Jedadiah Ashford
2/15/2008
Guideline 5. Create tables that transform gracefully.
The reason we need to control the layout of tables is because of those that cannot see. They are forced to use screen readers to view web pages. These screen readers have a hard time with tables. Tables pose so many problems in the first place for those that cannot see. They need things in a linear format so the screen readers can just read the information from left to right. This has a hard time being accomplished when web designers use tables. Unless these tables are marked up correctly then the screen readers cannot read them. So we can help the blind see these tables if we just mark them up more correctly. These screen readers actually read the information in tabular format. They also show the Braille machine how to display the tables on the boards.
- We need to first make sure that all tables have the right html markup. We need to make sure that all the rows and columns are marked. All headers need to use the TH tag. This is the tag that shows the column header. Also, all the rows need the TD tag. This shows the screen reader where all the rows begin for the columns.
- For tables that have more than two levels of rows or column headers then we need to use some different tags to show this. THEAD would be for the header of the table. TFOOT for the footer of the table and TBODY for the body of the table. This is kind of complicated to explain so I will show an example:
- <table border = "1">
<thead>
<tr>
<td>This text is in the THEAD</td>
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td> This text is in the TBODY</td>
</tr>
</tbody>
</table>
- NEVER EVER use tables for layout. I used to do this all the time and divs and CSS make it so much easier and nicer to layout than tables will ever be able to do.
- If you have to use tables for layout then we need to make sure that tables are not marked up with TH or THEAD or any other table formatting.
- We need to add summaries for each table. This is done in the TABLE tag. This is an example: <table summary=”summary goes here…”>
- We need to provide abbr tags for the TH tags. This will give abbreviations for the table headers.
These need to be implemented to allow us to again help those that cannot see web pages as we can.