Site icon Search Engine People Blog

Tables vs. DIV/CSS Layout: SEO Point of View

css

Websites written using DIV/CSS are considered to be coded cleaner while nested TABLEs on the other hand  can increase page size and weight.

Styled DIV tags are now considered the standard method for creating web design layouts by most web designers. DIV/CSS allows designers to change the entire look and feel of the website by only making changes to the external CSS file.

Where TABLEs exceed is in displaying data such as Calendar or Price List (Tabular Data). To create something similar strictly using DIV tags would be very time consuming and would require a significant amount of code. A TABLE makes quick work for Tabular Data.

Search engines and spiders don't care one way or another. Search engines look for content on the pages and not the HTML code; for that matter, even the pages which are not HTML coded properly or W3C valid still get indexed and rank in search engines.

Last year after Google announced PageSpeed is going to be one of the factors for ranking in Google Search. Web developers started optimizing their web pages by applying web performance best practices, and also started avoiding TABLEs on their website and use DIVs instead.

The use of DIV tags in combination with an external CSS creates smaller sized web pages which results in faster load times when compared to TABLE based layouts. CSS move the styling code off-page and into an external file, thereby keeping page sizes as minimal as possible. DIVs offer more flexibility and you can change the layout of the complete site by just changing a few things in the CSS file(s).

TABLEs for tabular data & DIVs for page layouts

TABLEs are the correct technology for tabular data. DIVs are the correct technology for page layout and defining objects on the page (along with other block-level objects, i.e. heading, paragraphs, ul tags etc.). Use them both and use them well.

Bottom line: each element has a clear purpose and should be used appropriately. DIVs are for page layout and TABLEs are for tabular data representation.  In addition, good semantic design (which means no TABLEs for layout) offers many benefits for maintainability and adaptability. These benefits are not as noticeable when you first build your site, but any changes or even a complete redesign to be made later will be much easier.