The Right and Wrong Way To Use Tables

Table-based layouts, as you may already be aware, cause significant accessibility issues for users with disabilities. The best we can do is speculate as to why this is, but there are two likely reasons: Perhaps the increased ratio of code to content leads search engines to downgrade the ranking, or maybe the sheer complexity of the nested table structure is more difficult or time consuming for the spiders crawl. Whatever the reason, a table-based layout is not worth the risk of a downgraded ranking. Stick to CSS-based layout systems for better results.

Just because table-based layouts are a bad idea does not mean tables are obsolete relics of the past. When you need to present tabular data, there’s no better tool than a well-built table. If written correctly, tables can also offer great opportunities to include more search engine friendly content that can help build the keyword density of a page. Let’s take a look at a simple example of an accessible table used to display tabular data:

<caption> Expresso Impresso’s top-selling commercial espresso machines</caption>

<thead>

<tr>

<th id=”model”>Model</th>

<th id=”price”>Price</th>

<th id=”num-solid”>Number Sold</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

Notice the summary attribute in the< table> tag, and the <caption> tag present two valuable opportunities to tell search engines and users alike what the content within table is communicating. The <th> tag also communicates an elevated information hierarchy to search engines, and can be a good place to position keywords where relevant. By building the table following accessibility standards, we’ve naturally increased the keyword density of the page which can boost is ranking in searches for these terms.

HTML Utopia_Designing Without Tables Using CSS