Semantic HTML Table Checklist – For The Sake of SEO!

• Tweet

• Tweet

Semantics is the study and practice of introducing meaning to markups, enabling computers to better understand human language. In real world, it is much more than just academics and web standards.

Google crawlers and ranking calculators are just the sort of computers dealing with large chunks of text data everyday, reading and analyzing millions of pages of HTML documents. While they strive to better understand the articles on the Web, we, the writers and composers of content need to do our part to present as much meaningful information for them as we can, thus gaining upper hand in the search engine ranking war.

As tabular data containers, HTML tables can be a major part of the HTML semantic optimization for SEO. As far as my knowledge extends, below is a complete semantic checklist of HTML tables.

1. The ‘summary‘ attribute of the table element:

   <table summary="content summary of the table goes here"> ... </table>

2. caption element inside a table:

   <table>
   <caption>table caption title</caption>
   ...
   </table>

3. Distinct sections of the table: thead for table header, tbody for table body and tfoot for table footer:

   <table>
   <thead> ... </thead>
   <tfoot> ... </tfoot>
   <tbody> ... </tbody>
   </table>

4. There are 2 types of table cells: th and td. th is used for header cells containing the title or descriptive information for the td in the same row or column:

   <tbody>
   <tr><th>Direction: </th><td>Up</td><td>Down</td></tr>
   <tr><th>Color: </th><td>Black</td><td>White</td></tr>
   </tbody>

5. In the example snippet above, you may want to specify the header cell in a row or column by the ‘scope‘ attribute:

   <tbody>
   <tr><th scope="row">Direction: </th><td>Up</td><td>Down</td></tr>
   <tr><th scope="row">Color: </th><td>Black</td><td>White</td></tr>
   </tbody>

   For columns, the value of ‘scope’ can also be ‘col’:

   <thead>
   <th scope="row">Property</th><th scope="col">Value 1</th><th scope="col">Value 2</th>
   </thead>

   which indicates that ‘Value 1’ and ‘Value 2’ is the header cell for the rest of the cells in the same column with each of them.

6. ‘headers‘ attribute for ordinary td or th cells indicate the single or multiple headers for them, usually used in complex structure tables, for example:

   <tbody>
   <tr><td id="value_x">x = 3</td><td id="value_y">y = 4</td><td headers="value_x value_y">x * y = 12</td></tr>
   </tbody>

   The list of IDs separated by single space: value_x value_y, indicates that this table cell is combinedly determined by the table cells with the respective IDs. It’s a way of specifying multiple semantic headers not necessarily in the same row of column with the original cell.

7. ‘abbr‘ attribute to give an abbreviated version of the cell content which can only be used in header cells:

   <th abbr="Mon">Monday</th>

8. ‘axis‘ is yet another way to categorize table cells other than row and column. For example, a series of randomly spread cells are containing the same kind of information and can be seen as the 3rd axis / dimension of the table:

   <tr><td axis="incre">4.7</td><td>0</td><td>0</td></tr>
   <tr><td>0</td><td axis="incre">4.71</td><td>0</td></tr>
   <tr><td>0</td><td>0</td><td axis="incre">4.72</td></tr>

9. While you can group similar rows by thead, tbody or tfoot tags, similar columns can be grouped together semantically by the help of col tags and colgroup tags:

   <table>
   <col width="20%" class="first-column" />
   <colgroup span="2" class="last-columns">
   <col width="40%" />
   <col width="40%" />
   </colgroup>
   <tr><td>I'm 20% and classed as first-column.</td><td>I'm 40% and classed as last-columns.</td><td>I'm 40% and classed as last-columns.</td></tr>
   </table>

   This way, table columns can be easily distinguished and styled respectively.