Tuesday, October 25, 2011
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.
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 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.
Joydeep Deb is a Senior Digital Marketer and Project Manager with 13+ years of experience in Digital Marketing, Lead Generation, Online Brand Management, Marketing Campaigns, Project Management, Search Engine Optimization (SEO), Search Engine Marketing (SEM), PPC, eMail Marketing, Web Analytics, Web Technologies, Web Design and Development.
With an MBA in Marketing. IIM Calcutta Alumini. Lives in Bangalore, Karnataka - India.
Receive my latest posts right in your inbox? Enter your email address below to subscribe.
Thank you for subscribing, you will be receiving our latest posts right in your inbox.