Using Tables

For websites, tables should be used to hold data and NOT used for design layout. Layout should be determined by a Cascading Style Sheet (css) with use of the <div> tag.

Best Practices for using Tables

Simple data tables can easily be read by screen readers if they incorporate the <th> tag and “scope” attribute to identify which cells are row and column headers. More complex tables can incorporate the <caption> and <summary> tags.

Consider the following table:

Contact Information
Person Number
John Doe (555) 555-5555

It is important to remember that screen reader read tables linearly. This table looks simple but is a little more complex when looking at the html code.

<table border="1" cellpadding="0" cellspacing="0" style="width: 400px;">
    <thead>
        <tr>
            <th colspan="2" scope="col">Contact Information</th>
        </tr>
        <tr>
            <th scope="col">Person</th>
            <th scope="col">Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:200px">John Doe</td>
            <td style="width:200px">(555) 555-5555</td>
        </tr>
    </tbody>
</table>

The table uses the <th> tags to identify the headers content. Most browsers will render any text in the <th> tag as bold and centred. We can improve this table’s usability by adding a <caption> and <summary>. The <caption> tag is used to give a table a title. The <summary> is only read by screen readers and not displayed visually and they provide brief summaries of complex data and don’t need to be used for every table.

Now we add a caption and summary to our example:

Person Contact
Contact Information
John Doe (555) 555-5555

The html code:

<table border="1" cellpadding="0" cellspacing="0" style="width: 500px;" summary="Table cells are read left to right, top to bottom.">

            <caption>Contact Information</caption>

<thead>
        <tr>
            <th scope="col">Person</th>
            <th scope="col">Contact</th>
        </tr>
    </thead>
   
    <tbody>
        <tr>
            <td style="width:200px">John Doe</td>
            <td style="width:200px">(555) 555-5555</td>
        </tr>
    </tbody>
</table>

Inserting a Table using WebPublish

In “Edit Draft” mode:

  1. Place your cursor where you wish to insert a table.
  2. The “Table” button from the menu screenshot of table button on menu in Web Publish
  3. This opens the “Table Properties” dialogue box where you can select which cells are headers, enter a caption, and a summary for complex tables.

screenshot of table properties dialogue box

Queen's Web Standards and Accessibility Development Guide (WSADG)

For your reference, sections of the WSADG used for this part of the tutorial are:

Designing for the Web