Web Site Structure – Tables Or CSS – Which is Best?


There are two principle ways of structuring HTML that Web designers use. The first employs the HTML table construct, and tables nested within tables. This method works fine for creating a site, but the downside is that the source code of the site includes a huge number of table tags and is difficult to read and understand. This problem is particularly acute if you accidentally delete a table tag and find that you Web page is suddenly very badly malformed and you do not know why. If you look at the source HTML (to see the source of a site when using the Firefox browser, click CTRL-U) then it is more difficult to find the actual textual content of the site. Many existing and legacy sites use this formatting option. An alternative is to use Cascading Style Sheets (CSS) to define the format of the page, including page layout and styling. Because style sheets can be stored separately from the document that they style, it is normally a lot easier to see the textual content when viewing the source code of the CSS-formatted page.

There are debates about which formatting option is best with regard to Search Engine Optimization (SEO). For example, can a search engine can spider a tables-based site as easily as a Cascading Style Sheet (CSS) based site? In the opinion of this author, indexing algorithms are perfectly capable of extracting text from tables-based pages, however most designers now use CSS-based designs, for the following reasons:

    • CSS based pages are smaller in size and hence quicker to download. Table constructs require far more HTML tags than CSS. This makes the page size greater, which increases the download time for visitors. It may also have a detrimental effect on SEO since Google has recently stated that it does use page download speed as part of its ranking algorithm.
    • The data used to format a page is stored in the style sheet rather than the Web page. This makes the HTML source of the page easier to read by people and more efficient for search engine spiders since they can read the words without having to parse out a lot of table structure HTML.
    • The search engines generally give more weight to information nearer the top of pages. With CSS, textual contact is more likely to be near the top of the page. You can also position important text near the top of the HTML markup even though it may not appear at the top of the actual page when it is rendered in the browser. For example, say you created a summary box that contained a lot of key phrase rich content. You want the box to appear half way down the page, however you would like the information to appear near to the top of the HTML markup. With CSS this is possible.
    • People often create different pages from those displayed in a Web browser for site visitors to print. This is because Web pages are often too wide for printing or contain information (such as menus, graphics or repeated information) that are largely irrelevant in the context of printing. The trouble with these pages is that they contain duplicate content to the original Web page. In his blog, Matt Cutts says that this particular form of duplication should not worry ‘white-hat’ sites too much, but why take the risk? With CSS it is possible to create a style sheet for the screen and another for print, both of which use content on the same page. So, for example, in the print style sheet the menu can be made invisible.
    • All the pages on a site can reference a style sheet (eg my-stylesheet.css). It only requires one small change to the style sheet in order to change formatting, text color or size throughout the entire site, without having to modify pages individually. It is actually possible to change the entire look of a site just by making changes to the stylesheet. A good example of this can be seen at csszengarden.com. This site shows how one Web page can look completely different by changing the style sheet alone.
  • CSS based menus are constructed using simple HTML list constructs. This means that once a menu is created and styled, it is very easy to add new items or delete unwanted ones. The underlying HTML is also very easy for search engine spiders to read and understand. It is also readable by devices used by blind or visually impaired visitors to ‘read’ the menu data. The same is not necessarily true of Javascript based menus. If you compare the source code behind a Javascript based menu and that behind an equivalent CSS based menu, the CSS based menu is vastly simpler.
  • The h1, h2, and h3 tags are very important in terms of SEO. With CSS it is easy to redefine the look of one of these tags across your entire Web site, or to style them differently in different parts of a Web page.
  • Using cascading style sheets it is possible to create different style sheets for different browsers, for how the site is printed and for different devices (such as cell phones or mobile browsers).

Leave a Reply