Make sure that the content makes sense when read cell by cell, left to right, row by row to assist users of screen readers.
Try and avoid complex tables (merged cells, integrated headings etc). Use separate tables if possible as these are far easier to mark up correctly.
Dreamweaver users should make sure that their preferences
are set correctly to prompt you to add accessible code. Select Edict>preferences
from the main menu and click on
Make sure that the top 5 boxes are checked in the dialog box that
HTML is designed for page structure and not for layout. Using tables for layout is a misuse of HTML and should be avoided if possible - but everyone does it. Make sure you mark up tables correctly to assist screen readers.
Use the <table SUMMARY> tag to help the user understand the table contents and choose whether or not to skip over it.
<table SUMMARY="table used for layout"> or <table SUMMARY="contains staff contact details">
Use the caption tag if you want a heading to appear on the screen. Otherwise use the summary tag to alert screen readers that the table is used for design purposes.
If you are using a table for layout purposes you should set the table width to 99% to allow the page to expand or contract to the width of the browser window.
Don't use 100% as this will cause some browsers to produce a horizontal scroll bar.
You should avoid using tables with an absolute width such as 620 pixels as this causes problems for people using screen magnifiers because it will confine very large text to a very small screen space.
If your webpage contains tables that display data e.g. staff names, e-mail addresses and telephone, you must make sure that you mark up the table cells that contain the headings.
Dreamweaver users can do this easily by selecting the header cells and checking the "header" box in the table properties window.
|Dennis the email@example.com|
Here is the code for this table:
summary="contains names, telephone numbers and email
addresses of comic characters")
<td height="34">Billy Bunter</td>
<td>Dennis the menace</td>
The <TH> tag contains the table heading and the <TD> tag contains the table data. This is the minimum amount of code that will allow you to reach Checkpoint 1. <summary> tells users of screen readers the content of the table.
Note: a bad way to arrange this table is shown below.
|Name||Billy Bunter||Dennis the menace|
Imagine trying to relate the contact details to the correct name.
To future proof your tables you can use <THEAD>, <TBODY> and <TH> tags. These tags are not recognised by old browsers but inclusion in your page will future proof your code. Code Examples to follow.