Why CSS Should Be Used for Layout
newmediacampaigns.com
newmediacampaigns.com
The CSS standard has already conceded the point that tables can do things that pre-table CSS couldn't do. It's over. The pro-CSS side, at least in the way it is being argued (as if the IE subset is CSS, rather than the standard), is just wrong and totally out of date. They've been abandoned by CSS itself. Quite a long time ago, actually.
As for their assertions that this is for "tabular relationships between data" in the standard, who cares? Table support is implemented as certain boxes with certain behaviors. If you need those behaviors in your layout, use them. They are well defined. And since content and presentation are so darned separate, it's not like it actually hurts anything, right?
(That's a critical point. If you move all the table stuff into CSS, that's fundamentally different than using the standard table tag. That's presentation in CSS and content in HTML, exactly as it "should" be!)
Getting all huffy about the fact that somebody declared that some behavior should "only be for tables" is really missing the point. The behavior simply exists, regardless of what it was "designed" for, and if you need it, use it. Besides, just read about the table support... if you can't see how that stuff might be useful in a layout, I can't imagine how your mind works.
The CSS table support is actually pretty rich, better than the conventional table tag by a lot, or at least, more flexible.
Note that CSS does not say that disply:table is only for tabluar data. The whole point of CSS is that you can use it any way you like, since it doesn't change the semantics of the document. This is totally different from HTML which indeed states that HTML tables should only be used for tabular data.
CSS has not "conceded" anything by including display:table - rather this is the whole point of CSS: to allow you to use grid-like layouts for other things than just tabular data.
I agree with you... except it is not a myth. There are tons of people walking around and spouting off who have come to believe that "Tables are evil!"
People with considered opinions like you are not in the majority of those speaking.
"Note that CSS does not say that disply:table is only for tabluar data."
It says "Table layout can be used to represent tabular relationships between data." Direct quote, and skimming that page, it's the only normative comment about what it is for. I again agree that CSS doesn't forbid the use in layout, but there definitely are people thinking tabular layouts are forbidden and that only the "IE subset" (again, my best guess at what incoherent thing these people are arguing for) is "pure".
You basically re-iterated my point, but I assure you that you are wrong about what other people think. Go check out the parallel /r/programming post.
Anyway, I agree we are in agreement, except I don't think the quote from CSS2 you mention is normative. (It says can be used, not must be used or should be used) It is just an example. There is nothing normative in CSS about when to use the different styles.
Things not to bother arguing about in public (since no one will change their mind):
Religion
Politics
CSS vs Tables for layout...?
And I don't agree with ejs. I think it's an important debate because CSS layout problems are a major reason why so many people use Flash. My own opinion about this matter is not cast in stone. I may change my mind based on good examples of CSS layouts that don't break and actually make maintainance easier.
CssZenGarden also shows that refactoring a CSS-driven site is easier since you can do it without changing your templates.
In my experience, this just doesn't happen in the real world.
What I gain from CSS is that I can easily play with the layout and get a feel of what works best.
I also code by hand. I guess table-base layout would be easier to experiment with using a wysiwyg editor.
...
> I sometime edit the markup to change classes or add the occasional <div>.
Case in point.
> I guess table-base layout would be easier to experiment with using a wysiwyg editor.
Christ on a cracker, if a person is using a wysiwyg, they shouldn't even be in this discussion.
You can't radically change the flow of the pages but that's not the point.
The other area where CSS driven design makes things easier is debugging or experimenting with the look and feel of the page using Firebug. It's alot easier if all of your positioning and layout is set via IDs and CSS classes because I can go in and modify properties, add properties, etc. without needing to change CSS files or edit the document inline (it's much easier to modify CSS than inline style settings). Tables make this harder to do because tables are a pain in CSS with regard to which elements take specific CSS elements.
I'm not a CSS zealot but once you learn CSS properly (and it seriously doesn't take much time if you just focus on it a bit and find someone good to mentor with a bit) it makes things so much easier, especially if you're using the same generated code across different sites requiring different look and feels.
The grand majority of those selectors are not available in IE6, which most of us still have to support, so this is a non-starter. Nobody is arguing that we wouldn't be much better off with better CSS support. The argument is that with CSS support as it is now, most non-trivial changes to a sites design are nigh on impossible without changing the markup.
> You can't radically change the flow of the pages but that's not the point.
You know, sometimes it is.
> once you learn CSS properly
Can we quit with the "you probably don't know CSS" schtick?
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>CSS layout problems are not why so many people use Flash. Flash has popularity because for pure designers working in a GUI on a canvas where you can pixel place every item with drag-and-drop is natural and taught in school.
As for examples, the article calls out the canonical CSS layout example site made specifically for this purpose years ago: http://csszengarden.com/
It's worse than an excuse. It's ignoring one basic fact. One of the best things of HTML as it was understood ten or fifteen years ago was that a lot of people (to say "everyone" would be an exageration) could write it even with a text editor. This is a part of the "democracy" of the Internet.
I think that a steep learning curve or 500+ pages standards are not a good idea for this medium.
The guy of the story about Mathematica was right in one thing: it's not good that writing graphics stuff is so difficult and "beaurocratic". There is a bunch of aficionados that take every chance to create what now is still reserved to programmers or designers because the tools have a shitty usability.
It seems like people on both sides of this debate are seeking validation rather than trying to help people.
Fight for what you think is right!
(Disclaimer: I'm not advocating for senseless opposition; rather for reasoned partisanship and against "be quiet and enjoy it for myself".)
To this date - and I don't think I qualify as stupid - I haven't fully grokked the css way of doing layout, there is always the little 'clear' or some other detail that keeps me from getting it right in one go. CSS works, but it is harder than it should be, the idea of something new superceding something older is that it is better and easier to use at the same time.
If CSS was really that great we wouldn't be having these debates, people would have switched en masse years ago and the 'table' tag would have been deprecated. I think any such attempt by w3c would be met with a fairly serious revolt.
The problem with this debate so far is the oversimplification of the issues. CSS was not created to simplify a 5-cell table layout by turning it into 5-div layout. These degenerate examples aren't representative of the real-world design issues that gave rise to CSS in the first place. It's like somebody saying PHP is a better language than Haskell because "functional programming is confusing"--sure go for PHP if you just need to get something done, but if you are serious about the craft of programming than you need to look to the state of the art.
CSS is far from perfect. But people need to have some appreciation of the facilities it brings to the table (despite imperfect browser support). The capabilities are much richer than tables (in fact they are a superset in the spec), and designed to solve complex design issues across a range of devices and media. This is all achieved in a human readable and editable language. Try writing postscript out by hand some time.
It's definitely a transition to go from the table mentality of basically stretching the page out like a weird balloon from the top left corner or top center of the page, to the CSS mentality of having to sort of "press in from the outside" to keep things from blowing up all over the page and each other, but the more I learn about how web stylesheets work, the more I respect them.
CSS fans often cite the fact that the code looks cleaner or that the data is more modular, etc. I don't really think that's the case, at least not when compared to a table driven site which also just has a lot of class and ID tags for background images, text colors, which in practice is just as flexible. CSS shines though where it allows you to create things in sizes and configurations just not possible in tables without a lot of shitting all over yourself (the biggest one being having two elements overlap, which is useful for drop down menus, confirmation boxes, etc, etc.)
Uh, designers might not realize that programmers have to generate and modified HTML, not just hand-craft it.
I do really do appreciate that Div/CSS have many, many aspects that are a step forward.
But the limitation that have been incorporated into CSS are just worse the "imperfect", they have screwed the ability to produce exact, reproducible results.
The ultimate solution is something beyond both present CSS and tables.
"Try fixing the width of one column in a table and then predicting the width of each of the remaining columns." -- Yeah, but I can predict that each item on the row will be on the same line. Divs are harder than that.
Well, we can go on but I swear I've learned something and I was a div proponent till today.
Yes, and this is one of the areas where tables can get really nasty really quickly.
But the limitation that have been incorporated into CSS are just worse the "imperfect", they have screwed the ability to produce exact, reproducible results.
My point was that the idea that tables produce exact reproducible results is flawed. They just are more straightforward at the very basic level.
The ultimate solution is something beyond both present CSS and tables.
It's a nice thought, but god is not going to come out of the sky and simultaneously upgrade everybody to the something better.
People complain about all the flaws of CSS and the slow pace of progress, but seriously, considering this is the first truly cross-platform, cross-medium technology in the history of mankind, and looking at where we were in 5 year increments (2004, 1999, and 1994), progress is doing just fine.
Another thing... it's easy to pick apart CSS. But the domain of problems it has to address is HUGE. It's much more complicated than any one individual can fathom. No one is going to be able to turn around and create something that solves all the problems without being extraordinarily complex.
Yeah, but I can predict that each item on the row will be on the same line. Divs are harder than that.
CSS does have a learning curve, but it's not bad for what it actually provides. 90% of the hassle is just browser issues (which are getting better all the time). And FWIW, CSS supports table layout rules as well as float and absolute positioning, browser support just needs to catch up.
I was Div-only and now I think mixing Tables and Div can be good, even preferable.
"One of the problems with criticising CSS is that it's very hard to write good CSS, so pointing out problems with CSS begs the question of whether this is an indictment of CSS or one's coding ability. The problem is particularly pernicious for layout. (One indication of this is how many CSS layout tutorials there are on the web.)"
This sealed it. The tool should the servant, not a thing that always trying to learn more about. Anything that really is inherently hard to use is bad, plain bad. There's no excuse. Things that are until you learn something can be great.
I've done complicate layout in CSS and the process of trying to make it work never got easier or clearer. At a certain point, you have to say "this is just a bad way to do things".
It would be nice if CSS/html somehow added objects which had the virtues of both Divs and tables. BUT I now realize that design mantra "never use tables, always use divs" was just ideological nonesense. Not that I would always use a table but I will certainly consider both options from now on
I realize now that one of the truly evil aspect of divs is that they keep you from having localized object on your page. Want to guarantee that you will have three column on your page, good friggin' luck.
Html, in general, is a messy. Html is one of the most amazing programming success stories, in the sense that it is the widely programming language by non-programmers. SIMPLE html created the web. Html that is that was so simple that the friggin w3c standards would never accept it now.
And the "progress of standards" has essentially only made this mircle lousier. You could blame corporations but it really seems like simple bureaucracy was just as much to blame.
I changed my mind (a while back). i learned about web dev and read you should use CSS not tables. so i made some layouts with css and generally believed that.
then i found some pure css vs tables arguments here. and i decided tables are fine.
If you come from a different field, say programming, I can see how CSS looks like a bad solution to an already solved problem. So you're incentive is to stick to what you know and use tables for everything.
However, there's much more to front-end design that just having text and images show up where you want: user-agent targeting, SEO, accessibility, typography, graphic design, etc... There's a lot to learn, and CSS is just a small part of it.
The first rule should be to get something working quickly, even if it's suboptimal. And the jury seems to still be out on the suboptimal part.
The rule of getting something working quickly should not increase the cost of doing it right in the future.
I briefly taught a web design class and I remember students struggling with their table-based layouts. Layouts would be inconsistent from one page to the next because of content stretching the cells, and they could never figure out why dimensions set on a table or cell would be ignored by the browser.
I personally prefer using CSS for layout, not because it is more intuitive than tables, but because I prefer to remove the table-cruft from my html. I think it makes php and rhtml files easier to read. However, in the limited freelance work that I've done, I've run into more than one client that preferred I use tables because they couldn't or didn't want to maintain their layout with CSS.
Anyway, that discussion is ancilliary to my point, which is that the benefits offered by the author aren't going to be convincing to someone who sees a 40-fold or so difference in time-to-production.
[edited]
And I must vent about the you-poor-thing defense, which was only mildly present in the article but has popped up loads of times in the discussion of the past few days.
Hockey-stick learning curves are inherent, objective flaws for software interfaces, not subjective ones that don't matter once the cretin beginners have been sufficiently shamed to overcome them. Interfaces are for humans. They should make "easy things easy and hard things possible." When they don't, there is a general feeling of malaise. Steep learning curves actively foreclose productivity and decrease user enthusiasm. Let us not forget the lessons of Kathy Sierra:
http://headrush.typepad.com/creating_passionate_users/2005/1...
Furthermore, defending steep learning curves in general puts one in poor company and makes people wary. We've all seen people defend their sunk investments in genuinely crummy systems with a zeal which, seen from the outside, is comparable only to Stockholm syndrome.
I haven't read much of the what's so wrong with tables argument in this debate. A lot people saying x is possible with divs and css is different from saying it's faster, better, cheaper. The div approach is harder to debug, the tables approach fails to set you apart from the hoi polloi...end of story?
Someone fix it, please.
The whole argument that CSS has a learning curve, or that we need hacks, etc - all point to the same problem. The reason it takes such a long time to get the layout just right is because there is some browser out there (typically IE6) that does not behave the way you want it to.
We would not even be having this "war" if all the browsers were standards compliant, so my gripe as a developer is - why are we not fighting the correct war? As a developer, I must be able to write code, whether using div tags or table tags, and expect that it works just as it is supposed to, and not have to waste hours trying to hack it to work with non-compliant browsers!!
CSS extermists will tell you how using those frameworks is evil, lame, etc. I think the problem is that web developers feel threatened of loosing their jobs (gigs), since regular Joe Sixpack can now go and create a decent looking website in XHTML/CSS with minimal effort.
Or you could just make your CSS render out tables (http://www.digital-web.com/articles/everything_you_know_abou...).
This isn't even an argument.