Are tables as bad as they say?

I've been into web designing for almost a year, as you all know I stil have quite a bunch of things to learn but what is it with the whole table vs css thing. What exactly makes one better then the other. I've seen lots of websites using tables and they look great and seem to display fine.

 

For layout? Yes.

It's not about how it renders. One of the stated purposes of the table element, when introduced in html 3.2[1], was for layout. CSS-P did not exist at the time.

The problems were known even then. Non-graphical UAs[2] can have problems due to linearizing the table code. Further, a nontrivial table layout cannot have well structured, semantic markup (though, it can be valid). Much of the power of javascript and css depend on the DOM being well structured and semantic. A table based layout gives up these benefits.

I won't mention the hell that is maintaining or debugging a table layout compared to good markup + css, or the bandwidth savings, or the slow rendering, or … . Oh, I guess I did.

With IE6 in 2001, and Mozilla and Opera5, table layout became obsolete. Old timers stay with tables for a number of reasons, fear being the main, IMO. There is no excuse for any newer web developer to use table layout.

cheers,

gary

[1] HTML 3.2 happened in 1997, CSS 2 followed in 1998. HTML 4, in 1999 included CSS support, by deprecating presentation elements and actively recommending css in presentation/layout.

[2] Think plain text browsers, screen readers, Braille pads, non-visual machine parsers, and &c..

 

Table vs CSS is a per site decision that I'm taking every time I start a new project. Sometimes cracking our head around CSS is needless and website renders just perfectly with a single table to render the main column layout of a website. Besides, I wouldn't get rid of the old friendly table just yet. Maybe I'll do that on the day that I won't need to test my designs with 4+ browsers on my PC and then ask a couple of friends to do MAC tests for CSS differences. When there's still need for workarounds to create cross-browser designs, tables remain a good tool on the list, in my eyes.

 

I tend to use CSS whenever I'm doing a site and will only use tables if I have to.

 

Everyone raves about CSS being the best thing you can do for your website and that it is better than tables for seo. I personally have no idea. CSS can make developing it quite difficult (or quite easy in the long run), I usually just choose tables.

 

Customers tastes differ. Some may not even have a slight idea what CSS is, while others would yell for lots of compliances and stuff that only make our nights sleepless. Not sure about those things being really worth struggling for. Most websites serve for businesses that don't really care about compliances. Big names that don't need recalling, www.microsoft.com validation fails with 5 errors, Google validation fails, too. Does that affect business? Big players don't bother... And I would not worry about it either unless I were building a website specifically promoting webdesign techniques...

 

When I switched some sites from table-based layout to CSS, the page sizes dropped by about 60%. That was enough to convince me

 

Once you get rid of the tables in your site, the search engines crawling through your pages will not have to contend with a lot of the html noise that is associated with tables and can get to your actual content much more effectively. You will be rewarded with better search results.

best regards,
Joe

 

Using a table to create a simple 3 column layout would not affect the crawl as much as it sounds it would. It's just about a few <tr> and <td> tags that save you from using floating divs that happen to break the layout at times...

 

No argument here. I am referring to when people have tables upon tables, which are inside of other tables with hundreds of rows and columns.

 

Indeed, nested tables are a "bad habit". Websites that practice that are usually developed with tools like MS Frontpage or Adobe Photoshop Slicing tool that generate the code automatically and fill it with tons of cells to render text and graphics. I would not imagine someone using notepad being that confortable in producing a layout that uses that many cells and tables-inside-tables.

 

one thing for sure is css layout website load much faster than table based layout

 

Tables are alright. They sometimes require a lot more images than CSS and CSS loads faster. I just recently started using CSS and I love it! The code isn't nearly as long as tables ( not that it's a big issue but it's a plus ). The only complaint I have for tables is they don't load fast enough. So either is fine but I personally like CSS better. I guess it comes down to personal preference in the end.

 

The problem with tables and search engines has always been related to the nesting of tables. It's not unusual for me to find web sites where spiders cannot read the content because tables are nested 5 or 6 deep (a table with a table within a table within a table within atable, etc). This is because designer tools have made this easy to do. No one writing code by hand would ever do something like that.

Tables require a lot more code than CSS. Nesting tables too many times makes it very difficult for spiders to parse out the content, and sometimes web pages end up being 90% code and 10% content.

Today, CSS is much easier to work with because browsers are up pretty much up to date with CSS standards. If you go back 3 or 4 years, there were way too many inconsistencies among different browsers for CSS to be feasible. Today, if you are not using CSS, you should start learning.

 

Hi,

This is to Singular's post...
I think that serps are well prepared to tackle any type of html...so if they are crawling pages and they have a lot of table code or no table code it does'nt really matters to them. If they are there, they will crawl it.

Thanks.

 

In terms of definitions, as some people have said here, table-based layouts are basically an "incorrect" implementation of HTML because HTML is by definition not supposed to be used for page layout. A CSS-based layout "corrects" this by providing page structure/style while allowing the HTML to perform only its task of content formatting. But unfortunately modern web browsers each interpret CSS differently which can cause an inconsistency in appearance across these browsers.

From a web developer's perspective, I don't think there is any general way to define what is better or worse, it just depends on what you or your clients prefers honestly, and what works for the situation.

For example, if I want to produce something that's completely effective and in little time as possible, and I'm not so much concerned about the additional code that a table-based layout will cause, then I'll go with that. Table-based layouts are quicker to produce (usually) simply because they tend to be more likely to be cross-browser compatible.

On the other hand, if I'm me or my client is more concerned about standards compliance, then I will take the time to created a CSS-based layout. This can be more time consuming because of the different ways browsers interpret "floats" for example.

 

You're doing well to this point; html (structure and semantics), css (presentation) and javascript (behavior) are not mingled in best practice.

Now you're moving off base. More below.

Once you learn html+css there will be no question of better or worse. Coding structure and presentation orthogonally is best practice. The client should have no more input on that than she would have on how the electrician wires her office, or the mechanic tunes her car.

For a trivial layout, there is little difference in time between a table layout and a css layout. On any nontrivial layout, the speed gained by writing purely structural html and css is considerable. The only way the table is faster is where the author experienced in tables and is not well versed in css. The issue is the author, not the methodology.

Actually, there are many more cross browser issues among the browsers where tables are concerned. Read the specs. They allow an enormous leeway in how tables are rendered, and the various browsers use all of it. For an example, see my scrollable tables demo. Only the borders are styled.

As to browser differences with css, the modern browsers are all pretty much the same. IE is not a modern browser, it is an obsolete, non-compliant and buggy PoS. All its stupidities are well known[1], though, and the experienced coder doesn't even think about it as he applies the one or two hacks that fix most of the bugs, or the work-arounds, or the just plain dumbing down for IE. MSFT has been particularly unforthcoming regarding IE faults. The community, on the other hand, has been very good at ferreting out IE's faults and fixes[2].

The question of which is better is no question at all. Tables layouts are obsoleted by the coming of css-p (1998) and general browser support which arrived with IE6, Netscape6, Mozilla and Opera5 or 6 (I don't remember which Opera) in 2001—more than five years ago. The old hand developers are understandably slow to make the move to modern coding practice. They're going from a high level of competence to being a newbie again. Not pleasant. I started web development in 2001, and was able to move over to css before becoming deeply entrenched as a table writer, but I do remember some of the frustrations.

cheers,

gary

[1] IE7 has built in many of the hacks we've been using for IE6. We're still learning about its peculiarities.

[2] See PIE and On Having Layout for example.

 

But you see, that's the biggest problem. I would LOVE to code all of my layouts in pure CSS, but frankly, it's more time consuming to employ (and sometimes research) CSS hacks every time that I want a webpage to appear the same in all browsers. (I'm not trying to win any web design awards or anything, I'm concerned about my time value as a web developer. Table-based layouts allow predictable and consistent static positioning which is ideal in situations that involve a LOT of block level elements on the page. I have years of experience coding CSS layouts, but there are custom CSS layouts that would take me twice as long to code than a table layout simply because I have to figure out the workarounds for IE and possibly other browsers.)

You say that IE is an obsolete browser. Technologically, that is the case, but the unfortunate fact is, according to the numbers, the majority of people surfing the Internet are in fact using IE6. (And I don't think that IE is only problem. If you've done testing in all "modern" browsers, you'll see that there truly are inconsistencies in the way that the exact same W3C validated CSS code renders the layout.) In my opinion, this means that I as web developer need to give full consideration to the best practices for coding for IE6 as a priority, regardless of my opinion of it (And I hate IE6 as much as the next web developer). Until the majority of people are using web browsers that don't cause as many problems as IE does with CSS, in my opinion, table-based layouts are not obsolete for practical use in some but not most situations, although idealistically and theoretically they are completely obsolete.

 

I use CSS as much as humanly possible. Tables (as well as being complicated to read the code) are costly as far as time goes to update your site.

I use tables only for displaying data, like groups of thumbnails linking to other places.

Just out of interest has anyone noticed that since IE7 came out, all IE compatible browsers are now reading Firefox CSS hacks? Proper PITA that one

 

The thought alone that IE6 and IE7 seem to be developed by different companies makes me believe that finally Microsoft has changed something about their attitude. Towards the better I hope.