Hacker News new | past | comments | ask | show | jobs | submit login
Everything you know about CSS is Wrong - The changes tables layout will bring (digital-web.com)
56 points by jwilliams on Oct 22, 2008 | hide | past | favorite | 46 comments



Great, now we just have to wait until every IE6 and IE7 user has upgraded to IE8. By then, we'll be on to new browser technologies completely.


Browser standards, like traditional industry (cars for example) move pretty slowly. To say that somehow we're going to suddenly leapfrog this tech after years of slow progress would be unlikely.


Or you could just use html tables.


You could but that would clearly be a very big mistake! Sure it will work perfectly in every browser and it's really simple and easy to work with. But it's a big mistake! You'll have to deal with the fact that it's not trendy and cool. You will be looked down upon by those who are flogging themselves at the altar of cargo cult methodology. Come to think of it, quite similar to the situation those of us who still think Perl is awesome face. Try using Perl and HTML tables in 2008! You won't get invited to any of the cool parties...


no, it's a mistake because it's semantically incorrect.


It's no more meaningful to talk about the semantics of html generated by programs than it is to talk about the semantics of machine code output by a compiler. Complaining about using tables for layout on semantic grounds is like complaining about using shift instructions for multiplication.

Semantics applies at the level of abstraction where humans look at something. That's the fundamental mistake of CSS zealots. Without consciously realizing it, they have a model of the world in which one is editing web pages by hand, or at least editing templates that are only a thin layer of abstraction above web pages. Which is actually quite backward.


I disagree, more or less completely. The semantics of HTML matter to the following:

    1. Browsers which render the HTML
    2. Machines, such as search engines, which "look" at it
    3. People who edit the HTML (in the case that it is a 
       template)
Whether your HTML is semantically correct, or even stylistically valid, doesn't much matter to modern browsers because they've been designed under the assumption that most people will be too lazy or inept or uncaring to generate "proper" HTML. Obviously, this issue doesn't exist for compilers, where in the case that a compiler doesn't output proper machine code the program simply doesn't work.

When this starts to matter, however, is when someone leaves the comfort of their Firefox 3 on a huge screen and goes to Safari on a iPhone, for instance. Hacker News, for example, does not scale properly on the iPhone which leads to unnecessary and annoying horizontal scrolling past a certain nesting level, among other issues. This is tied to semantics, though whether or not a font element is used doesn't matter -- what does cause this, however, is the ridiculous reliance on tables, which obviously aren't semantically proper since you're not displaying strictly tabular data.

What about these limited browsers, and "machines" like Google? If you want a sidebar on the left side of your page, with tables that has to come before the main content. Using proper CSS techniques (semantics of HTML withstanding), you can place this after the actual content. People with smaller browsers could view your main content before your navigation with minimal changes and crawlers such as Google will index your content more accurately because of the placement of content in the source document. Semantics come into the picture when elements are misused or not used, such as header elements. These elements do have meaning to search engines.

How about screen readers and other assistive devices? Many of these take context clues from the HTML, such as the type of element used to wrap content and its attributes, as a way to present pages more accurately to the user. Semantics matter a lot when it comes to accessibility. What about page size? The more tables you have on a page, the larger that page becomes to download. Perhaps Broadband is becoming ubiquitous in many places (as far as America goes, at least in somewhat urban areas), but that doesn't mean that it makes sense to waste time transferring bytes.

There are a slew of other applications where HTML semantics bleed out into the real world, such as Microformats and the like, but many of these applications haven't gained wide-spread traction so probably aren't worth adding to my argument.

The point being here is, semantics matter when whatever is "looking" at something cares about the semantics of it. Machine code is very simple: A machine looks at it and executes it based on strict rules. If a shift instruction is used, it's because that instruction will (assumedly) give some kind of performance benefit, not because the machine views it as having a different "meaning" from any other multiplication method. The fact that you can achieve the same thing with a table as you can with a div or paragraph tag doesn't mean it's correct to do so. If everything was meant to work properly and to its full potential as a table-based element, why have all these other silly layout elements?

So, at the end of the day, what do we "CSS Zealots" and semantic HTML proponents get ourselves? Well, we get more maintainable, easier to read, accessible, flexible, more accurately indexed web pages. And in my world (the world of skilled web developers) we all still edit our web pages by hand -- using templates that are just a thin layer of abstraction above web pages. The day you see a META tag that says "Generated by Dreamweaver" on TicketStumbler is the day Dreamweaver has managed to produce equally good or better HTML than I can by hand -- HTML which affords all the advantages and luxuries that the stuff I write does.

Edit: As a final note, I'd like to point out that there is a middle ground here. You can create generally "good" HTML without spending a day deciding what a class should be named. TS supports Microformats for events, but running it through an HTML validator would likely produce some menial errors. I'm not suggesting everyone put 10x the time into writing proper HTML and CSS to present it, I'm just suggesting that they put a little time into it -- for the sake of their site, their visitors, the search engines, and the sanity of web developers like me everywhere... if I have to write another XPath string that looks like /table/tr/td/table/tr/td/table/tbody/td[...] I am going to spit on somebody.


1. No. Browsers just have to execute html, not understand it, just as a processor when it shifts bits doesn't have to know that the purpose is multiplication.

2. If you want programs to understand the information on a page at something above a textual level, the right way to do that is to explicitly encode whatever you want as xml, not by using divs instead of tables.

3. I agree: this is the case where you'd want something like CSS. But editing html by hand is not the only way to get web pages. You can also have software generate them. And in that case munging the results afterwards is as inelegant as patching machine code.


1. Yeah, I guess I worded that incorrectly, though you can see the tie-in between semantics and how that html is executed (rendered). Using proper semantics = not using tables for page layout = better rendering (under circumstances mentioned)

2. ... so you're saying we should write HTML, then write XML to describe that HTML? Why not just write HTML which describes itself in the first place? It seems awfully redundant to do it any other way, considering HTML comes with all these handy tags which, when used correctly, describe the content already. Hell, XHML was created as an HTML which conforms to the XML spec for precisely this purpose.

If you write something like:

    <body><div id="content"><h1>My Cool Site</h1></div></body> 
You've already "encoded" it. If you write:

    <body><table><tr><td colspan=2><font color="red"><big>My Cool Site</big></font></td></tr></table></body>
Then, yeah, you've got your work cut out for you to give that any sort of meaning...

3. "And in that case munging the results afterwards is as inelegant as patching machine code." -- Right, so your choices are write it yourself or get a bunch of garbage generated by an IDE or Framework or whatever. If you're happy with the garbage then you probably don't need to edit it afterwards or just "edit" it using the same IDE or language or whatever. What happens when your IDE or framework or language can't generate HTML/CSS to do something you need? Then you have to start editing that crap by hand... this should eventually lead to suicide.


Personally I think the most important of the anti zealot side of this debate is the insistence on everything being centred on code being written by hand.

Dingy little WYSIWYG editors, machine generated web pages, & (in this context, I suppose) software that allows users to generate anything from blogs to shops to social news sites without any technical knowledge, and all their friends have probably done more for for the web (& it's accessibility) then standards have.

We aren't there yet. From online shops to Slinkset, you still need a little css & html to get you past a certain level of control. But I think it would be an achievement, if these weren't needed any more & 'view source' got taken out of browsers from lack of use.


I don't really know what "View Source" has to do with not writing your own HTML, but I completely agree with your argument. I'm not saying I want to always write HTML by hand, I'm saying it should be done until such a time that WSIWYG editors, online web site creators and so forth get to the level that they generate proper HTML. I don't get any more pleasure out of writing boiler-plate HTML than I do from writing boiler-plate code for the backend. If someone has created a framework or library that already does what I need (or gets me on the road to what I need without getting in my way), I'm certainly going to use it.

Needing a little CSS and HTML to get you past a certain level is no big deal, assuming the initial code generated is semantic, (mostly) valid, extensible, blah blah blah. Having tables nested 5-deep is none of these things.


No sorry, I think I as unclear. I meant the opposite. 'View Source' will be removed because no one should want to view source.

What I was saying is that the ability of non technical users to make sites, no matter how bad that code, is much more important then anything else in this debate. Standards should (i think) almost be written specifically for machines.

Sure, you can think of creating the best possible environment that makes sense & so that the pages can be used on future browsers & browser like things, but that is dwarfed by the prospect of letting grandma have a website.

Standards should not be built for hand coders.


Sure, you can think of creating the best possible environment that makes sense & so that the pages can be used on future browsers & browser like things, but that is dwarfed by the prospect of letting grandma have a website.

I would argue that the continued evolution and improvement of the Web are far, far more important than letting Grandma have a website. Besides, Grandma can already have a website -- there are dozens of services out there like Typepad, Wordpress, Blogspot, etc. which allow Joe Public to have a website -- and he should be able to have a website, so long as whoever (or whatever) makes that site uses proper HTML, CSS, and Standards to create it.

Would it be great to get to a point where Standards are written for machines, I can write some super high-level markup that describes how I want a page laid out (or just draw it!) and nobody has to write another line of HTML or CSS, ever? Sure. But it's not going to happen any time soon and pretending like it has just hurts everybody.

If your framework generates a 30-character ID for damn near every element on the page (hi, Microsoft), it's Not Good Enough.

If your language generates tables for damn near everything, it's Not Good Enough.


I would argue that the continued evolution and improvement of the Web are far, far more important than letting Grandma have a website

That's a little cheeky. What I was implying that letting Grandma have a website is more important to the (not as then) the continued evolution and improvement of the Web.' Standards are (to that end) important inasmuch as they allow the guys that make typepad, wordpress & friends to let her do so. That is the criteria they should be judged by.


It seems awfully redundant to do it any other way

So you're against rss feeds? You think it would be a more elegant solution if instead of having an rss feed for a site like hacker news, other apps scraped the front page?


Of course not, but you seemed to be saying that if any semantic meaning is desired, it should be encoded as such and made available separate from the HTML... I don't agree.

Take Microformats, for instance. Say you're already displaying Events somewhere on a site; to add Microformat support all you do is add a few attributes to your existing mark-up and any Microformat-aware browser can properly recognize it. Sure, you could create another file entirely that contains XHTML specifically created as a Microformat, but that would be redundant and not nearly as helpful to visitors.

Or, say, a sitemap. Many times it makes sense to have a completely separate XML-based Sitemap for, say, Google. Then again, what if you just added the requisite semantic mark-up to an existing sitemap, one your visitors can use, but so can Google? You basically get two for the price of one.

RSS is a different animal and in most cases couldn't logically be encoded into the XHTML itself because you wouldn't have every RSS item on one page, etc. That's why the <link> tag is used to include it in the source, just like you include Javascript and CSS and so forth.


2. that's what xhtml is all about isn't it? like xml + html? so then you're already encoding xml when you write xhtml, so proper semantic should be important.

At least that's what I think, may be misunderstanding the whole thing.

Also, HTML 5 and XHTML 2 seem to be emphasizing semantics.


I think this is spot on - with a macro system generating pages is orders or magnitude easier/more consistent/better/etc.


Yeah, maybe my kids will have the luxury of coding with CSS tables.

Think of the kids!


About time. Maybe now a lot of people will stop using tables to define the site layout :)

I know it can be a pain to style a website with divs, but putting presentation inside HTML is definitely worse.


Users don't care if you use tables for layout. Sure, if you're nesting tables deeply then maybe it's an issue, but this "avoid tables at all costs" is a bit silly. Especially when the equivalent css is longer, more complex and far less compatible. Try doing some complex colspan/rowspan type things in css, with unknown cell widths etc.

There are more important things to work on :)


Initially switching to table-less design is harder. CSS has its own quirks in every browser that can drive a developer mad.

That being said there's a few very good reasons to use a pure CSS design.

More accessible: Specifically I'm thinking mobile phones and alternative stylesheets where "turning off" a table cell completely breaks the design. This is a breeze with pure CSS

Smaller File Size: Generally speaking, a site designed with CSS is smaller than a site designed with tables

Efficient Caching: External stylesheets will cache speeding up response time for the user. For an eCommerce site every second is key.

SEO: Some may argue with this, but presenting important content first is just one of the many factors involved with on-page SEO. This is accomplished quite easy with CSS and absolute positioning.

Faster Updates: I find updating a CSS design to be much quicker than a design nested with tables. Want to completely change the look of your site? Modifying only the CSS you can get some impressive results (http://www.csszengarden.com/).

For a programmer the time spent ironing out the initial kinks can be spent better elsewhere. But for designers its necessary in this day and age to use and understand table-less designs.


Please not another advocate that uses CSSZenGarden.com as a reference. It's a great 'proof of concept' but it no longer impresses me or means anything in the real world.

Show me YOUR site, and how it can be completely changed with just a flick of the CSS switch and I'll be impressed.

Most (arguably all) CSS designs are built to accomplish 1 layout and 1 design.

Now, for more simple changes, like fonts, colors, and small layout changes CSS is the tits.


Oh, I only wish I was still running my style switcher.

11 totally different layouts, all using the same mark-up, all with their own unique stylesheet.

Just because some people find it hard, doesn't mean it can't be done.


Yes, another advocate of CSS Zen Garden. Its the best available example to display the power of stylesheets.

Here is my site: http://www.bradjasper.com/

As you can see, even though the header is presented first the the stories are all first in the source. This touches on my SEO point earlier.

Show me YOUR site, and how it can be completely changed with just a flick of the CSS switch and I'll be impressed.

Let's switch the sidebar from the right to the left.

#inner { float: left }

#sidebar { float: right }

Granted that's not completely changed, but its enough of a change to show the effect I'm going for.


CSSZenGarden cheats by using images for text...


http://boston.conman.org/

If you are using Firefox, you can use the "View->Page Style" menu to select the various stylesheets (all, except for the default one, is a type of April 1 joke).

Also, if you check the source, you'll see that the main content appears first, with the extraneous stuff (navigation, obligatory links, advertisements, etc) appear at the bottom of the page.


My major complaint with a table based layout isn't a semantic one, it is a pragmatic one.

Put a colspan or rowspan in your html and you've coupled your design/layout to your markup. Still though, it is often easier to make this compromise.

The hope here is that we ultimately get the best of all worlds. Easy grid layouts AND markup/presendation decoupling AND strong semantics.

jQuery's John Ressig may speed up the day that comes: http://github.com/jeresig/sizzle/tree/master http://meyerweb.com/eric/thoughts/2008/10/22/javascript-will...


It may be true that you mix semantics when you mix tables and html, but you lose little if you do it while you use RoR/Django or any other of the frameworks where there is a central template because you still only need to make changes in _one_ file to affect the hole site.


Table layouts are tougher on users with screen readers. Aside from that I can't disagree with your points.


True also, of course, no point in being fundamentalist :). In the end it basically depends on what you want; If you want flexibility to change everything in your site in regular intervals, then I wouldn't advise relying on tables a lot :)


Well it also depends on wether your write all your layout by hand and do all that nesting, or if it's just the end product of your code executing.

For example say you're doing something in PHP and you have a function that spits out a table, then for one of the cells it calls another function that spits out a table.

That is pretty manageable in terms of maintainability, and ease of changing things.


Agreed, but if you want a designer to take that layout and change it to something else, I'm betting that he will have a really hard time dealing with PHP ;)


putting presentation inside HTML is definitely worse

I think of HTML like I do assembler it's something for computers to read. I write code that generates HTML, but I don't work at that level. Data, Presentation, Layout, and Binding are all separate parts of the code base.

PS: Some of our site was generating images that users clicked on we then mapped that click back to a location and sent a new image. We updated the Presentation code and it's now using Tables and nothing else changed.


Yea like arc . Oh wait.


I like this, because I always thought that tables for layout were a lot more intuitive than the mind bending stuff I have to do with css to get a layout to look right. Semantic markup is nice for the flexibility, but I have always struggled to understand css.


IE6 has been phased out fairly quickly for IE7 and I'm sure IE8 will come in just as fast.

CSS seems like it's here to stay and it will still be around when it's finally fully implemented.

This is good news for web designers everywhere.


Lots of corporations still stick to IE6, and the fact that they put it under the "genuine advantage" wall made it that upgrading to IE7 wasn't as easy & automatic as it should of been, much to the dismay of the internet.


Thank God. I think CSS wastes a lot of good behavioral design time with the way it's implemented right now. Hopefully these upgrades will change that.


It would go a long way if MS would retro this into IE7 via a browser update. IE6 is slowly being moved from, but IE7 will be around for years to come.


i think the best thing about tables design is that you can design something to work on multiple platforms and to flow better.

when using tables you are stuck to the resolution you are designing for, but in a good table-less design you can accommodate a number of form factors, which is important in the emerging mobile device platform.


And it'll be six years before IE somewhat supports it. And another five for the majority to upgrade.


The point is that IE 8 does support this. But, it will be at least 5 years before a majority of users have IE 8 :(


That seems to be an overly pessimistic estimate.

IE7 Was released almost exactly two years ago and it already has 45% market share (compared to 25% for IE6). Next year it is likely that over 50% of users will have either IE7 or IE8. I think a slight majority of users will probably have IE8 in 2010, and a significant majority will have it in 2011. I expect Microsoft to push IE8 more vigorously than IE7 because IE8 is significantly more secure (on paper, at least) than IE6 and IE7.


You're probably right. What I really meant to say was that it will be at least 5 years before the numbers of IE6/IE7 are low enough that anyone can afford to drop support for them. We're going on 7 years of having to support IE6 (although some sites are starting to drop support for it finally).


This will be good.

I'm really looking forward to the day that IE6/7 doesn't need to be supported anymore.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: