What’s so bad about tables?

@charleskrause

There is no reason why a tabled design couldn’t be separated from content just as well as CSS design.

As for stats…

Typical youth and techoriented site:

MS Internet Explorer 74.7 %
Firefox 11.5 %
Safari 9.9 %
Opera 2.1 %
Unknown 1.3 %
Mozilla 0.1 %
Konqueror 0.0 %

Typical non-tech oriented site:

MS Internet Explorer 87.8 %
Netscape 7.5 %
Safari 1.5 %
Firefox 1.4 %
Mozilla 0.8 %
Opera 0.5 %

Whether or not people use Firefox depends much on their social/technical background. Students on a college are way more likely to use FF, than 40 or 50 y/o non-tech surfers.

lhk – OK, you refuse to provide links to any one of your assertions. I don’t understand why frankly.

I tend to negate your ‘fact’ about filesizes when comparing table based design versus css designs because my experience is exactly opposite of what you state. I’ve cleaned up plenty of table based designs and have reduced file sizes in *every* case.

I personally know two people who use pda type devices (one is a pda, one is a cell phone) to surf the net. I happen to live in a small town on the Canadian prairies, it’s not just a big city thing. When I ask them why they do this, they don’t have a particularly good answer except to say they want to. There are some sites (that happen to be pda friendly) that they like to frequently check in on. They also frequently check their email with their pda device.

I also know someone who uses a screen reader program to read sites he browses. I don’t know too much about the software, except that when navigation links are on the top of the page, it’s apparently quite a drag to listen to the navigation first every single time he goes to a page. Because of this, I use put my links at the bottom of the html, and use css to display them at the top. I’m not about to sacrifice people like this for the sake of some behind the times majority. I don’t decide who I design sites for. They visitors make that determination.

I’m about done with this topic. I haven’t been provided with links to the assertions made. I fall back to my own experiences with css versus tables. My personal observations are that css based sites use less code, load faster/render faster, and can do things table based layout cannot.

Nice chatting with you all!

lhk: I have numerous clients who surf and shop on their phones, as well as play games like Oblivion (I’m personally amazed they can afford to do this, but it’s definitely an “each to her own” choice as to use of money, y’know). It may be entirely dependant on age specs and lifestyle demographics, as well as what part of the country.

I also have a couple of blind clients who use screen readers.

It’s all down to forward thinking and personal options, I believe. Simply a case of “you go your road and I’ll go mine”. No need for anyone to get upset, most of us who replied were responding only to the original question.

Hi manstraw,

as I explained, I don’t hand out links to client sites, ever. That’s a policy which at times has gained me considerable on my bank account, and it’s a question of integrity. After that client decided on the WP install I killed the WSB one anyway, that was more than half a year ago.

As to sizes:

I suggested you (or anyone else here) come up with a CSS file and the relevant template which together are less than 600-700 bytes (bytes NOT kilobytes), as roughly 600 bytes is what the whole template in tabled html is.

If – as you say – CSS is always leaner than html, well then it shouldn’t be a problem for you to write that CSS+html. Do it and prove me wrong, as you say I am wrong.

I’ll reiterate:

5 columns, 2 headers (one spanning all, one spanning 3 columns), fine lines around every cell and the table, a footer, a gap between top and the browser edge and bottom and the browser edge. A different color to each column. NO background graphics or other images to achieve that effect. And all of this under 700 bytes including the html, and of course backwards compatible and cross-browser-fast. Oh, and no serverside programming of course.

You say you can do that, try it. I say it’s not possible, as you will end up at the very least in the 8-10 kb range, my guesstimate is that you’ll end up with way more.

And there’s absolutely no need for any links in this little test which shows perfectly what I am talking about.

Well, maybe Canadians have cheaper access to cell phone networks, here you averagely pay 2-3 dollars for 10 minutes online. No one I know here has the dough to do this, unless he can’t do it differently.

You again failed to tell me just how much you calculate a commercial site is making out of such users.

As to nav below content, without CSS enabled it’s at least as cumbersome to constantly scroll up and down as listening to the nav cited again and again. And I doubt there are even as many people engaging a screenreader as there are people surfing with an old browser or one which has CSS disabled.

‘There is no reason why a tabled design couldn’t be separated from content just as well as CSS design.’

Go ahead. Try it. What do you have to do? You have to strip the tags back out of the code to do it. You have to add another, fairly resources intensive step. Try doing that with a massivly popular site like Amazon, or Ebay, and you WILL need to invest in more processing hardware, as opposed to coding the pages with divorced logical description and layout, and offload the formatting on the end-user. No investment required. A little smart application by the WEB DESIGNER, and no expensive HARDWARE upgrades needed.

From your comments, I’m guessing you just don’t understand the resons behind the technology. The technology did not pop unto being because some “geeks” decided it would be “cool” to do. The technology exists for a reason, to perform a needed function, and to enable developments in needed direction.

I’m sorry you feel that there is no need for you to support “non-traditional” devices, because I think that if you are a web-designer as you claim, you’ll shortly be out competed and by those who do.

It seems to me that you are mistaking your personal experience with clients and consumers for the totality of web use out there.

As for CSS emulating tables – again, you don’t understand. CSS isn’t about making DIFFERNT layouts – layouts are dictated by functionality, and there are only so many ways you can arrange a page. CSS is about making the layouts that exist more flexible, efficient, and about splitting logical structure and formatting.

It really doesn’t matter if only 10% of people use “non-traditional devices” – or even 1%. If you don’t think those are signigicant changes in “market share” with several hudred million users, your business is not long for this world.

As for the “it is too expensive to surf with a PDA or phone so I don’t have to support it” argument – how long have you been working with information technologies? Havn’t you been paying attention to the “cost of access” curves? Hell – 10 years ago cell phones were extraordinarily expenisive just for voice. Now, if I shop carefully, I can get unlimited voice trafffic, data, and long distance. Don’t make the mistake of assuming what exists right now will always be the case. You have to project the trends – and connection costs are a pretty steady curve over time spans of decades.

The companies that plan for those changes will basically shut out the ones that notice the trend to late and try to “catch up”.

You seem to be out here trying to “convince” people that the “old ways are best” and this “new fangled” stuff is just a pain-in-the-ass we could all do withought. You may be right – but I suspect that darwinistic market forces will prove you wrong – and business-wise at least, you’ll have to adapt or die.

Good luck.

Another point.

Yes – a single page can be coded with tables in less file size than it takes to do a <div> structure with CSS. Even though the HTML code is significantly smaller, the CSS more than makes up for the size reduction.

A large website is different. The CSS is shared over multiple pages. The savings in size are on a page by page basis.

E.g.

Case 1:

Web page (table) = 40K (big page)
Web page (div) = 25k (still big page)
CSS = 30k

Net gain with CSS = -5k

Case 2

Web site (tables) = 40K/page x 50 pages = 2Mb
Web site (div) = 25k x 50 pages = 1.25mb
CSS = 30k

In case 2, the savings are 720k

Unless you have really small sites, CSS will win

Another point

Do a large website – 50 pages. Code it in tables, hard code the formatting into the HTML

Now have your client change the color scheme and layout.

Now you edit 50 pages.

Do it with CSS

Now have your client change the color scheme and layout.

You edit one file.

As to technology: we have email, cell phone and video-conferencing today, but I haven’t noticed that telegraphs and normal phones have ceased to exist. Just like cash hasn’t disappeared simply because some people use credit cards.

I find this discussion interesting to read and have no real stake in it, however I did want to comment on this little tidbit.

I haven’t had a landline phone for 4 years now. I dumped my landline back then when I noticed that I hadn’t used it in over a year. I use my cell for everything.

While I still use cash for small/quick transactions, my credit card gets a heck of a lot more use.

And when was the last time you used the telegraph, really? ??

While it’s true that all these things have not actualy ceased to exist, they do get phased out of the majority of usage. This is perfectly normal.

Sure, for setting up a quick and dirty page layout, I use tables. I use them mainly when I’m doing rapid prototypes, to demonstrate some layout or effect or when I’m making something to be printed quickly. Doing tables is easier with some tools.

But for any sort of long term usage, or anything that other people are actually going to see, I use CSS for a few reasons. One of those is that CSS provides a much finer grained layout control. Another is that it’s *way* more search engine friendly. Yet another is that it’s alternative browser friendly (text-to-speech browsers, mobile, etc) when you do it correctly. There’s a lot of good reasons to use CSS instead of a tabular layout scheme.

manstraw –

Let me preface this by saying that I’m a CSS person, and would never choose to design with tables. But I’m forced to work with tables as part of a site that I regularly maintain, and have yet to figure out how to replicate it exactly in CSS.

Here’s a representative link for you: https://mlik.org/sample.html

Try resizing your browser and watch how the columns stretch.
How would you replicate this exact effect in CSS?

The criteria is that we have three columns, all of which stretch vertically according to the content of the center column. The catch is that each band of color in the border colummns must stretch to remain 20% of the total vertical height of center column.

3 column layouts are a dime a dozen. I’ve used this demo in the past: https://builder.com.com/5100-6371_14-5268973.html

But this effect is weirdly specific – easy to do with a table, but I’ve been racking my brain on how to do it in CSS without using javascript to determine the height of the center column.

If you like, I’ll code something up later. I’ve just popped in on my lunch. I had not intended to participate in this thread any longer, but I’ll treat your request as separate from that.

There is more than one way to approach this particular request. I’ll be happy to code an example that conforms to the css standard. One issue that I’m not inclined to address is the goofy box model of IE6. I stated previously that I use a javascript program to rewrite the dom, and that’s about as far as I’m willing to go to accomodate ie6 these days.

Hi Manstraw –
I appreciate the offer, but there’s no need to work up the code for me. In fact, I could use the practice of doing it myself – all I need is a push in the right direction. What would you suggest?

Using ie7.sf.net to correct for IE’s issues is fine, but I would prefer it work in Firefox and Safari without javascript.

Cheers,
Dalton

Just a complement to everybody posting in this thread. Talking about tables vs. CSS without ending up in a big old flamewar… I’m impressed, kuddos to all mature people here.

This thread deals with one of those topics I usually avoid like it’s the plague, because in my experience allways ends up in a big nasty mess.

??

Personally I prefer CSS, but it can be a pain to get it right accross browsers sometimes.

dalton, I was just looking at (um, bad dog me, I should be working …shhh) the code for that page, and I see you have a blank table above the written content. Is that extra table there for a reason? I’m wondering what you’re really after here. If it’s to decorate the paragraphs, I might do it one way. If it’s to have a decoration down the side of the page, independent of the paragraphs, I might do it another.

Also, it might be a shortcoming of mine, but I find it difficult to explain a concept without showing actual code.

edit: I just reread your explanation, and I think I understand what you want a little better.

Yeah, the decorative bars down the side are completely separate from the paragraphs, it just came out that there are 5 of each. It just needs to work out that the 5 color sections in the border are each 20% of the content section height.

I’ve spent weeks on this, searched and posted on other message boards. Sorry about the thread hijack, but I really was starting to think that replicating this design with CSS was impossible!