Accessible HTML Tables

<table> elements are often maligned by the web standards savvy developer who equates them with the bad old days of table based layout.

{{large_square_google_ad}}

This has the unintended consequence that such a developer won’t know how to best use a <table> for its proper purpose of displaying data. This article aims to fix this problem by going through the elements and attributes which can help make a data table more accessible, render faster, and make it easier to interpret.

  1. <table summary="The summary attribute is used only when the user is unable to see the actual table – use it to provide additional information summarizing the purpose and structure of the table." cols="4" >

    A table must begin with a table opening tag. It is highly recommended that the summary attribute be used and using the col attribute is alleged to help browsers render tables faster by incrementally displaying the table before all of the data has been received

  2. <caption>Sample Caption Text</caption> When present (highly recommended), the <caption> element’s text should describe the nature of the table.

    The <caption> element is only permitted immediately after the <table> start tag (and is generally displayed at the top of a table by visual browsers). A <table> element may only contain one <caption> element.

    Using the align attribute in a <caption> has been decrecated (highly discouraged) in HTML 4.x & XHTML 1.0 and is illegal in XHTML 1.1 so use CSS instead

  3. <thead></thead> ,<tbody></tbody> and <tfoot></tfoot> are used to group table rows into header, body and footer sections respectively.

    If you use </thead>, it must appear before the <tfoot> and <tbody> sections. For some reason unknown to me, the W3C requires a <tfoot> section to be used before the body section(s).

    The <thead></thead> and <tfoot></tfoot> section markers are optional, but one or more TBODY sections are always required.

    If present, each<thead></thead>, <tbody></tbody> and <tfoot></tfoot> element must contain one or more <tr> (table rows).

  4. Make sure column/row headings are marked up using the <th></th> (table header) element because this associates the headers with their column/row of table cells (<td></td>).
  5. To more explicitly link headers with their column/row of table cells <td></td>) use the technique described under the heading Linking headers to data: the scope, id and headers attributes at Roger Johansson’s site 456 Berea Street
  6. </table> – A table must end with a table closing tag
Table Following Article Suggestions
Manufacturer Model Engine Size
Copyright © Fictional Motor Dealers
Ford Sportster 1.5L
Holden Weekender 1.5L

Source code for Table Following Article Suggestions

  <table summary="An example table using all the elements and attributes suggested in the article above" cols="3" >
  <caption>Table Following Article Suggestions</caption>
  <thead>
  <tr>
  <th scope="col">Manufacturer</th>
  <th scope="col">Model</th>
  <th scope="col">Engine Size</th>
  </tr>
  </thead>
  <tfoot>
  <tr><td colspan="3">Copyright © Fictional Motor Dealers</td></tr>
  </tfoot>
  <tbody>
  <tr>
  <th scope="row">Ford</th>
  <td>Sportster</td>
  <td>1.5L</td>
  </tr>
  <tr>
  <th scope="row">Holden</th>
  <td>Weekender</td>
  <td>1.5L</td>
  </tr>
  </tbody>
  </table>

Useful Resources

  1. Blooberry – The Advanced HTML/CSS Resource
  2. Pragmatic Semantics
  3. Techniques for Accessible HTML Tables (emphasis on US section 508 law)
  4. Bring on the tables

12 thoughts on “Accessible HTML Tables”

  1. There is no “col” attribute for the TABLE element in HTML4 or XHTML1, so any page using that would be invalid. You should use the COL or COLGROUP element types, right after CAPTION, to specify the number of columns or column groups in a table.

    The reason why TFOOT must come before TBODY is so that user agents should be able to render it already on the first page (in a paged medium) without having to load the entire table. The idea is that the THEAD and TFOOT could be repeated on every page of a multi-page print-out. If TFOOT were to appear in the logical position (after TBODY), the entire table would have to be downloaded before anything could be rendered (since the user agent wouldn’t know if there was a TFOOT waiting at the end).

  2. This article aims to fix this problem by going through the elements and attributes which can help make a data table more accessible, render faster, and make it easier to interpret.

  3. Many of HTML guides and book don’t have description of some of these table tags. For HTML-based site it is really useful.

  4. Thank you for this. I am still learning about html and css, Accessible HTML Tables are one part of developing I need to still get my head around

  5. This explanation goes above and beyond what Section 508 requires. Section 508 itself is not very clear of the minimal requirements, but when using your example, you can’t go wrong.

    Also, I really appreciate that we can post comments without having to enter the text from the image. Often times I encounter forums discussing accessibility where a captcha is required which blind people cannot pass by default.

    Tom

Leave a Reply

Your email address will not be published. Required fields are marked *