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.
You can’t be serious: “Websites written using DIV/CSS are considered to be coded cleaner while nested TABLEs on the other hand can increase page size and weight.”
PUH-lease. Go back and sift through a few DIV-laden pages to look for content. There is no advantage to using CSS versus tables or tables versus CSS in terms of clean coding and page size.
And what the H*** is “page weight”?
HTML5 + CSS3 missed an opportunity to introduce a “rounded corners” element. DIV wrapping for rounded corner styling is probably THE worst case of semantic code destruction. Equal height columns DIV containers would be a close second. Most useless or annoying CSS cruft is having to use a canvas or main container DIV to get IE to do what other browser do when you set the same rules on the BODY instead.
Hi Michael,
“Websites written using DIV/CSS are considered to be coded cleaner” – Yes, they are as the container [DIV] attributes height/width/background color etc are mentioned in the external CSS and not on-page, which helps in avoiding lot of extra (junk) code from the page.
“while nested TABLEs on the other hand can increase page size and weight.” – In case of TABLEs the container attributes are on-page [tr/ td/ th/ cellspacing/cellpadding/ width/ bgcolor etc…] and improperly nested tables increase juck on-page and maintenance is more.
Regarding “page weight” – I am not sure if you are aware of PageSpeed, Page weight is a measurement of the file size (usually in kilobytes) of a Web page that includes the combined size of all the elements of the page, including HTML files, images, audio or video, Flash animation, etc.
Please refer – http://www.joydeepdeb.com/blog/page-speed-best-practices.html
Let me know if you have any more question(s), I will be happy to answer them.
Good topic we’d love to read more about. Some of our simplest websites using good DIV/CSS get very good search results. I also know it can be a major headache to update some table based sites we inherited. As a designer/developer I avoid tables where possible.
Totally right. Divs and css are definately the way to go. It makes the code / text ratio much better. Besides that using divs and css for markup makes it much easier to position the most important things (headings & text) on top of the pages code. Instead of line 350, after all the table markup. And it is good for page speed too! Don’t forget to minify and combine css and js files!!! I once recoded an oscommerce based shop from table to css layout. The code / text ratio was 75/25 with text starting at line 90 of source code. After finishing code / text ratio was 75 / 25. The document size decreased with 65%. We used minify to handle css and js compression and removed all newlines and whitespace from html code. Before changes we scored 35 points with google page speed, afterwards that was 94%! I think everone has to agree that this is beneficial for SEO!!!
Truly say that Web sites created using DIV/CSS are regarded as to be coded cleaner” – Sure, they are as the container [DIV] attributes peak/width/background colour etc are mentioned in the external CSS and not on-web page, which helps in avoiding great deal of extra (junk) code from the page.
@JoyDeep — I agree on most of your points. I use tables for tabular data, NOT for general layout. The primary reason is that if I want to rework the look and feel of the site, reworking a site that has a layout constructed in tables takes more time and effort than one using CSS/DIVs. Life is just too short.
On the SEO front, the bottom line is good content tagged correctly. For example, if in-cell CSS styling is taking the place of something that should be in an H1 tag… that’s just not good practice. Unfortunately, I see a lot of this in sites that use tables for layout.
The only difference I see is that div layout can make something very beautiful with less code because of the high dependence on css as may be compared to using tables, but for purposes of s.e.o table layout is still efficient so long as your perfect with clean coding.
Many web designers may say div layout is better for s.e.o; but note, most designers that can use css to style their pages are good enough in code view and can clean their codes perfectly and more so using css and divs gets you to work more often in code view to make up things.
Good s.e.o requires writing clean codes and of-course not including so many unnecessary codes to make the page light and load very fast.
Else div or table has no big impact on s.e.o – just write the clean and only necessary codes in your pages. Cheers!
Just food for thought… a websites table layout is probably a few kb, not even as large as any images that need to be loaded on the page. Soooo… I get that using div’s will speed up your page, but if your page is slow, you’d be better off getting a better host or optimizing other files before rewriting your whole site for days. Focus on div’s for your next project unless you really have lots of time and just want to shift your site over to div’s.
It is my professional opinion that the benefit from switching from table to div will provide minimal, if any SEO benefit at my current time of writing. The only reason I have switched to div/css is because I do web design in the professional field and when a competitor or client views my source I want them to be impressed that I’m on the leading edge of how things should be done in 2013.