Tableless website

[WDC]

Hi,

I am not sure but heard a lot about tableless websites. Are they better than those using tables

[Rod Abbotson]

I have just spent a whole lot of time redesigning my site without tables I noticed the following points..

1) The redesigned pages load 3 times faster than when they were in tables

2) I had more problems making it work equally well in Mozilla/Firefox IE6/7 but with some perseverance and tweaking manged to reach a compromise on how things were diplayed.

3) I had tried this 6 months previously with poor results and when back to designing in tables - now it all seems to work better, im sizing all my divs in pixels rather than percentages.

4) The above I had to be careful and view the results in different resolutions.

5) I still have a few problems with Mozilla Firefox in the way they display heading tags - leaving a lot more margin around the tags which results in pushing the content down and out of the division sometimes not dipslayed - if I make it work OK in Firefox then it looks silly in IE too many spaces! But as analytics reveals the majority of browsers to my site are still using IE

6) Redesign a page at a time using CSS and divs, pages with the same theme you can use classes etc. Try to make the page appear exactly as it did in tables, this is good coding practice and herlps you control the appearence and not the other way around!

7) Always check that it displays in the major browers OK before uploading the files, keep back ups of your old table pages until you are sure that the new ones work OK!


I came across an interesting problem a couple of days ago. I have a tip of the day with an external javascript file, one of tips was slighty longer than the rest and pushed all the divs out of alignment beneath where it appeared. As the page appeared OK the previous day, it puzzled me at first and I spent a while tweaking the CCS to no avail. When I reaslised what was happening I cut the tip shorter and the page went back to normal without any further altrerations.
Moral of that is dont panic if a page suddenely appears funny! Its usually something simple.
So if you have active content changing on a time basis check that each change will diplay properly!

9) I resisted rebuilding the site for a while as lots of top sites still seem to designed with tables but I decided to bite the bullet and start redesigning and am pleased with the results so far- it also makes my site easier to maintain due less coding on the html files and more in CSS.



OK hope some of that is useful to anyone who is in the same postion wity a website - meanwhile I have to get on do a weekly update for my site (already done the Monthly update!) plus I have at least another 150 or more pages to convert to "tableless" oh I left things that should be in tables - in tables, price lists etc. Start with all the parent pages and work down! Good Luck!

Anyone has any similar probs or fixes post here

Rod

[DaveSawers]

Rod seems to sum it all up admirably... It's a lot of work converting an existing site; for very little benefit.

For a new site design, then by all means embrace the CSS mantra as you are future proofing your site. It makes it easier to customize for mobile browsers and new trends.

[dreras]

Here are a few more advantages to tableless layouts:

Semantic content
Search engines can't read everything in tables and it becomes even worse if you have many nested tables, where most table layouts will become nested too deeply.

Tableless layouts will arrange all of your content in a nice semantic fashion that the search engines can read much easier.

Shorter Production Time
Tableless layouts can be modified on the fly, not like tables where you'll have to edit multiple places on each page

Read Jeffrey Zeldman's "Designing with Web Standards" for every possible reason about why you need to begin developing this way immediately. It will make your life easier.

Start small with hybrid layouts and work your way up.

[ran_dizolph]

Start small with hybrid layouts and work your way up.

That's how I did it. It's a big step to get off of the table teet...once you do though, you'll wonder why you didn't make the switch a long time ago.

[Rod Abbotson]

My sentiments entirely I find my websites much easier to maintain with tableless layouts, just use table for tabular info now. Much to the chagrin of local web designers here in Jordan! (But then again they are still into loads of flash with skip intros and annoying music as they think its cool! LOL)

The only problem I have had is that my site used to display well on a small screen (ie using Opera F11 to review) When in tables everything used to display nicely in a column - now it all displays but lots of stuff all squidged to the left (presumably as using float left a lot in the css).

Any ideas on that???

I am just starting on a new website which has a mobile professional audience target so this will be more impoortant on this new site - I dont really want to go back to tables to sort trhe problem!


Rod

[activeco]

Rod, have you experienced any change in serp's?

[dreras]

Rod,

One thing I would always make sure of is that in the top of your CSS file you zero EVERYTHING out. I add this little piece of code to every CSS document I have:

 ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; }

This code makes sure that no matter what browser your using the margins and paddings will start at 0 so that you can set everything yourself.

Also when your using floats make sure that you clear them out at the bottom of the last float. This can cause a lot of headaches if you don't know to clear them.

[Rod Abbotson]

Rod, have you experienced any change in serp's?

Not really noticable at the moment as I am already changing lots of other things as well seem to be on the first page in most relevant searches but thats not too difficult as I have a niche market!

One thing I would always make sure of is that in the top of your CSS file you zero EVERYTHING out

Thanks Ill try that and see what happens!

[jboeckman]

I know I am a little late here but I think this article shows how powerful CSS can be on large scales:
Mike Davidson - Interview: The ESPN.com Redesign

That's right it saved ESPN 2 terabytes/day, wow!

[tombstoneweb]

This is a related question.

When designing a banner graphic for a fluid website what size should you design for?

Thanks!

[ran_dizolph]

One thing I would always make sure of is that in the top of your CSS file you zero EVERYTHING out. I add this little piece of code to every CSS document I have:

You don't need to do all that, the following does the same thing:

* {
margin:0;
padding:0;
border:0;
}

[LD]

Originally Posted by dreras

Here are a few more advantages to tableless layouts:

Semantic content
Search engines can't read everything in tables and it becomes even worse if you have many nested tables, where most table layouts will become nested too deeply.

Can you explain this a little further. If the page is in HTML, why when the SE's crawl a site can't they read the text code in a table and nested tables?

[dreras]

When you build a site with tables...you start out with one table that "houses" the entire site.

Then when you move down to the content area, you'll typically have a side column and a main area. You'll need one more table to "house" both the sidebar table and the main table.

Then both the sidebar will have its own table and the main area will have its own table.

Now you have 3 nested tables, before you have even gotten to content layout.

Bots and crawlers have trouble going more than 4 nested tables, so it depends on how complicated your build is.



Another downside to tables is the way bots will read and index your content. Just because the content is side by side doesn't mean it will put the two sets of content together. Once again it all depends on your build.

Instead of the bots crawling your content from block A, to block B, to C, to D, it may go from block A, to block C, to block B, to block D. And if your content doesn't flow in that order the bots can get a different impression of what your site is really about.

[martinmarzejon]

Yes, CSS is better for all the reasons already mentioned.

I would not however, re-engineer the existing site just to implement valid xhtml and css. If your site is performing well in its current state (with evil tables ), then keep it as is until the next big re-design. Instead of re-coding, spend the time planning the next big re-design.

[OpticBurst.com]

Originally Posted by martinmarzejon

Yes, CSS is better for all the reasons already mentioned.

I would not however, re-engineer the existing site just to implement valid xhtml and css. If your site is performing well in its current state (with evil tables ), then keep it as is until the next big re-design. Instead of re-coding, spend the time planning the next big re-design.

Sounds like a winner!

[MrGamm]

Originally Posted by WDC

Hi,

I am not sure but heard a lot about tableless websites. Are they better than those using tables

At one point they were essential. With the death of IE mac 5.2 they are not so crucial anymore. Jmo...

Most people will tell you that you should never use tables which is still flat out wrong. There simply are some things which cannot be achieved without using them unless you resort to insanely unnecessary server side workarounds or javascript hacks.

I think it is a wise move to make the shift with the rest of the web community to divs, relative vs absolute positioning. But keep in mind every tool in the toolbox counts.

[MtraX]

It's important to mention that it does take more time to build tableless when you really want to make it cross browser compliant, but the pros far outweigh the cons when making style changes in your stylesheets (rather than having to update every single page on your site, as mentioned).

You do however need a reasonably seasoned designer (HTML/CSS) to sort out the small niggles as many just give up and then you have slight discrepancies between the different browsers.

I would agree with the 'leave it for a big redesign' sentiment if your site is performing. Google's pretty good and fishing out content from tables, in fact we haven't really seen any difference in ranking ability between table / non table design. There are too many other important factors that influence ranking that's more important to attend to before tables vs tableless. That said, my feeling is that tableless is the semantically / standards correct way of doing markup.

You'll love it once you get the hang of it!

[NetMassimo]

I agree that it takes more time to build a tableless layout but if you have to modify it I found that a table can be tricky to handle so in the long run you can save time using DIVs.