When to use HTML tables in your web pages and when to avoid them

Tables are one of the most often used HTML elements, however they are also one of the most often misused ones. In this article we will try to explain when it is a good idea to use tables in your code and when it is better to avoid them. This article can also serve as a guide to the users of our Table2CSS converter program when they need to decide whether some webpage should be converted to tableless format.

What are tables used for?

Web designers use tables for multiple purposes - positioning images and text on webpages (page layout), displaying large arrays of data, creating rectangular boxes on the webpage, creating input forms, etc.

Why do people working on Search Engine Optimization (SEO) try to avoid tables?

Use of HTML tables is often frowned upon by people doing Search Engine Optimization (SEO) work. In order to understand how tables can hurt ranking of your pages we need to take a look at the way search engines rank pages. While the exact details of search engine ranking is proprietary information available only to the search engine owners, there are some practical search optimization rules obtained by trial and error.

• Search engines prefer human-readable text to HTML markup. The more human-readable text and the less HTML markup is there on your pages the better.
• Search engines prefer smaller HTML files. The general rule is to make sure your pages do not exceed 100KB in size.

So why do HTML tables hurt search engine optimization?

The SEO-unfriendliness of HTML tables is directly or indirectly caused by the fact that table-based layouts generally tend to create larger HTML files than pure CSS-based layouts.

• A layout using HTML tables usually requires more HTML tags compared to a tableless layout implemented with CSS. In the extreme case when a table is used to create a single box, there are 3 tags used by the table layout (<table>, <tr> and <td>) versus 1 tag (<div>) used by the tableless layout. The greater number of tags used to implement the layout naturally leads to a worse text/markup ratio.
• The larger number of table tags coupled with the fact that in most cases tables use HTML attributes instead of CSS usually leads to larger files, thus hurting the SEO ranking even more.

What other problems can cause the inappropriate use of tables?

According to the HTML 4 specification:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

If tables often hurt SEO and can cause other problems why do people still use them?

Most important reasons for the extensive use of tables are:

• Some of the pages that use table layout have been designed in the old days when browsers did not support CSS properly. Rewriting them to use tableless CSS layout would mean lots of manual work (Note: these are the use cases targeted at by our automatic Table2CSS converter tool).
• In other cases CSS-only web layout cannot completely replace the functionality offered by tables. CSS is quite versatile, but the CSS support in Internet Explorer - today's most popular browser is somewhat limited. The CSS subset understood by Internet Explorer does not really let us create non-fixed (liquid) layouts where the page expands and shrinks based on the size of the browser window. We still can convert the page to tableless and view it in Internet Explorer, but we will have to make the page layout fixed.
• Tables can also be used when they are best suited for displaying some data. For example if you have to display a school timetable then it is natural to use the HTML <table> tag.

See also our next article in which we explain how to convert manually your html tables to tableless code.