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

By: ScoDal

ScoDal — Sun, 07 Jul 2013 08:54:28 +0000

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.

By: alexander

alexander — Sun, 25 Dec 2011 10:20:01 +0000

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!

By: Glenn Ferrell

Glenn Ferrell — Fri, 04 Nov 2011 13:36:17 +0000

@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.

By: Geoff

Geoff — Fri, 04 Nov 2011 00:11:36 +0000

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.

By: Bas

Bas — Thu, 03 Nov 2011 21:42:06 +0000

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!!!

By: Joydeep

Joydeep — Thu, 03 Nov 2011 15:10:15 +0000

In reply to Michael Martinez.

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.

By: John Howard

John Howard — Thu, 03 Nov 2011 14:05:59 +0000

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.

By: Ruud Hein

Ruud Hein — Thu, 03 Nov 2011 13:53:26 +0000

In reply to Michael Martinez.

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.

By: Michael Martinez

Michael Martinez — Wed, 02 Nov 2011 21:28:41 +0000

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”?