���˴�Ƭ

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:

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:

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 
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.