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 at Cisco Systems Inc.

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

Subscribe to Newsletter

Receive my latest posts right in your inbox? Enter your email address below to subscribe.

Blog SEO 2015 - Strategies, Trends and Techniques How to Update Nokia Phone Firmware / Software Types of Facebook Users (Fun Post) Website Analysis: Gain Authority, Popularity How to setup Custom Error Pages SEO Overview: What? Why? And How? How to Verify Authorship (rel='author') in Google SERP Website URL Structure Strategy How to avoid duplicate content issue caused by mobile website URL Rewriting SEO Friendly: Convert Dynamic URLs into Static URLs What should we do with the website expired pages? Leverage your .htaccess file efficiently Google Image Search: Observation Mobile SEO Best Practices All about SEO Meta Tags Page Speed Best Practices Social Media Share Button Update: Twitter Apps and You Yahoo! and Bing Search Alliance HTML5 Overview - Introduction to HTML5 Best Practices for Custom Error Page Geo Location Targeting in Google SERPs Social Media Mistake List of HTTP Response Status Codes How to position DIV at the center of web Google Search: Rich Snippets for Events How to Suck at Social Networking Send PPC traffic to landing page and not homepage XML Sitemap Best Practices What is Canonical URL Tag? Utilize your 'robots.txt' file efficiently Keys for a successful Website Why paid search numbers often don't match How Accurate is your Web Analytics Data Optimize Your Landing Pages Guidelines while building a Corporate Website Guidelines for eMail Newsletters DO's and DON'Ts - Search Engine Optimization (SEO) Search Engine Optimization (SEO) Gyan - Fundas Tools MISC