Page 1 of 4

CSS/DIVvsTABLEs (Why Divs when tables work, in all browsers)

Posted: Sun Sep 09, 2007 3:10 pm
by swiftouch
A while back I started a thread about the merits of CSS vs. TABULAR layout. It was a great discussion and I was learning tons...before it got locked down because of abuse by some idiots.

Here's the link to the original thread: Why Divs when tables work, in all browsers

So I'm starting it again with my original rant:
What's all the fuss about using divs and how divs are so much better because css is the "wave" of the future, part of the 2.0 world of the web?????

I don't get it. I can spend literally HOURS more pushing pixels around in the individual browsers when using css/div's; causing me severe headaches. Why, why, WHY would you people out there who are div/css fanatics suggest that divs/css is better when we all know that IE has to be hacked?

Please. I really want to hear some intelligent conversation on this because I am sick of our designers designing table-less websites that don't work in every browser making me sit here for hours pixel-pushing until I'm ready to break my laptop in a dozen little pieces out of frustration. (They don't do the testing they should)

I can fix a problem in a tables about 20x's faster than I can using css/divs. The unpredictability is what makes css/div's lame. You can say it's a microsoft issue, but what you're dealing with is a "new technology" that HASN'T come into it's own yet.

I like to call css "certifiably sucky syntax" for good reason. Where data and layout is concerned, we use the term "tabular data" when we're supposed to use a table. But wo unto the user that uses a table for layout purposes. Before you get all heated about the merits of designing for screen readers, etc, let's talk about how difficult and how much of a hack it is just to get a 3 column layout on a page is. I've spent the better part of my morning reading about all sorts of ways of hacking it, when what all we need for centering in the table world is align="center". In the css world, you have to say "margin: 0px auto;" and then create a separate div just for microsoft and have "text-align: center"; for content just to line up. People "margin: 0px auto" is not straight forward. It's a hack. Just to center content in a div, you have to hack!!!! Unbelievable!!!

With tables it's straight forward. You have columns that are controllable, containable, and listen to your every markup. In css this isn't accomplished without about a half dozen hacks, or more when you consider IE's box object model issues.

In my opinion, the largest problem with a div is it's default behavior to span the entire screen, instead of, like a table, wrap around the content.

It's not even straight forward how to even come up with multi-column layouts(> 2). Why is this so? I haven't a clue. What we need is CSS to be redesigned, from the ground up, to include layout's like a table but readable by every form of technology out there.

All layout is a form of tabularizing(is that word) data/images/etc, so what is the big deal with css being touted as the only "right" way to do it? If you ask me, what we have here is a standards problem. Whatever the standard, give it to me straight and make it easy to understand. None of the object model hack crap and endless work-around garbage.

In the end, what I do is use a combination of both because css has a lot of cool positioning features that tables don't. The best of which was getting rid of the 1 pixel gif in favor of actual positioning syntax. So, from now on, (and in order to make some money for my company...and it's all about the $$$) I stick to the tables for multi-column layouts, and use as much css as possible for the other content. There's no sense in wasting time and money waiting for the world to come around to straight-forward, easy to understand, quick to implement, syntax. ...because that would be too easy.

I'm so still old school on this one. Give me tables or give me death!

Thanks for listening to me rant.

Posted: Sun Sep 09, 2007 9:34 pm
by s.dot
You're more used to developing tables instead of divs. Give a layout a try with some divs and then get better at it. You'll see the advantages.

Posted: Sun Sep 09, 2007 10:15 pm
by The Phoenix
The other thread touched on many reasons that answered you very well. From accessibility, experience, understanding, code clarity, maintenance, usability, to simple best practice, many many answers were offered, and you didn't really offer any counter-arguments. Most of your comments just related to your unique development environment that in many ways were contributing to the decision.

In a nutshell, I'd say your post this time is just you reiterating that you like tables for layout despite hearing lots of reasons to the contrary. Thats your choice, and plenty of people make the same choice every day. That doesn't make it a good choice, or one that should be mimicked by others.

Read back through the other thread, and I think you will have more than enough answers to justify rethinking your choice.

Posted: Sun Sep 09, 2007 10:26 pm
by JAB Creations
No matter how great they can improve cars and trucks you just can't make up for an ignorant or stupid driver.

I've been working with (X)HTML and CSS since 1998 and I'm still learning new stuff myself. Tableless layouts have numerous advantages over table layouts. For one if you're letting your users manipulate the site's CSS (say for their profile) you won't totally irritate your site's more capable members *cough* myspace *cough*.

(X)HTML elements are (when used for what they are intended for) the nouns on your page. Just like a newspaper, headers, images, and paragraphs are the items on your page. Valid examples of tables would be for TV lists and sport scores though I don't think classifieds have consistent enough example of information (this is open to debate but I don't feel like debating haha).

Anyway since CSS 1 we've had everything we need for basic site layouts and frankly working on adapting to a true liquid layout for my site over just the past few days I'm finding out you can do some pretty nifty stuff in IE 4 and Opera 3.62 with tableless layouts that just look like crap in the same browsers with tables. But since the majority of sites are designed by folks who either don't care to do it the correct way, don't have the time, aren't required by their bosses, or just have no clue most sites just don't work nicely in older browsers when they can.

Also I've read (and not sure how to confirm) that spiders prefer more content then syntax and with tables you have to use a lot of syntax. I could go on and on about other benefits but it's not up to me if you decide to use the languages as intended or as the abused default.

Posted: Sun Sep 09, 2007 10:32 pm
by JAB Creations
Open this in Opera 3, IE 4, or any CSS1 capable browser.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Tabless Example</title>
<style type="text/css">
* {
 border: 0px;
 margin: 0px;
 padding: 0px;
}
a:link {
 color: #069;
 text-decoration: none;
}
a:visited {
 color: #069;
 text-decoration: none;
}
a:hover, a:focus {
 background: #069;
 color: #fff;
 text-decoration: underline;
}
a:active {
}
body, html {
 background: #ddd;
 color: #000;
 margin: 0px;
 padding: 0px;
}

#content {
 float: left;
 margin: 20px 0px 0px 4%;
 padding: 0px 1px 0px 1px;
 width: 66%;
}

#content div.main {
 -moz-border-radius: 0px 0px 8px 8px;
 border: #bbb solid;
 border-width: 1px 1px 4px 1px;
}


#content div.day div.item {
 -moz-border-radius: 1px 1px 1px 1px;
 -moz-column-count: 2;
 background: #ccc;
 padding: 4px 0px 4px 0px;
}
#content div.day div.comments {
 background: #ccc;
 height: 256px;
 margin: 0px 1px 0px 1px;
 padding: 4px 0px 12px 0px;
 overflow: auto;
}
#content div.day div.comments div {
 -moz-border-radius: 0px 0px 4px 4px;
 background: #ddd;
 border: #444 solid;
 border-width: 0px 1px 1px 1px;
 padding: 2px 12px 12px 12px;
 margin: 0px 2px 12px 2px;
 max-height: 192px;
 overflow: auto;
}
#side {
 float: left;
 margin: 20px 0% 0px 4%;
 width: 22%;
}
#side #catagories a {
 background: #bbb;
 display: block;
 font-size: 18px;
 padding: 0px 2px 0px 2px;
}
#side #catagories a:hover, #side #catagories a:focus  {
 -moz-border-radius: 1px;
 background: #069;
}
#side div {
 -moz-border-radius: 1px;
 background: #ccc;
 margin: 0px 0px 8px 0px;
}
#side div div {
 margin: 0px;
}
br.clear {
 clear: both;
}
div.hidden {
 display: none;
}
form {
 color: #069;
 margin: 0px;
}
form fieldset {
 -moz-border-radius: 1px;
 border: #666 dashed 1px;
 padding: 1px;
}
form fieldset:hover {
 border: #444 solid 1px;
}

form fieldset.liquid {
 padding: 2px 2px 2px 8px;
}
form fieldset #username, form fieldset #password {
 -moz-border-radius: 1px;
 display: block;
 float: right;
 font-size: 16px;
 height: 20px;
 margin: 0px 0px 2px 2px;
 width: 50%;
}
form fieldset label[for^=username], form fieldset label[for^=password] {
 -moz-border-radius: 1px;
 border: #666 dotted 1px;
 display: block;
 float: left;
 height: 20px;
 margin: 0px 0px 2px -6px;
 width: 50%;
}
form fieldset input {
 background: #ddd;
 border: #666 dotted 1px;
}
form fieldset input:hover, form fieldset input:focus {
 background: #eee;
 border: #000 solid 1px;
}
form fieldset input.button {
 clear: both;
 color: #069;
 cursor: pointer;
 margin: 2px 5% 2px 5%;
 width: 90%;
}
form fieldset label {
 border: #666 dotted 1px;
 display: block;
}
form fieldset label:hover {
 background: #aaa;
 border: #000 solid 1px;
 cursor: pointer;
}
form fieldset label input[type^=radio] {
 vertical-align: middle;
}
h1 {
 -moz-border-radius: 0px 0px 32px 32px;
 background: #069;
 color: #ddd;
 font-size: 32px;
 margin: 0px 4% 0px 4%;
 padding-left: 12px;
}
h2 {
 -moz-border-radius: 10px 10px 0px 0px;
 background: #aaa;
 font-size: 24px;
 height: 24px;
 margin: 10px 0px 0px 0px;
 padding-left: 12px;
}
h3 {
 -moz-border-radius: 1px;
 background: #bbb;
 font-size: 18px;
 margin: 0px;
 padding-left: 12px;
}
h4 {
 -moz-border-radius: 1px;
 background: #bbb;
 cursor: s-resize;
 margin: 0px;
 padding: 4px 0px 0px 0px;
}
h5 {
 -moz-border-radius: 4px 4px 0px 0px;
 border: #444 solid;
 border-width: 1px 1px 0px 1px;
 margin: 0px 2px 0px 2px;
}
p {
 font-size: 17px;
 margin: 0px 16px 0px 16px;
 padding: 4px 0px 4px 0px;
 text-align: justify;
 text-indent: 1.5em;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#content {
 margin: 20px 0px 0px 2%;
}
</style>
<![endif]-->
</head>

<body>

<h1><span>Tableless Example</span></h1>
<div id="content">
<div class="day" id="date-08-19-2007">
<h2>#date-08-19-2007</h2>

<div class="main">
<h3>Item</h3>
<div class="item">
 <p>Today <a href="http://www.amd.com/">AMD</a> introduced it's first eight core CPU code named IntelSuxorz.
   Some guy named Bob said he'd buy them if he had the money.
   Intel representatives laughed show casing their nine-core CPU which they say will debute after they fix some issues with fire.</p>

 <p>The K8 is a major revision of the K7 architecture, with the most notable features being the addition of a 64-bit extension to the x86 instruction set (officially called AMD64), the incorporation of an on-chip memory controller, and the implementation of an extremely high performance point-to-point interconnect called HyperTransport, as part of the Direct Connect Architecture.
   The technology was initially launched as the Opteron server-oriented processor.
   Shortly thereafter it was incorporated into a product for desktop PCs, branded Athlon 64.</p>

</div><!-- /.item -->
</div><!-- /.main -->
</div><!-- /.day -->

<br class="clear" />
</div><!-- /#CONTENT -->
<div id="side">
<h2>header</h2>
<div>
<div><a href="#">item</a></div>
<div><a href="#">item</a></div>
<div><a href="#">item</a></div>
<div><a href="#">item</a></div>
<div><a href="#">item</a></div>
<div><a href="#">item</a></div>
</div>
</div><!-- /#SIDE -->

</body>
</html>

Posted: Mon Sep 10, 2007 2:07 am
by matthijs
The only pro-table argument you seem to bring forward is that tables are easier for you to work with. I can understand that for your currently running projects, with tight deadlines etc, that's a good reason for you to stick to them. But for the long term ... ? Let me assure you that once you master CSS getting a 3-col layout working is not difficult. Hacks are not needed.

You have also read all the valid pro-css arguments and reasons why you should drop table-based layouts. Instead of repeating them all, let me just ask: which one(s) don't you understand? Or are there some you don't agree with? And if yes, why?

Posted: Mon Sep 10, 2007 3:07 am
by Kieran Huggins
It really depends on the content. If you're making some sort of art piece or something where only the form of it is important, then by all means use tables for layout. Better yet, why not use a series of coloured select boxes? Or a collection of sassy radio buttons? It could be like a giant virtual light bright installation. Seriously, that could be cool.

If you're styling content (like text, navigation, etc...) it's presumptuous to think that only current browsers will be parsing it. So are spiders, screen readers, print spoolers, cell phones, future browsers, uninvented platforms of the future... etc. The reason you don't want to use tables for layout is because they only make the content properly styled visually, and only in a shrinking subset of circumstances. The markup should reflect the structure of the information. CSS was invented (at least partially) as a styling layer to improve the visual aspects of that information. Javascript should be used to enhance the usability of the page.

Come to think of it, all these arguments have been made (only more coherently) numerous times on (and off) the web. If you really want to know, check out http://www.zeldman.com/dwws/

Posted: Mon Sep 10, 2007 7:45 am
by superdezign
Hehe. "Idiots." :P
Of course we are.

Why did you repost this thread though? Was the first one not convincing enough? I don't think there were many solid arguments in favor of tables, so what is it that is keeping you from at least trying to make the switch?

And by the way, the whole pushing pixels thing has to stop. Web design doesn't have to be pixel perfect and, in fact, shouldn't be. There's more than one way to make a website, and making it resizable and flexible should be something that you aim for. Different users can have drastically different screen resolutions.

Posted: Mon Sep 10, 2007 9:02 am
by Jenk
Someone blogged that if Microsoft used CSS layouts over table layouts on their home page, they would save $2m per year just from the reduced number of characters (and thus bytes) being sent with each page request.

I'll try to find a link.

EDIT: 329TeraBytes per year. Not sure where I got $2m from, that may have been someone commenting that the average price for that kind of bandwidth would be that much. http://www.stopdesign.com/articles/throwing_tables/. Very slow site for me. The jist is: The old (2004) microsoft.com site was 40KB when table burdened. A CSS layout which was identical was only 15KB.

Re: CSS/DIVvsTABLEs (Why Divs when tables work, in all brows

Posted: Mon Sep 10, 2007 9:11 am
by onion2k
swiftouch wrote:Give me tables or give me death!
Ok. :twisted:

Posted: Mon Sep 10, 2007 10:54 am
by RobertGonzalez
If tables work for you, keep using them. Honestly, no one here has a desire to make you change your mind when your mind is set toward a certain way of thinking that you don't want to change.

Simply put, as has been before, tables are for marking up tabular data, not making a web site layout. There is a time and a place to use them, but the entire site is neither the time nor the place. However, if you disagree, continue to use tables to your hearts content. Just stop asking us to change your mind when you don't really want your mind changed.

@ Kieran: Very well put. Me likes a lot.

Posted: Mon Sep 10, 2007 11:47 am
by JAB Creations
@ Swift...

Looking at your site's size/load time for people using dialup I have some respectful/tactful criticisms that you could take in to consideration. After all there is still a large percentage of folks still using dialup around the world and being able to scale your bandwidth down if your traffic goes up is part of adapting to success.

The first thing I notice that is a given, per-page CSS. Stick all your CSS in to a single file and link it once per page. Why add unnecessary load to every single page?

JavaScript can also be loaded via external files and if you really want to go further keep script elements out of the body period. JavaScript event handlers are my preferred method...

Code: Select all

<element onclick="this_function();" onkeypress="this_function();">
You're using Apache, add compression to your files (SHTML, JS, CSS, etc). I'm not overly savvy with Apache so I use PHP to do most compression on my work. After optimizing my site's text related files I reduced 36K modem load times (at 4KB a second) from 45 seconds to 7. If you look at the size of most sites on the internet and then jump on dialup you'd be greatly appreciative to site you visit without deciding to first do the dishes while it's first page loads.

Photoshop + Indexed Colored GIF = No JPEG compression/distortion and smaller file size. It doesn't work to great on larger images (which should be kept to a minimum) or images with excessive amounts of color. But for most of the graphics it reduces the file size dramatically compared to JPEG formats and it looks nicer too without that nasty distortion created by JPEG compression.

Your tables are missing thead, tfoot, and tbody elements and are using excessive deprecated attributes such as cellspacing and cellpadding. If you're going to do tables at least do them right.

You could also give your menus rollover background color and have an image in place there too (index colored GIF would reduce one image from 637 bytes to around 80 bytes or so give or take a couple dozen bytes).

Your page has 63 validation errors and fails WAI AAA compliance. Well, most sites do anyway.

Those are my points on your site and if I was talking to a site owner you were working for you'd be wondering why they weren't calling you for the past week. So it's completely up to you to choose to improve your skill set...here are my simple suggestions.

First, validate your HTML. It's really not that hard. For example when I was validating my site's history page (it's a very long page) I had like 500 validation errors (I was when I was starting out working with Frontpage 98 which I do give credit for helping me gain interest in web design) but of course it's code stinks. 500 validation errors turns out in to less then 100 changes honestly. So for 63 validation errors you're maybe only looking at making between 20-30 changes to your code...not even half an hours work of work for myself.

The next thing I'd do is reduce the page's file size by moving all that CSS to a single external file. If you prefer multiple CSS files fine, but remember your first linked CSS should *NOT* have a title attribute. Also *PLEASE* make sure you use the terms element, attribute, and value. I can't stand people talking about tags, we're not marking down prices in Sears here people. 8)

If you want to learn how to make your site more accessible get it to validate for WAI AAA compliance. At first you'll think it's a total pain and it sort of is though once you figure out how to get it to pass your coding practices will have greatly improved.

http://www.cynthiasays.com/mynewtester/ ... res.com%2F

You've got nothing but benefits from these comments alone for your profile's linked page. We're all here to get help and when we can help each other. I sure as heck can't do much to help those here with PHP but I try to help folks with clientside whenever I ask help for serverside. So again take my criticisms in the manner that I'm trying to help you, just as everyone else here is. Tableless is the way to go and who wouldn't want to loose some size and float? 8)

Posted: Wed Sep 12, 2007 10:35 pm
by swiftouch
You don't actually need to convince me that CSS is better in many ways; and I utilize those ways. Unfortunately, I like to make money, and impress the boss by getting things done quick. If I wanted to endlessly tear my hair out because of the differing ways browsers display <div> content, i would be happy to use them. But a table works in all browsers, as it should. I could care less about people with dial-up(upgrade already!)

Take for instance, a simple 3 column layout with a table.
<table><tr><td></td><td></td><td></td></tr></table>

Now using CSS do that, in one line, 50 characters or less. Good luck.
After creating that div/css layout, view it in the most popular browsers and odds are it's going differ greatly in everyone of them. Oddly enough, especially in IE, the most used.

I'm coming from the standpoint that I work at a web design chop shop where I deal with a new site almost daily. And the ones that are done in divs/css are by far the hardest to edit. From the standpoint of money, there's no way that dealing in divs is going to help the bottom line of my company. The hours spent on editing css content easily trump comparable table markup, even with experienced css developers.

What is your opinion?

You've all convinced me that in theory, css is the way to go. I know it is. But you can't convince me that it's faster. And in fact it's maddeningly slower because of all the browsers differing in the way they render it.

I guess what I'm really trying to argue here is that pure CSS layout isn't possible in todays browser world unless you've got the time (and money) to push around the pixels.

Posted: Thu Sep 13, 2007 12:45 am
by matthijs
It's slower for you because you haven't mastered CSS. For me building a site with tables is slower. It's as simple as that.

The fact that you keep talking about "great differences" in the most popular browsers tells me you're doing something wrong. Most of the sites I build nowadays don't need any hack for any browser.

Of course, if speed is your only concern and quality is not important for you or your customers, well I can't argue with that. But just putting together something that resembles a website as quick as possible without any concern for quality or standards: now that sounds hacky to me ;)

And last, another thing is that a bit of time won now might cost a lot more later. When it's time to change something about a site, changing a CSS build site is so much quicker. Want the box of ads to the right instead of the left? Float:left; -> float:right; You don't even have to touch the HTML.

Posted: Thu Sep 13, 2007 8:23 am
by The Phoenix
swiftouch wrote:But a table works in all browsers, as it should. I could care less about people with dial-up(upgrade already!)
No, it doesn't. There are many browsers that do not - mobile browsers, accessibility browsers, and more. Tables suck in layout on many browsers - just not ones you mention.
swiftouch wrote:I'm coming from the standpoint that I work at a web design chop shop where I deal with a new site almost daily.
So you are in a unique environment, where maintenance doesn't matter, and where speed is more important than quality. Easy enough, then use HTML 4.01 transitional, use css sparingly, and when your clients come back in two years asking for a redesign with modern technologies, someone else will get that business.
swiftouch wrote:And the ones that are done in divs/css are by far the hardest to edit. From the standpoint of money, there's no way that dealing in divs is going to help the bottom line of my company. The hours spent on editing css content easily trump comparable table markup, even with experienced css developers.
1. It costs 6x more to gain a new client than to keep an existing one. Losing those return customers WILL hurt your bottom line. DEEPLY.
2. You've given up on any government websites, since they won't meet accessibility requirements. That will hurt your bottom line.
3. (To the comment about 'even with experienced css developers'): Experienced CSS developers are telling you exactly the opposite of what you are claiming here.
swiftouch wrote:What is your opinion?
We've given our opinion. There are numerous reasons for going with css, and you aren't acknowledging them.
swiftouch wrote:But you can't convince me that it's faster. And in fact it's maddeningly slower because of all the browsers differing in the way they render it.
There are simple solutions to the minor differences that *one* browser has in rendering css. Several have been pointed out to you. Good design can even avoid those issues in the majority of cases. Eventually even that one browser is going to fix its issues, and then what would the reason be for avoiding proper design?

That its still just too slow and tricky?
swiftouch wrote:I guess what I'm really trying to argue here is that pure CSS layout isn't possible in todays browser world unless you've got the time (and money) to push around the pixels.
This argument is flawed. You don't need time or money, you just need a better understanding of whats possible, and you need to use the technology that is out there. There are dozens of libraries that get around those issues. You can even design to avoid the issues.

As if that wasn't enough, pushing pixels is itself flawed and outdated.

Current technology may require more consideration of the issues, but it ensures better maintainability, compatibility, accessibility, and more. None of which are available in tables based layout designs.

What is your answer to those shortcomings in tables based layout designs?

- How do you easily change layout *without* changing your html?
- How do you maintain 1,000+ page site designs when the client wants to change from red to blue? Search replace on 1,000 pages or 1-3 css files?
- How do you ensure compatibility on mobile phones? iPhones? OLPC?
- How do you ensure accessibility?

Those are the real issues that proper design solves, that tables based layout designs cannot, or do not effectively address.

**I edited my original post because the tone was not sufficiently respectful. I apologize for that, and I've changed my wording. Any questions/concerns, pm me.