» in my experience...

» home | about | contact | résumé
» archives | donate | rss syndication

»
»
I think they grow pineapples.


Communiblog Communiblog expressed as RSS 2.0
Here at IMX
Memes R' Us
freetheaudio2.jpg
SuperNova 1987A from 1994 to 2003
GarageBand

I still use html tables.
[ Posted by Dan on January 06, 2003 | 18 Comments ]

Many bloggers are web developers, and many of them know of the value of separating content from its presentation. They know that tightly integrating your content with its presentation is a bad thing because making changes to the content or to the presentation then become difficult. MVC development environments help us out to a degree, but bloggers being what they are (front end oriented) like to abstract the UI as much as possible by using CSS and DIVs and the other homeopathic html remedies.

   » Don't follow this road blindly.

   » Don't get me wrong.

Fully abstracting your UI from its content takes skill and time. If you don't follow thru, you can negate much of the benefit you seek to create. Now stop and think. Do you even know what the benefit is that you are attempting to create? Will that value be worth the effort? Consider the price to performance ratio of taking time to fully abstract logic from presentation and content from presentation. Can you do adequate work (using html tables) without spending the time to fully abstract the UI (using divs and css)? Can you save the client money and meet their actual needs?

Actual needs. Don't ignore actual needs or forget them in your 'separate content from presentation' hubris. If you can intelligently analyze requirements and make decisions that minimize cost and maximize value, you are doing the right thing. Even if that means using html tables.

For the record: I'm not standards hater. I am a lover of my client's money, or my employer's budget and want to preserve my relationship with it. Sometimes you aren't doing yourself or the money holder any favors by jumping thru hoops, sometimes you are.

I know that doing 'the right thing' (ie, proper UI abstraction) can be easy, but it can be hard. Making mistakes and doing it half assed is really easy to do. Sure, you could go steal someone else's front end code, and make it really easy on yourself. But odds are that you have to develop a web app or web site that is original (imagine that).

My message is: Don't follow blindly, make decisions.

 

Normal Guy

Amen.

Of course, it's quite possible to seperate content from presentation and still use tables -- we do it all the time. I think you're melding two arguments into one, here. There's no difference between using layers and using tables, so far as content seperation goes.

To me, seperating content from presentation is only really worthwhile in three types of sites:
--Sites where content is frequently updated (especially if updated by a "lay" user)
--Sites where the content stays the same but the GUI is either often updated has themes/skins
--Sites that are both of the above.

Of course, there is one other reason... and that's the one I most frequently apply...
--Lazy intelligent developer who would rather do a little more work up front to save excessive repetition of work down the line.

Now, as for using layers instead of tables... I must be a horrible, vile fiend, because I cannot stand doing that crap. To me, layers are really only useful if you want to use DHTML for something, which I only very rarely would do.

How much of that is because I first tried them when they were flaky as hell is debatable.

When I first decided to try doing web stuff for a living, my first website was all layers and DHTML. People try to talk about how much easier layers are to maintain... bull. have a navigation bar done with each button as a layer? want to add another button? you get to move all the layers beneath it down. Do the same thing with a table? Insert a new row in the table.

Maybe I'm a bit of a jerk about it, but I sort of see the ubergeeks at the w3c whining "that's not what we meant, that's not what we meant, don't sully our tables like that" and coming up with a complicated, convoluted 'standard' to 'make them stop.'

But neither am I anti-standards. I love CSS. I use perhaps one font tag per 500 pages, and it is invariably something like [b][font color=red size=7]ERROR: $errormessage[/font][/b]. I've used xslt and xhtml, too, where it was appropriate to do so.

I think some people are just purists that get too damned wrapped up in their sheer love for all things geek and insist that things be done or used even when they make zero business sense.

-Posted by JC on January 6, 2003 12:57 PM

Normal Guy

one suggestion for your redesign -- lose the right alignment on the comments. It's a bit hard to read and ruins any attempt to do false bulleted lists like I attempted above. :-)

-Posted by JC on January 6, 2003 12:59 PM

Normal Guy

Oh... and my pet peeve about using layers instead of tables.

Go to a story on wired.
Try to highlight some text.
Go to a story on CNN
Try to highlight some text.

Which one doesn't give you a headache?

-Posted by JC on January 6, 2003 01:05 PM

Normal Guy

Suggestion taken and implemented here. It was never intended actually. An align=right was being caught (in IE6 only afaict) even when more local styles were coded. Weird.

-Posted by Dan on January 6, 2003 01:59 PM

Normal Guy

OK, I'm going to play the part of purist here for the heck of it:

Ask a designer what the web is all about in one word, and that word will likely be "presentation" or "branding" or "experience". As a clueful programmer or the W3 and you will get "information". This is what the "semantic web" is all about. Give me the information, give me a SUGGESTION on how to present it, and then leave me to do as I will (through the actions of the browser I have chosen and configured). If I'm reading a story, use the meta tag for "next" page. Mozilla will popup a nice little toolbar that will let me navigate , and will even prefetch the page for me. Instead, the designer says that the next button MUST be a yellow arrow that is 156px from the top and 558px from the left. Now the page is slower, and the arrow doesn't even appear in a logical place on my new phone because my browser doesn't support tables wider than 100px.

To reference the previous comment, try going to wired on a sidekick or a pda, its not bad. Try going to CNN, it doesn't really work, you have to go to CNN mobile, which has different headlines and much less content. So I see something on my phone, I go over to my PC to check it out, and its not there, bad experience right? Now, maybe CNN looks/works a little better on a PC and on a specific current phone than wired does, but thats because they had to pay for two sites. How does CNN look on the dozens of other browsers that are specific to a phone manufacturer, or an internet appliance? Who knows, you'll have to check (aka QA). How does wired look? Probably fine, no point in checking because if wired looks bad the browser is messed up.

Also, if CNN decides to change its look it has to redo the whole site, if wired wants to change, they edit a css file.

How about printing? I wish my new site was up so I would have a good first hand link, but how many tens of thousands of dollars did CNN spen integrating separate printable pages into (in a popup for some reason, but thats besides the point). How much did wired spend? Probably not much, just used a different style sheet and said hide the nav bar and remove most of the colors.

I try really hard to keep abreast of not only the how, but the why of emerging technologies and standards, and if there is one thing I've learned is that the distance from here to there is longer looking back than forward. "What's the big deal with not using tables, div tag, table tag, same difference" compared with "Oh my, I am SO glad we didn't use tables on this site".

I'm sorry if those arguments sound tired, but its tough to explain to an anonymous reader why layout tables and its cousins are far worse than an annoyance, and not simply bad because "divs are cooler".

P.S. Yet another recommendation for new IMX design, make the comment box bigger, its kind of annoying at this size for longish comments.

-Posted by Eric on January 6, 2003 02:26 PM

Normal Guy

My pet peeve:

"the value of separating content from it's presentation"

you mean "its presentation". "Its" is the possessive form of the pronoun "it". "It's" is the contraction of "it is".

I know it's not the end of the world, but a lot of people (e.g. on LazyWeb) might have skipped the rest of your article after seeing a common grammatical error in the first sentence.

Otherwise, great stuff!

-Posted by Joe Grossberg on January 6, 2003 02:31 PM

Normal Guy

Eric, you are helping support my case by making a good argument based on the needs of the situation. JC makes the point that "some people are just purists that get too damned wrapped up in their sheer love for all things geek"

These two points are what separate the experienced from the daft. I'm hoping there will be less daftness in the world, thus post 284 was written.

Joe, I'll fix the grammar problem. I don't think that will help/hinder traffic though since a ping to lazyweb will cause increased traffic to these posts (the two pings I've sent there have resulted in about 300% increase of traffic to the individual pages).

Meanwhile, enjoy a chuckle when I tell you that I have a degree in English Literature. :)

-Posted by Dan on January 6, 2003 02:38 PM

Normal Guy

"how many tens of thousands of dollars did CNN spen integrating separate printable pages into (in a popup for some reason, but thats besides the point)."

Hold on there... do you actually believe that? Please.
CNN uses CSS. I use CSS. Many people use CSS without using layers. The two do not have to go together.
How long does it take to do a 'printable' version of a database-driven page in addition to the regular one with graphics? About 5 minutes. And you only have to do it once, one single script. I wish to god someone would pay me tens of thousands of dollars to do something that simple.
You're talking as if CNN hard codes their entire site.

Being database driven is the important issue, not having layers.

As for wired vs cnn... I'd be fairly sure wired simply has a different xsl document for their site that's called when you use avant go. Big deal. CNN could do the same thing, without using layers.

It's very simple. We have an online banking application we're writing. It uses tables. it uses XSLT. When we create the PDA version, that xslt document will probably not use tables. Nor will it use layers, for that matter. Simple enough. We'll do what is necessary, and what allows us to expand as needed.

Like I said in the first place. Seperation of content from presentation is a wholly seperate issue from tables vs layers.

-Posted by JC on January 6, 2003 04:45 PM

Normal Guy

JC, outside of your point on selecting text on a CSS/HTML page (which I agree on), it seems like most of your arguments are stuck in Ye Olde DHTML Days. It does sound, overall, as if you haven't touched CSS and its ilk in some time. Font tags, for instance, aren't CSS; the term "layer" is obsolete; and even the term "DHTML" is a misnomer.

Today's CSS and HTML is a pretty powerful combo. It's moved well beyond the stuff of Dreamweaver 1.0 and 2.0, and into something that is truly worthwhile for more sites than not.

Can you still create a site in tables? Sure. But the problems Eric mentions are quite real. As an added bonus, CSS helps me save an immense amount of time - which, in turn, means a lower cost for my clients.

-Posted by Paul on January 6, 2003 04:48 PM

Normal Guy

And this point still remains...

Going with divs and css as a way to abstract the presentation from the actual content is a point of decision, not a blind path.

-Posted by Dan on January 6, 2003 04:57 PM

Normal Guy

My current site is my first attempt at a HTML/CSS site, and that's only because the MT template started out that way. As I've modified my templates, added files, etc., I've used tables when I "shouldn't" have. Why? Because I tried doing it with divs, and it sucked. I got frustrated, so I did it the easy way.

I would say that 80-90% of my site is all divs (CSS/HTML). I have some parts where colors and such are hard coded, and at some point I'd like to get rid of all that. Not today though, as that would take a bit of time.

-Posted by milbertus on January 6, 2003 07:20 PM

Normal Guy

Re: JC

I think tens of thousands of dollars is a fair estimate. Consider that a designer/programmer is going to cost about $100/hour, will it take less than 200 hours of work to design/code/test printable pages for CNN's massive site? I think so.

As far as the XSL argument, I think you missed my point. XSL is an easier way to template a page, but wired is not making a different page. The whole point here is that they are serving the SAME page to everyone.

As far as it being a point of decision, maybe, but I think those who think tables are a valid option for all but 1% of cases simply have not had the experience of making large sites without them. Most table people do it for the reasons milbertus mentioned, because they couldn't get it to work in divs/css. This is common because its a very different way to write a page, and after a time you will find that almost anything can be done without tables.

To restate a point, the presentation/design of a web page is a RECOMMENDATION. You are not saying "this link must be blue". You are saying "please make this link blue". However, if I, or my browser, don't like blue links, my need of the information supercedes your need of presentation.

P.S. I usually don't argue anything this much, but I think this crowd is a savvy one and will eventually "see the light".

P.P.S Keep in mind that tables are still valid, useful, and appropriate for tabular data. Doing a spreadsheet in divs is as bad as doing layout with tables.

-Posted by Eric on January 7, 2003 01:10 PM

Normal Guy

One thing not yet mentioned is accessibility. I am a blind web developer, and separating content from presentation is essential if one is to present a page in a completely different modality (speech, for example). I don't care if links are blue or purple, or whether a bullet is a red ball or blue triangle. All I care about is the information being conveyed.
I use a program called a screen reader. One of the things it can do is scan for the next tag with the press of a key (I don't use a pointing device). Consider a site like CNN, where each page contains hundreds of links. Consider having that page presented to you as one long string of "pieces". This is how it is when listening to a webpage; speech is a linear, one dimensional medium. So, how do I find the content on a CNN page; its "burried" somewhere in the HTML stream, after all the nav links (maybe 50 or 60 of them). Do I have to listen or somehow scan through all these links to find the text of the article I want to read? If CNN would think to put some sort of tag ( for instance) just before the text of the article, and mark up, say, the title of the article with it, then one key press would move me to the text I want. If you don't like the default appearance of tags, change it with a style sheet.

This is just a simple way that separation of content and presentation can benefit blind users. There are many more.

-Posted by Rich on January 8, 2003 01:51 AM

Normal Guy

hello dear sir,
I want to learn TABLE Tag in Html, I mean I want Creat a webpage Layout based on Table... You know Yahoo homepage tables... can you help me to explain details of yahoo tables? or introduce me some advanced table layout...to some extend like your own webpage?
thank you very much.

-Posted by mojtaba kamalian on February 8, 2003 11:18 AM

Normal Guy

Responding,
Use the IFRAME tag instead of tables all current browsers support them and they are much better than a table could ever be for a design layout of a good looking webpage.

-Posted by Jimdo on February 27, 2003 12:51 PM

abc

-Posted by on June 30, 2003 06:26 AM

abc

-Posted by on June 30, 2003 06:26 AM

OK, i have a question.

My clietn has just asked that a major UK site be redeveloped using & Css instead of the current table-based layout. I've always coded using tables.

Can anyone point me at a good online resource (a using for layout primer would be ideal) for this stuff?

Also, anyone got any experience of using layouts with ATG CMS? abything I shouldbe looking out for?

thanks guys - v. interesting read...

-Posted by rui teimao on July 10, 2003 07:36 AM




Comment posting has been turned off because I don't have enough time and will to deal with the constant comment spamming. I'm very sorry and will fix this sometime soon (soon = before 2004 ends).

MovableType AmphetaDesk
NetNewsWire BlogTree Subscribe with Bloglines RSS Feed
Copyright © 2001 - 2003 by Daniel Kapusta