HTML Dillema

Do a search in these forums, lots of old threads about this and similar topics.

but for the record, tables and frames are both "proper use of html" and aren't outdated, both are still valid in the latest version of XHTML

neither are outdated per say, but tables were most definitely not meant to make whole design layouts, and the way that frames are don't work in all browsers and get messed up in search engine crawlers

Dont use frames, I hate them:) I used tables for layout on my old site but what happens is nothing loads until everything in the tables does, so it will slow do your load time

So what do you use in place of tables? I use tables for every website.

You would have to use CSS for the positioning of everything. I'm not going to stop using tables for layouts!

Until using CSS positioning is a little bit easier I'll still be using tables. I don't want to spend my life fixing X because it works in browser M, but not browser (I)E...

I rarely use tables for design, but hey, sometimes you need to.

Using CSS to control the page has huge advantages over using tables, but it requires a much different type of thought on the matter of markup and a different skill. Tables used to be very difficult to get right!

Regardless, this is a discussion that belongs elsewhere, I'll be moving this baby up to with the other threads on the same topic in Webmaster's Corner.

Oh! And: csszengarden.com -- anything in possible with CSS. Embrace the future. It's already here.

I think I need a good book on CSS and table-less designs. Everytime I try, something goes horribly wrong in some browser. I find making liquid designs the hardest. Well, making a 3 column % is fine, just when I want the outer columns to be a set value -- I run into problems.

sitepoint.com/books has a great one
also, follow any/all the links at webstandards.org in their reference section.

I haven't used tables for layout for years now, I prefer using DIVs and CSS for that. Personally, I find that tables for layout are much too complicated because all the problems get compounded.

Although I guess, if I absolutely had to use tables to layout my page then I would.

I was considering buying the HTML Utopia, but I thought I saw some negative comments about it and it put me off. And no I have no money in my PayPal, so I guess it's off for another little while

I use mostly these tags in design: div, span, h1-6, p, and of course in the header link to get to a css sheet.

Yes, you use css to move stuff chroder, but it can be absolute, static, or you can have it be by a percentage.

As far as books, or references, I would check out http://www.w3schools.com/

How many of you that say you don't use tables have a database driven site, not talking basic site, something with a (indexed, searchable) blog and/or forum and/or message board and/or store ?

I'd love to see a site like this one, or msn, or yahoo, or even google done without tables.

would be a programers nightmare. remember tables are only meant to be for data display, ie bar graphs etc, not any of the above.

Huh? IPB is using a table-less design.

Look deep into the source.. (i.e. line 50)

Using tables for designs and tables for data (ie. tabular data) are different things. Charts (for example, forum listings) are examples of tabular data.

http://www.iht.com for tableless design inspiration.

The table debate goes something like "tables should only be used as they were designed, for tabular data" which the die hard anti-table people believe forums, message boards etc are NOT tabular data. (then what is?)

Suzanne, you seen iht.com in firebird? eek (text hard on right column 2 words wide) they also use tables and pmachine.com uses tables as well to hold the layout together

I for one belive tables will never (can never) be phased out and I'll continue using them for layouts
**cause I'm a rebel muhahahah **

I think layout tables can and will be phased out. We're at the phase where people are just picking up on the concept... Wait until CSS3 is recommended (and browsers pick it up).

iht.com looks fine in FB, other then some text overlapping an image.

http://www.zerocattle.com/examples/images/iht_inner.jpg
http://www.zerocattle.com/examples/images/iht_firefox.jpg

Looks good to me, too.

I do believe it can be done, 100% layouts (didnt check out csszengarden)
but time wise and stress wise would it be faster/easier than tables? I doubt it, especially when it's not 100% browser compatiable yet.

Thats weird, iht.com looks ok in firebird today, a little slow to load and the movable banner gets cut off over sections, and it seems to have a reverse scrolling section top right as you move down - weird (would be the dhtml not css causing that) but is a nice layout.
Just noticed the capture you gave Suzanne (firefox one) is slightly different than what I see today in firebird, the right column is missing (is black strip on your view) and the text doesn't overlap the top image, sits hard against it.

OMG just noticed NZ isn't on their map - we floated away?

As much as I enjoy tormenting you, Busy, lol, I have to say that it really isn't harder. In a lot of ways it's easier, especially when it comes to editing. There are SO MANY templates available now you don't really even have to know what you're doing to use pure CSS layouts.

Do take a look at CSS Zen Garden, it'll rock your socks, baby.

Also, Firefox is the newest version, firebird has been discontinued. I'm pretty sure that some of the display issues you found have been fixed in this new version.

I am no die-hard fan of don't-use-tables-for-design but I do believe that most (if not all) designs can be done without using tables. As for the phasing out of tables, if designers actually embrace the idea and they teach it at schools and tertiary institutes then yeah, possibly.

Where I am at now, one of the requirements in one of our upcoming projects is that we use tables for layout (arrghh! have to relearn how to do that).

I kinda missed the nail last post, was meant to be database driven layouts must be harder using CSS than tabled
**must of got excited that I was bringing so much joy to you Suzanne hehe **

Yeah I know firebird is old hat, but downloading anything bigger than a meg on dialup is a chore, one day I'll get there.
Sucks in a way, I have introduced Opera and Mozilla (firebird) to a lot of non pc people that wouldn't know the difference between an update and the off button (you mean I have to close it down before I turn it off).
So now we have 3 buggy browsers in the top three, IE 5.5, Firebird and Opera 5 ? (release before last)
so really using CSS layouts etc we need 3 versions of it, old, buggy and just right

My blog is tableless.

At the moment, I'm using an interim solution. I've found that using tables for structure, but CSS for everything else is turning out to be quite effective. It means my tables are very basic (ie no attributes apart from widths).

I know its a bad way of doing things, but I'm just not comfortable with css just yet. It's just far too time consuming getting tableless designs working properly across different browsers, when using tables I can make it work perfectly first time.

Busy, Andy -- you can set CSS to degrade gracefully. There are many interim "hacks" that are useful specifically because they are in the CSS file and can be removed when they are no longer necessary without going back into the content or HTML/XHTML markup at all. You don't need to figure out layouts, either -- there are many sample layouts available on the web for your use.

You're running out of excuses!

Database driven sites predominantly use templates, however, and templates do not care what you use to create them. There is absolutely no reason whatsoever why a database driven site would be MORE difficult using CSS, and a number of reasons (speed, control, contextual changes) why it would be easier.

There's too many incompatabilties between browsers that need all these tweaks to fix, thats the biggest reason I don't stop using tables. A couple major browser releases in the future, I'll more then likely switch it up. I don't want to spend 28KB per page load (an over-example, read about an "all in one IE fix" that was 28k) fixing up my pages.

so this in tables is more work than CSS?

' Just a very basic sample.
I never tested the code, just typed it out but it should display the same on all browsers and can be placed anywhere on the page giving the same result.

Looping through data doesn't make either harder or easier. The same could be done with CSS as you've done with tables, with just a change of the HTML.

Though I would point out that the data in that examples appears to be primarily *tabular* data!

I'll also point out that for someone else to edit the look and feel of that, they need to get into the programming, which isn't particularly good practice.

remind me never to play any board games with you Suzanne

Definitely table design to format the page and to add columns and so forth.

Ha, Busy, I just realized I could compress it further by using class="section $bgcolor" and dropping the $bgcolor from the other divs.

2-3 columns are easily done in CSS. More than 3 columns qualifies as tabular data.

I don't think thats an absolute rule, more like a "general trend"

I found this thread that explained it pretty well: http://www.webmasterworld.com/forum83/2515.htm

for my example make the overall table 100% and columns 25, 50 and 25% and the data being pulled being actual content, one side navigation, middle content and other side adverts, poll, calendar or whatever.
Does your 3 column rule still apply?

I doubt anyone would create a sites layout like this (just trying to keep example simple) but **puts on best poker face** I think I found a hole in your theory

CSS has alignment problems in nested tables, so if say you added **must think of something that isnt tabular** and used CSS you got problems in buggy browsers.

I don't quite follow what you're saying, Busy. I don't see why 3-column layouts have to be problematic either.

What's wrong with CSS and nested tables?

It's mostly IE that does it, if you have a div in a nested table (might even be with colspan) the CSS div gets confused and wraps on itself (two lines instead of one) even if enough space in the td cell,

Example I was trying to give is like this forum, and add two more columns of info drawn from db, imagine the site done in pure CSS, would be a lot less work with tables than in pure CSS to make it compatiable across the board.

Don't get me wrong peoples, I have nothing against CSS and do use it, just think some times tables out weigh CSS, and as the age old saying goes "just because you can ..." classic example is frames, frames would make our work so much easier but since they have been abused so much frames are now tarbu and plus they don't help search engine or bookmarking among other areas easier.

Hold on tiger, you're saying that when the type of content is highly variable tables are better? !?! I have some indelible memories of table layouts falling to pieces when over-sized or wrongly marked up content made its way in there.

There is absolutely no difference in display when you use tables as when you use CSS for layout if you're running from a template, if your content is marked up properly, and assuming that your content fits the parameters of the template (if it doesn't you will see changes and problems in BOTH types of layouts, but they will be different changes and problems), of course.

3 columns has traditionally been a bit of a bugaboo. Not only are they a royal pain for users (noise, predominantly, and mashed content while they shove more ads in your face), they have the biggest display issues. However, they have been (as Abhi noted) mostly ironed out.

And yes, of course, there are exceptions to the multiple columns being tabular data, but in almost all real world online situations, that holds true. The web isn't a newspaper and using columns for article text can be a nightmare for someone trying to read it. I hope that CSS3 has the columns only available for print, frankly.