Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
67 Comments
- bpapa, on 10/12/2007, -2/+30The trouble with tables:
1 - violation of standards
2 - not semantic. html should be as semantic as possible. "this is a paragraph", "this is a list", etc. when you use a table tag you should be displaying tabular data.
3 - mixes content and presentation. presentation of a page should be done with CSS, not html tags.
4 - bloats markup. copy in a table requires a table, tr, and td tag. doing it the right way requires perhaps a p tag. bloated markup takes longer to load and is harder to modify later. and it makes it harder for people not viewing a page through the usual means (not using a regular browser on a PC)
5 - nested tables can take a long time for a browser to render. - knightblade2oo4, on 10/12/2007, -4/+30strangerzero:
spend some time making your content usable in all major browsers. - nicnic77, on 10/12/2007, -6/+31Oh, just realise your 1990's table skills and 1 pixel tricks are archaic and redundant! Catch up or get left behind.
- Sartori, on 10/12/2007, -0/+16This article is from 2004! Is there anything more up-to-date regarding this? Surely someone's come up with a better solution than those presented in the article?
- sailor, on 10/12/2007, -6/+21and what is so wrong with tables?
Before you all start diggin me down, I really want to know... - bpapa, on 10/12/2007, -3/+17Tables is probably the worst possible option.
Going crazy (using javascript to display a footer nicely? yikes) with complexity is the second worst option.
The best option is realizing the web is not a magazine page, and not all layouts can be accomplished in a way that makes sense. - dtdgoomba, on 10/12/2007, -0/+12I don't hate tables, but for me, I avoid them because layouts change so much and I want an easier way to do it. For example, I had a 2 column layout, backgrounds in each col were different. Then I was told to flip them, put the left on the right and vice-versa, while other people had the files checked out to add content to them. I never have to open those pages anymore, I just went into the 1 CSS file and changed the floats, padding, margins, and it was done.
If I used a table and no CSS, I would have had to wait for everyone to check-in the files, open and do a mass replace, which doesn't sound like much, but CSS just makes it so much easier because of that layout/content separation. That's just a small example, but it's handy when a lot of people are using the same files. - matth1jd, on 10/12/2007, -1/+9@sailor
My biggest reason for using CSS for presentation is code cleanliness. My CSS driven pages are considerably smaller, and once the CSS is downloaded it's cached. The user is then just downloading content in the subsequent page views.
Pages built with CSS can be easily adapted for different devices, and more accessible to those with text readers. Try using a text reader on a tables site.
I like the per pixel precision that CSS affords; I find myself using CSS and HTML more and more rather than using a graphic from one of the in house designers.
I'm not locked down to columns and rows for my layouts - take a look as CSS Zen Garden, some beautiful layouts there.
I suggest picking up "CSS The Missing Manual", it's a great learning tool, and afterwards a great reference. - danep, on 10/12/2007, -1/+7Grimdotdotdot:
How about almost anybody using a mobile device. - bpapa, on 10/12/2007, -1/+8excellent real world example of why developing with web standards wins
- nicnic77, on 10/12/2007, -0/+6Practice makes perfect..
- matth1jd, on 10/12/2007, -1/+7There's plenty wrong with tables, and I can count the things I can't do in CSS on one hand. I care about people with text readers being able to read content on my client's sites. It's not a superiority act, it's just how things are done now. To be perfectly honest tables were never supposed to be used for presentation, just to display tabular data. Have you read the HTML 4.01 spec, let alone the XHTML spec?
Times they are a changin' - Jammer, on 10/12/2007, -2/+7@strangezero
Posted like a true newbie. I guess when someone like yourself is using FrontPage and images designed with MS Paint you really don't need to concern yourself with CSS, right? - inactive, on 10/12/2007, -8/+13TR COLSPAN
SPACER.GIF
NESTED TABLES FTW!!!!11 - daborg, on 10/12/2007, -0/+5Articles I want to see: "Exploding Footers in Web Design"
- catt231, on 10/12/2007, -3/+8try this solution out - at least it works in all browsers.....
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html - Teaboy, on 10/12/2007, -2/+6As always, a good article from alistapart.com. A good read.
- arizonagroove, on 10/12/2007, -0/+4If you're using Javascript to control layout you're in trouble. Not everyone browsers with Javascript enabled.
You can get a footer without using Javascript. For example http://alistapart.com/articles/holygrail
Or put "css header footer 3 columns" in to Google. - sxtxixtxcxh, on 10/12/2007, -0/+4@grim... how about any text based web browser?
- wingnut21, on 10/12/2007, -1/+5Thank Microsoft.
- econofast, on 10/12/2007, -0/+3Yes, much cleaner and more effective. Nice find.
- dtdgoomba, on 10/12/2007, -0/+3I forgot to mention that the mass replace would only be in the beginning of the design stages, before content really appeared on all those pages by the different people (and therefore all the pages would still have the same code pretty much). But when people add/change all those pages eventually, or even make new pages from my template, I couldn't even do a mass replace. I'd have to reorder the columns manually if it was a table, for each and every page... and that really adds up.
I've done that, and I never want to go back to it. Just wanted to spell it out more since 'mass replace' made it still sound like it was still easy, when it's really not. - inactive, on 10/12/2007, -1/+425 hours? Exaggerate much?
- toaddodger, on 10/12/2007, -2/+5The complexity of the design and number of browsers the site needs to support typically determines whether I use CSS or tables. I do sites for public, private, and mobile consumption, so there are usually a lot of variables to consider.
That being said, I like CSS much better, but as soon as background images or columnar pages come into play, I do find myself reverting back to tables in order to ensure cross-browser compatibility and speed up development. If IE ever becomes completely standards compliant, I will use tables much less.
But I have to comment on what one post said. When asked why CSS was better, one poster just quoted "standards" and "semantics". That should not be an answer to the question. Something isn't better because it's a "standard". Ridiculous. Something is "better" in the web world if it is quick to load, easy to use, and excludes the fewest people; and I'm not sure CSS is always superior to tables when put in that context. Someday perhaps...hopefully ;) - tobyjoe, on 10/12/2007, -0/+3Thank the designer for not knowing the limitations of IE and designing within them.
The real trick is not only for devs to master proper semantic markup and proper use of CSS, but for the term 'Web Designer' to mean more than 'graphic designer with a job designing Web sites.'
Oh, and tables should DEFINITELY be used... for tabular data. - akinder, on 10/12/2007, -4/+6I can't believe you guys actually bicker and fight over using tables v/s using divs.
Got get laid for ***** sake. - Phennim, on 10/12/2007, -1/+3Standars have only use if they are supported by everybody (every browser). When I read these tutorials about how to create '3 column layout with footer' etc. all I see is .. hack for IE.. hack for Netscape.. hack for this.. hack for that.. and now this one has javascript hacks.
It's rediculous.
Use a table and be done with it. - strangerzero, on 10/12/2007, -0/+2I've been a full time professional web designer since 1994 and use CSS on all my sites. I never use FrontPage. I hate it. My unpopular point was that in most cases you are better off using the basic HTML page formatting techniques such as tables if you can accomplish what you need to do with them. Using a bunch of CSS and Javascript just makes it so that your page won't display correctly on a greater number of browsers. Tables display on all browsers. The end user only cares if they can see what is on your page and if it is of interest to them.
- RawkBob, on 02/13/2009, -0/+2@Kazrog "CSS needs to mature in order to secure adoption" - It's browsers like IE that need to mature, not CSS. If anything CSS is too mature since the old rendering engines in browsers can't support it.
It's people not willing to update their software to reflect the latest methods for webdesign that are the problem and web devs who hide behind the table designs saying that it's impossible to do in a div/css layout shouldn't be designing sites - they're just being lazy and stuck in the past.
@Jimmygoon - display tabular data semantically correct. ;P - inactive, on 10/12/2007, -3/+5CSS almost always cuts it. I use a table to get even positioning for contact forms, but once I figure a way to not have to do that, I'll barely need a table for anything other than a photo gallery or (gasp) tabular data display.
- Grimdotdotdot, on 10/12/2007, -11/+12Knightblade: "spend some time making your content usable in all major browsers."
Please.
Find me a major browser that can't display tables. - Flynnz, on 10/12/2007, -1/+3"spend some time making your content usable in all major browsers."
I think you have this backwards...as of right now it is MUCH easier to get your page to look the same across browsers with tables. I have nothing against div/css for layout, and I do think it's the future. But I also think as of right now the main advantage to using it is for the snob factor. Truth is, tables with included elements used with CSS, are VERY flexible, and quicker to setup. The advantage to div/css is also flexibility, and organization, but much more of a pain in the ass with complex layouts. I Would also like to point out that working with div/css is much harder with dynamic content as well, but probably worth it for SOME sites. - Burmask, on 10/12/2007, -4/+6"web standards recommend that you avoid using tables for page layout" - Huh? I still use tables and do not need hacks. Who determined tables need to be fazed out?
- detrate, on 10/12/2007, -3/+5Other than the fact that they take longer to load, organizing your layout with tables is considered improper use of the tags.
edit: beat - staan, on 10/12/2007, -1/+2bpapa, if you read the article, you see that they only use JavaScript to work around IE's crappy CSS support. The core of the technique is straight CSS.
- dtdgoomba, on 10/12/2007, -0/+1Yep, once you get to know what each browser's quirks are, you get the hang of it in the initial design and planning stages, before the build. I know for myself, I use that great extension in Firefox for "view in IE tab", so I can keep 2 tabs in FF and look at how my build is coming along in both.
I haven't had any major problems that would keep me from getting the job done, but I have had to rethink the best way to do certain styles. Most of the problems I've had just come from how the browser does padding and margins, and more often, floats. Otherwise, they usually come out identical, or close to. It just really is a lot of practice and planning for those issues - detrate, on 10/12/2007, -1/+2This method uses javascript, which can make your page look worse than ie6 trying to render the acid 2 test if your user visits with javascript disabled.
pure css footer method: http://www.themaninblue.com/experiment/footerStickAlt/ - bpapa, on 10/12/2007, -1/+1Standards are there for a reason. I assume you're referring to my post, so go back and read the other reasons I gave on why tables are a losing proposition. Standards supplement those other reasons (and there are others as well, and further elaboration I could have done, but alas it's a digg comment) - that's why they are there. You're almost making it sound like standards are arbitrarly picked and I'm supporting them because I don't know any better.
- Bauglir, on 10/12/2007, -0/+1I tend to use tables for tabular data (of course) and for form layouts. Apart from that I generally will try to stick to CSS layouts where possible, for flexibility, although I would probably fall back to tabular layout before resorting to hacks. Coding for an intranet has its advantages...
- takeda, on 10/12/2007, -0/+1Unfortunatelly doesn't seem to work with all browsers e.g. Opera :(((
- Kazrog, on 10/12/2007, -1/+2OK jimmygoon - how about have something as simple as a footer without a javascript hack?
And yes, IE does need to mature or just give up in favor of FireFox, but the CSS spec is way behind where it needs to be.
I never said that it isn't POSSIBLE to do any table-based layout using DIVs and CSS, however, it's certainly not PRACTICAL to a lot of the time. - Acrion, on 10/12/2007, -0/+1Be sure to read the warning for "wrapper-free Holy"
http://alistapart.com/d/holygrail/example_4.html
Equal-height columns do not work, however, and this layout will break down for very small window widths. Use it with caution. - Flynnz, on 10/12/2007, -0/+1"It's not CSS needs to be mature; it's the world need a better IE!
IE is a major barrier of using CSS."
agreed...and since most people still use IE, I would say that's one hell of a barrier. - ajhops, on 10/12/2007, -0/+1I'd like to point out one argument that seems to be overlooked in this discussion - that is the difference between designing a web site and an intranet delivered application. When designing a business application with a web based UI, it is completely feasible to require fixed footer elements. It is also very likely that this organization will have standardized on a single browser, most likely the current version of IE for the foreseeable future. I just don't see how a professional developer can make such blanket assertions that there is never a need for old fashioned tables.
- Flynnz, on 10/12/2007, -3/+3very well said.
Though I am sure you will get modded down by the CSS snobs heh. - BTreeHugger, on 10/12/2007, -0/+0Unless I am missing something, that's not really "impossible" to do; check out http://thomas.tanreisoftware.com/?p=66 (no ads/scripts but G.Analytics) and see if that's what you are after? It handles any number of columns, you just have to add/remove the markup and change the width of the column in question. It also makes the columns equal heights, and screws that up only on Opera 7/8 and browsers so old they have trouble with tables anyway (Netscape 4, IE4, etc).
- bpapa, on 10/12/2007, -1/+1Sure, use a table and be done with it! Because people only use web browsers on a PC to view webpages, right?
- Kazrog, on 10/12/2007, -4/+4CSS needs to mature in order to secure adoption. Telling people that tables are not "standard" is hilarious to me. We used them for years, people still use them for layout, and in many ways they are more cross-compatible than CSS-based layouts, particularly the ones that rely on JavaScript hacks.
I want to believe in CSS, but it's simply not where it needs to be yet. It's great having clean code, but I really look at semantic code as a ratio. What's the ratio of layout markup to semantic content? By the time you clutter up your HTML with meaningless "wrapper" divs, and some JavaScript/DOM hacks, are you really any better off than a simple table layout that uses CSS efficiently and avoids non-semantic code wherever possible?
At the end of the day, look at what we're actually talking about. Is TD any more/less descriptive than DIV? Both tags are fairly arbitrary and can be used for almost infinite purposes.
Trying to tell professional designers like myself that we have to obey these arbitrary "standards" is self-defeating. It seems like the proponents of CSS are almost always zealots who want to go on a witch hunt for anyone using tables. Hardly anybody is being honest with themselves and the web community about the simple fact that CSS has some serious limitations and needs to mature.
I'm always going to use the best tool for the job, and CSS/DIV based layouts can't do everything. Until they can, I will be using tables along with my CSS. - BTreeHugger, on 10/12/2007, -0/+0Funny, just recently I decided to come up with a template that combines a properly positioned footer, equal-height columns, and some other things to make a simple-to-use column-based layout that's fluid. It uses my variation of footerStickAlt to properly position the footer, and I've verified that it works on pretty much every browser I can find (Safari, Opera, and multiple versions of each considered). If anyone wants to play around with it, just hit my blog post at http://thomas.tanreisoftware.com/?p=66 (sorry for the self-referral, but worry not; I don't use spam/ads, and only use scripts for Google Analytics). Please note that the script does use CSS hacks pretty liberally to cover as many browsers as possible; some CSS3 hacks included. I plan on maintaining this template since I use it very often.
PS: get over table addictions, please.. they are a sign of laziness, not professionalism. -
Show 51 - 68 of 68 discussions



What is Digg?