Note: this is intended for legitimate uses of an HTML table, NOT when using it to provide visual layout. When using a table for layout, stick with <table>, <tr>, and <td>, as using the elements below in an unintended manner will hurt more than help.
I was reading an article on making tables accessible, and I wanted to point out some other benefits besides helping screen readers. As you may be aware, in many cases better accessibility means better search engine optimization. Let me point out a few cases where this is true.
Summarizing Content
Using the caption tag and summary attribute gives the search engine something to report, and also a place to put a keyword-rich description of the table that is directly linked to the data, rather than being a nearby unrelated paragraph of text. This simple addition gives meaning to the data in a format understandable by the software that processes your site (Googlebot for example), rather than just the human visitors browsing the search engine results. As for looks, the caption tag can be easily styled as you see fit, just like any other tag, even invisible if you’d like. I’ll leave ethics up to you.
Content Correlation
Roger Johansson mentions using the ’scope’ attibute on your <th> tags. Using <th>’s will help you to begin with, since it differentiates the heading information versus regular content. With the scope attribute defined, it goes even further and informs the search engines what the heading is correlated to. So if you have headings defined in both axes, the search engine can correctly interpret the relationship of the data. Check the example below, with one of each scope highlighted.
The three headings in the first row have a scope of ‘col’ which indicates the data they are referring to is in columns below each of them. Likewise, I set the scope of each person’s name to be ‘row’, which tells the search engine that the data in that row is all related to that name. See how easy it is to spot Bob’s age? This is a pretty simple task for a human even without the help of the scope, but the coloring represents the aid you are supplying to the search engine.
Note that scope can be applied to a <td> just as effectively as a <th>, and when a cell is both data and a heading like the names below, the <td> is the appropriate choice for tagging the headings for each row.
Alternative Search Terms
<th> tags can take an ‘abbr’ attribute. While this is convenient for the screen reader to avoid saying the same three word heading over and over again, it also can come in handy if people end up searching for a less formal but still descriptive term for that column of data. See the ‘Date of Birth’ column in the example source.
Example Table
Employee Birthdays
| Name |
Date of Birth |
Age |
| Chris |
Jun 14, 1983 |
22 |
| Bob |
Nov 11, 1979 |
26 |
| Tom |
Apr 09, 1976 |
30 |
The source (styling excluded):
<table summary="A sample table demonstrating the benefits of the scope attribute within table elements">
<caption>Employee Birthdays</caption>
<tr>
<th scope="col">Name</th>
<th scope="col" abbr="Birthday">Date of Birth</th>
<th scope="col">Age</th>
</tr>
<tr>
<td scope="row">Chris</td>
<td>Jun 14, 1983</td>
<td>22</td>
</tr>
<tr>
<td scope="row">Bob</td>
<td>Nov 11, 1979</td>
<td>26</td>
</tr>
<tr>
<td scope="row">Tom</td>
<td>Apr 09, 1976</td>
<td>30</td>
</tr>
</table>
