Websites written using DIV/CSS are considered to be coded cleaner on the other hand improperly nested TABLEs can increase page size and weight. DIV tags are considered the standard method for creating web design layouts by most web designers due to the advantages the DIV tags bring over the TABLE tags. DIV/CSS allows designers to change the entire look and fill of the website by only making changes to the external CSS file.

TABLEs also do have their place among web designs and have advantages over DIV tags in certain situations, where TABLEs exceed is the 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.

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

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 that PageSpeed is going to be one of the factors for ranking in Google Search, hereafter 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. It is just a matter of personal likes and preference. 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.


           

Add a comment



About the Author
Joydeep Deb

experienced in Online Marketing, Web Technologies, Search Engine Optimization, SEO, SEM, SMM, Web Master, eMail Marketing, Web Analytics, MIS Reporting, Web Design and Development.

Lives in Bangalore, Karnataka - India and working as an Program Manager SEO.

Get social with Joydeep at Twitter | Facebook | Google+ | LinkedIn