Many designers are now opting for table-less designs and using clean markup and CSS for webpage design. However, when tables are appropriate, many tend to misuse their semantics.

Accessible Tabular Data

Tabular data can be made accessible by following the W3C’s recommendations. The first element is the basic <table> containing block tags. Here are some tips to make tables clean and accessible following web standards.

Describing the Table

It is useful to have a title for any table. Screen readers will be able to more easily identify the context of the data within the table, as relying on adjoining text is only somewhat useful at best. To add a title, we use the <caption> tag:

<table>
<caption>Q4 Sales Data</caption>
</table>

When the caption is not enough, it is useful to add a summary="" attribute to the <table> tag. This will definitively describe the table for non-visual screen readers.

<table summary="The fourth quarter sales figures for Acme, Inc.">
<caption>Q4 Sales Data</caption>
</table>

Note that in most visual browsers, the summary contents will not appear in the viewport.

Grouping the Rows

We are all familiar with the <tr> (table row) and <td> (table data) tags, and some of us may also be familiar with the <th> (table heading) tags.

However, to really make a table accessible, consider grouping the table rows with the <thead>, <tfoot> and <tbody> containing tags. You can also group columns with the <col> and <colgroup> tags, but this article will focus on grouping rows.

In many browsers, the header and footer will be repeated when printing out a table that spans multiple pages.

Ordering

A tip when using the row-grouping containing tags is to use the recommended order. Many people think that the order should match the order of the intended output and end up with thead->tbody->tfoot. It turns out that the order ought to be thead->tfoot->tbody.

<table summary="The fourth quarter sales figures for Acme, Inc.">
<caption>Q4 Sales Data</caption>
<thead>
   <tr>
      <th>Month</th>
      <th>Revenue</th>
      <th>Income</th>
   </tr>
</thead>
<tfoot>
   <tr><td colspan="3">Data in thousands of dollars USD</td></tr>
</tfoot>
<tbody>
   <tr>
      <td>October</td>
      <td>7,000</td>
      <td>345</td>
   </tr>
   <tr>
      <td>November</td>
      <td>1,000</td>
      <td>(494)</td>
   </tr>
   <tr>
      <td>December</td>
      <td>2,400</td>
      <td>121</td>
   </tr>
</tbody>
</table>

• (ex) “Table 1 Example”:/contrib/examples/table1.html (Use your browser’s back button to return)

Using this order has at least two advantages. The first is that screen readers can parse the heading, which will typically contain the column headings, as well as the footer before dredging through the tabular data. The second advantage has to do with how we populate the data from the back end.

Many times we read tabular data from a database or file using a server-side scripting language like PHP or Perl. It makes coding neater to have the data drawing logic after the header and footer.

Additionally, as the data is fetched and outputted, especially when there is a lot of data, it sometime takes time to render. Having the footer before the data in many web browsers will complete the table as it draws.

Closing

Many times in our applications we find ourselves using tabular data. Using the recommended tags makes semantic sense and our applications more accessible. Add some CSS and we can make our tables stylish and functional.

• (ex) “Table 2 Example”:/contrib/examples/table2.html (Use your browser’s back button to return)