When designing a website, SEO experts will frequently exclaim the value of using a CSS layout instead of HTML tables in your design code. In fact, over the last few years, an untold number of pages have been written by the SEO community about how it is better to use CSS layouts for SEO, somewhat ad nauseum. So it is not surprising, really, that so many clients now ask for the complete elimination of tables from their websites. Is the complete removal of tables a reasonable expectation?
The Case for CSS Layouts
There are many solid reasons for using a CSS layout:
- CSS can structure the information in the page in a standardized format (H1 for headings, etc.)
- Removes formatting tags from the source code
- Usually lowers the amount of “code clutter”
- Allows better “textbook” code
- CSS can result in more accessible sites - remember - Search engines “see” websites similar to a visually impaired visitor.
CSS also has the additional advantage of being able to separate the location of the code from the location of the element on the page. For example, when coding a layout using tables, you almost always have to code the left side menu before the main body of the text. In a CSS layout, a talented developer can code the main body of the text, then the left menu, then the right menu, etc. This means that the body of the text, the actual content of the page, can appear much “higher in the code” (closer to the beginning of the file). There is some debate whether the location of elements within the code is or is not a factor in rankings. Certainly, a CSS layout can be easier to read for visitors with accessibility issues, and at least you can ensure that the search engine accesses the content in the right “order”.
What is a Table For, Really?
Tables were originally intended to present data. The HTML code itself is based on this fact - <th> means “table header”, <tr> means “table row”, and <td> means “table data”. As web design became more creative however, tables were used for page layout simply because no other layout tools were available at the time. Over time, tables were stretched far beyond their original purpose.
From a search engine and Accessibility point of view, tables distort the flow of the HTML code. For example, on a page with a left menu, elements that are more important (such as the main content), are pushed below lesser important elements (such as the menu). With a CSS layout, the main content code can appear before the menu code. Remember - while visitors generally read across the page, and (depending on design) across table cells – the search engine generally reads down the page, along table cells.
After a somewhat shaky and flaky start, CSS is now becoming better supported by most browsers. Now that CSS browser standards are beginning to emerge, there is no essential need to use tables for layout. Website cross-browser and cross-platform compatibility can achieved using well-formed CSS.
And the Winner is…
Despite the wider support of CSS for layout, and the possible search ranking support of CSS design, tables are not, in and of themselves, a bad thing for a website. Remember - the original intent of tables was to present data. If you have data that needs to be presented in a table format - then an HTML table is the right format. It is impractical to imagine a medium to large sized website without any tables at all. What is most important is that the overall page layout is coded in CSS.
Poor <table>… so misunderstood. 