6 ms·
Tables vs CSS: CSS Trolls begone
- shaunxcode 18y agoDude what you need in your life is something like malo. It allows the simplicity and elegance of the nested tables paradigm but with out the cruft of using tables! http://code.google.com/p/malo/ http://code.google.com/p/malo/ Personally I have an abstraction layer which allows me to express my layouts as s-expressions and then be rendered either as "html" (tables, great for quick development) and then rendered to "xhtml" (divs + css) for when I am polishing things up. Right now it is written in php (yes the s-expression reader and everything, and yes it caches the interpreted files so the overhead is worth it) and I plan on releasing it on googlecode when I am happy with the "interface" of required methods for each "layout adapter". edit: I forgot to mention malo is like 9 lines of css w/out comments.
- bk 18y agoAfter going through blueprint and 960.gs, I settled on malo as well. It's dead simple, light, stable, and can be learned in 2 minutes. Its only gotcha is to adjust the negative margin value for IE6 if you change your default font-size. You can also add your own partitioning percentages. Lastly, the standard triggering of "hasLayout" for floats in IE applies.
- jaxn 18y agoThanks for the pointer to Malo. I have looked at 960.gs and Blueprint as well before I decided to use use CSS Reset and then my own layout using the same technique as 960.gs
- Jasber 18y agoThe people preaching 100% CSS design are purist, they're people that love design and love CSS. These are the Eric Meyers, Doug Bowman and David Shea's of the world. The way you see beauty in "perfect" code, they see in pure designs. But there are benefits to their methods. Usability, accessibility, SEO, increased caching and reduced page load times are all side-effects of "pure" CSS designs. I'd suggest taking the 80/20 approach to CSS. Take the best of what works and then just get it done and move on. Also, my time limit for CSS problems is 1 hour. After that I use the best solution instead of the perfect one.
- anovaskulk 18y agoThank you, I couldn't have said it better myself. The author seems to think it's either all tables, or no tables. From one extreme to another. I prefer not to use tables for layout, but I will if I have to. :-)
- anuraggoel 18y agoThe author seems to think it's either all tables, or no tables. I don't think he is saying that at all.
- mjnaus 18y agoNope, doesn't sounds like the tone of the article to me. It seems he merely states it makes no sense to rigidly hang on to "being one of the cool guys" and spend hours, if not days, getting your layout done using only DIVs.
- gigawatt 18y agoAgree completely. The author is getting dangerously close to hypocritical by berating CSSers in the way he hates being berated by them. For me, (mostly) pure CSS is always faster in the long run, but I would never tell another person how to build their site. I usually, however, get pretty cranky if I have to make any layout changes to sites with nested tables that someone else built. But that's my problem, not theirs.
- ssharp 18y agoWhat does "pure CSS" page offer in terms of usability and accessibility that a mixed-use table/css page wouldn't? If anything, CSS would be worse as its difficult to render the same across all the different browsers and platforms. With fixed width tables, you can pretty much guarantee your results. I'm not advocating either and tend to try to use as much CSS as possible but sometimes you spend twice as long to achieve an inferior result. After many years of working with HTML, I think most people find that happy medium.
- dpifke 18y ago
- vaksel 18y agoas long as it works, it doesn't matter if you use CSS or tables. The end users just don't care.
- zain 18y agoReally? You use Photobucket and Rapidshare as examples of sites whose design examples you want to follow? I'm certainly not a CSS purist, but I'm sure you could've found better reasoning than "all the big guys use tables, so I should too."
- webwright 18y agoHe's not saying they have wonderful design. He's saying that most of the top sites liberally use tables, which is interesting given that they probably have some pretty great devs and an infinite budget. I've walked the same road as the author has and currently use tables for layout and CSS for text style, paddings, margins, borders, colors, backgrounds, rollovers...
- jlft 18y agoLearn the pros and cons and then use whatever fits the job better.
- deleted 18y ago[deleted]
- JoelSutherland 18y agoThe CSS Problem has been solved. There are a large number of people in the world who can take any arbitrary design and make it work in all browsers using compliant XHTML/CSS. In fact, there are so many, that the rate to do such a think is between $100 and $200: http://www.google.com/search?hl=en&rlz=1C1GGLS_enUS291US304&q=css+slicing+service&btnG=Search http://www.google.com/search?hl=en&rlz=1C1GGLS_enUS291US... In my mind this leaves only two defenses for not having a website done in (roughly) proper CSS + HTML: 1. You believe that it is better to layout pages in tables. 2. You can't do it personally and don't have $150
- gruseom 18y agoIn my mind this leaves only two defenses for not having a website done in (roughly) proper CSS + HTML Defenses? It's a crime now?
- JoelSutherland 18y agoOf course not! But talk of zealots and trolls seems silly to me when the issue seems mostly resolved.
- pg 18y agoOr 3. You just don't care. which is by far the most common explanation in all situations of this type.
- JoelSutherland 18y agoI fail to see how that is different than #2? Maybe I should have said "don't want to spend $150".
- DougBTX 18y ago> 1. You believe that it is better to layout pages in tables. Or, you wish to lay things out as in a table, and would like to use CSS to do this, ie: #box { display: table } http://www.w3.org/TR/CSS21/visuren.html#propdef-display http://www.w3.org/TR/CSS21/visuren.html#propdef-display but in practice you must support legacy browsers (IE6/IE7), so you choose to use actual table tags instead.
- willwagner 18y agoI'm not a CSS purist by any means but I think heavy use of nested tables can be a real hassle for the visually impaired. I think if you find yourself putting a table within a table strictly for layout, you should at least consider other alternatives. Personally, I like using tables for forms, which makes it relatively easy to line things up for both the labels and the input elements, and it also makes the css rules fairly straightforward to read. I'm sure CSS purists might disapprove, but I think it's a good tradeoff and hopefully not much of an additional hassle for screen reader users.
- dasil003 18y agoLets call them zealots since they're mostly not really trolls. CSS zealots are a lot like TDD zealots. Both CSS and TDD have huge, huge benefits that you shouldn't write off before you actually take the time to learn them. The problem is the zealots talk about them as panaceas and ignore the fact that there is no one methodology that separates the pros from the amateurs. Instead they use their expertise in one tiny niche to prove to themselves how their work is so much better than the majority of similar work due to a few arbitrary criteria. Then they form small self-congratulatory communities to pat themselves on the back about how brilliant they are and how much everyone else could learn from them. These are the people who you find trolling your blog. Usually they aren't even particular skilled at what they do, which is why they cling to dogma and feel the need to attack other people. But let me be clear. I haven't layed out a website using tables since 2001 (and I used tables for 5 years before that), once you develop your mental model of CSS (and browser deficiencies) there are actually only a few edge cases where tables are easier. CSS can actually solve 90% of web design challenges more elegantly than tables. CSS makes it easier for designers to and developers to work together (I am both). There are many techniques which are only available in CSS. All future technical developments in web design will be in the realm of CSS. So it really is worth the time to slug it out with CSS and figure out what's what. That said, web design coding (ie. HTML/CSS) is just one tiny piece of a huge potential set of web development skills. Why does google put CSS inline? Because their design considerations are driven by 100 things that are so far over CSS Zealots heads they can't even fathom it: scalability, latency, back-end HTML generation, js compiled from other languages, etc.
- deleted 18y ago[deleted]
- iamelgringo 18y agoRE: Why does google put CSS inline? Because their design considerations are driven by 100 things that are so far over CSS Zealots heads they can't even fathom it: scalability, latency, back-end HTML generation, js compiled from other languages, etc. From: http://www.fastcompany.com/magazine/100/beauty-of-simplicity.html http://www.fastcompany.com/magazine/100/beauty-of-simplicity... But the original [Google] home-page design was dumb luck. In 1998, founders Sergey Brin and Larry Page were consumed with writing code for their engine. Brin just wanted to hack together something to send queries to the back end, where the cool technology resided. Google didn't have a Web master, and Brin didn't do HTML. So he designed as little as he could get away with.
- cakeface 18y agoI've always been confused by google's use of tables and inline styles in their homepage also. Is it to shrink the file size and send less over the wire? Is it to maintain support for IE 4 or some other archaic browser? Using one of the css frameworks like yui grids or malo gives you table like designs quickly and easily. Yeah there could still be cases where a table is easier for layout but I feel like there are less and less excuses for that.
- markup 18y agoThat doesn't shrink the file size, but loading a single file is faster than loading one and the second. What does shrink the file size is getting rid of new lines, tabs comments and so forth. Note how a google result page is a lot of text, but actually typically 10 lines. For the same reason jquery is offered minified and YUI offers a tool to "compress" javascript and CSS: http://developer.yahoo.com/yui/compressor/ http://developer.yahoo.com/yui/compressor/
- bk 18y agoTables probably for cross-browser support with minimal code size. Inline css and javascript for 1 http request instead of 3. Much faster, and less load. The content-length of the google home page is 2752 bytes (gzip).
- deleted 18y ago[deleted]
- gojomo 18y agoBecause such comments would be superfluous; an upvote should suffice.
- anuraggoel 18y agoAgreed. Can I use "I'm new here"? Because I still slip up.
- mcargian 18y agoIs there any reason you can't use an unordered list with one of the pre-made jquery tree plugin's to give indentation, collapse and expand? http://jquery.bassistance.de/treeview/demo/ http://jquery.bassistance.de/treeview/demo/
- iamelgringo 18y agoIt would probably work, but then, you're creating a work-around for a CSS shortcoming with javascript.
- GHFigs 18y agoHow so? You'd be effectively solving the problem using both CSS and JavaScript they way they were intended, as opposed to using tables for layout, which has always been a hack around HTML's lack of any other layout support. Seems like if you're going to reject one approach on the grounds that it's too hackish, it'd be the other one.
- tdavis 18y agoArticle summary in 3 sentences (apply these rules to whatever you want, not just table usage!): If big sites do it, it must be okay! If I can't be bothered to do proper research to learn why one should not use technique X, the reasons must be trivial and stupid! If I am too lazy to learn how to do something properly, I must justify doing it improperly somehow! ------ I haven't used tables for page layout in roughly a decade. I think I used a table improperly for the first time since then last week, when I was laying out a form and couldn't get it to render consistently after a Javascript update. I don't consider this the end of the world, nor do I take it to mean that CSS is unnecessary and I'm going to go back to pretending it's 1999. The problem with sensationalist bullshit like this article is people will read it and form an opinion based on it, without doing their own research. Do your own research (and looking at the table counts of Alexa Top 100 sites doesn't fucking count as research, FYI). Learn the real reasons why you shouldn't use tables for layout (or why to adhere to various other web standards). If you don't find those reasons compelling enough to switch, then do whatever the hell you want -- at least you know why you're doing it. Learn that if you choose to use the proper methods, all the layouts have already been made for you, so you can be as incompetent as you'd like and still layout a page better than Google (and yes, Google are complete shit bags when it comes to adhering to Web Standards. Thankfully, what Google does should be irrelevant to you!) Finally, at the end of the day, just because you use tables occasionally doesn't magically mean CSS IS DEAD. I can't think of a sufficiently funny metaphor for this obvious fact because I am too god damn pissed off.
- iamelgringo 18y agoDidn't you get them memo? Comments like this were banished.
- tdavis 18y agoI don't read memos and I'm not sure what "comments like this" are.
- iamelgringo 18y agosigh...
- lisper 18y agohttp://news.ycombinator.com/item?id=463234 http://news.ycombinator.com/item?id=463234
- jballanc 18y agoI'm sorry but I don't see how you can write an article comparing Tables to CSS and not mention Internet Explorer...not even once! In my experience, the only reason I've resorted to tables for layout is when I need to worry about IE compatibility (well, that and when I actually want a table). This is also why the author's argument doesn't interest me in the slightest. Claiming that "all the popular sites" use tables is nothing more than an appeal to authority. Furthermore, it's a blind appeal since the author doesn't even consider the backwards compatibility logic in using tables. If you're going to tell me why tables are better than CSS, then tell me why tables are better than CSS. Don't just show up to the argument with a bigger gun...
- poppysan 18y agoHe references Google finance. Google finance only uses tables for tabular data, not layout which goes against his own point.... I completely think this is cheer leading for anti-CSS trolls.
- deleted 18y ago[deleted]
- sjs382 18y agoAm I the only person who finds CSS easier to write and easier to wrap your head around? I don't think I could go back to tables without a significant effort in changing the way I do things. CSS has just become natural. Maybe the author just needs more experience or practice.
- mattmaroon 18y agoInlining styles can be a good way to boost performance for webpages that tend to be viewed once and left, like Google or Yahoo's home page. http://developer.yahoo.com/performance/rules.html http://developer.yahoo.com/performance/rules.html It seems as if having external CSS is only good for scalability due to caching. If you knew a page wasn't going to be revisited, you would inline it to save an extra http request.
- tlrobinson 18y agoI'm very wary of people who cling to principles as if they're sacred truths that shall never be broken. I think these sorts of things serve better as guiding principles.
- volida 18y agowhat? i think you are focusing on the wrong problem people.