Table-Based Layout Is The Next Big Thing

The recently-launched SitePoint CSS Reference (and its print version, The Ultimate CSS Reference) contains extensive coverage of some of the more obscure areas of CSS. One such area that is going to become very important with the release of IE8 later this year is CSS tables.

For years now, enlightened designers who have embraced CSS layout have had to bend over backwards to produce complex designs that would have been trivial to produce using the HTML table-based layout techniques of the past.

The lengths to which designers must go to produce, say, a simple three-column layout using CSS techniques are so extreme that many web designers simply give up on CSS and resort to HTML tables for their layout. The Tech Times #142 and #143 were devoted to this issue.

With the release of IE8 coming this year, the stage is set for all that to change. IE8 will be the last of the major browsers to add support for CSS tables, which will enable designers to use table-based layout techniques without misusing HTML table markup.

To demonstrate this, I’ve produced the following 3-column page layout example using CSS tables:


View the example in your browser

This layout is hardly unique; what makes it special is how easily it has been achieved. Rather than using absolute positioning or fragile and counterintuitive floating techniques, I’ve produced it using relatively easy-to-understand CSS tables.

Each of the three columns in the layout is a <div> with a unique ID. From left to right they are "navigation", "content", and "sidebar". All three are contained within another <div> with ID "body".

The magic comes in using CSS to make these three unremarkable <div>s display as if they were cells in a table row. First, we set the containing <div> to display as a table:

#body {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
}

And then we set each of our three <div>s to display as a table cell, with the width we’re after:

#navigation, #content, #sidebar {
  display: table-cell;
}
#navigation {
  width: 200px;
}
#content {
  width: 66%;
}
#sidebar {
  width: 33%;
}

With the addition of a few borders and background colors, as well as a little padding to give it that final polish, we’ve got ourselves a perfectly usable layout.

A longstanding bug in Firefox makes it necessary to add a second containing <div> inside the "body" <div> and set it to display: table-row. Otherwise, the layout will often break when it initially loads.

Not only is this code exceedingly simple, but the result is also far more robust than your typical three-column layout achieved with earlier CSS layout techniques. Each column extends the full height of the page no matter which column has the most content, and the layout doesn’t fall apart at extreme font or window sizes. The layout just works—in the same way that HTML table-based layouts have always just worked.

As soon as IE8 is out and we can begin to justify leaving IE7 behind, we can start to use these simple and powerful techniques, since all other major browsers already support CSS tables. Suddenly, CSS-based page layout will be something almost anyone can understand!

Of course, we can’t just throw away current CSS layout techniques the day IE8 is released, can we? After all, IE7 and its predecessors will be around for years to come. If you want your site to look as good in those browsers, you’ll still have to break out the more complex and fragile layout techniques that work with them.

But if you can justify letting the experience slip just a little for users of IE7 and earlier, you may be able to minimize the amount of twisty CSS you need in your site. If you view the above example in IE7, for instance, you’ll see a simplified, two-column version of the layout that avoids the need to mix pixel-width columns with percentage-width columns, thus simplifying the code required to make the layout work in IE7 and earlier.

CSS tables will finally make page layout with CSS every bit as easy as the HTML table layout techniques of yesteryear. Barring support for older browsers, there will no longer be any excuse for designers choosing to abuse table markup for quick and easy layout work. And as shown in the above example, with a little extra planning, you should even be able to give a reasonable experience to users of older browsers while taking advantage of CSS tables in your layout.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Eric

    While I agree that the ability to use CSS tables may finally help those that abuse HTML tables for layout move into a more enlightened state of being, doesn’t this technique still fly in the face of good and proper web design? i.e. tables should only be used for data (or other table-appropriate information), not for layout.

    And IE8 should not be praised for finally adopting the ‘next big thing’. IE in general should be taken to task for it’s horrible support of web standards across the board. The so-called ‘next big thing’ sounds like the ‘next big lowest common denominator’ to me. Just another horrible ‘hack’ that force good designers to dumb down their code to make it ‘work’ in IE.

  • watershed

    Eric, I disagree. CSS tables are a display property – a design expediency – not a semantic property.

  • DC

    I agree with Eric, I wonder how many websites there will be in the years to come that use css tables where they should use html tables?

    I’d rather the browser vendors implemented a layout manager similar to java’s BorderLayout (like many of the javascript frameworks/toolkits have) e.g.

    body {
    layout-manager: border-layout;
    }

    .north {
    layout: north;
    }

    .south {
    layout: south;
    }

    .center {
    layout: center;
    }

  • Johan

    The release of IE8 doesnt cut it alone. Unfortunately we also have to wait for the majority of users actually installing IE8.

  • BreizFenrir

    Even though I am sure we will see CSS tables being abused here and there, I doubt this will be a common thing. To me, using the HTML table tags seems simpler (and results in a shorter code) than playing with div tags, and that alone should limit the CSS properties misuse.

    Another thing that makes me think this will not be a big problem is that, I hope, most professional web developers have a good knowledge of how things should be done, even if they currently have to make trade-offs because of the way today’s browsers behave. As for non-professional, most of them are using platforms like Blogger or CMS such as WordPress, which we can hope use pretty clean code and will evolve with the arrival of IE8.

  • watershed

    Let’s hope Microsoft push IE8 through with an automatic update that doesn’t require Windows Genuine Advantage, as they are now doing with some success with IE7.

  • Stiles

    The table did not display properly in FireFox 2.0.0.12. The third column displayed underneath the first 2 columns. However, in IE7, it did display like you said it would with the navigation at the top spanning the other columns.

  • Loveanie

    Hi,
    I don’t know if I’m the only one, but the page looks great on Firefox 2, Opera 9.2 and even in the old Netscape 7… but it just doesn’t want to open in IE7…

    Not just a two columns layout with the navigation at the top like in the screenshot… but really a “Internet Explorer cannot show the page” message… both on my desktop and laptop…

    But, it works as expected (i.e. two columns) in IE6!

    Maybe it’s due to the fact that the code looks for:

    “<!–[if lte IE 7]>”

    It doesn’t seem to include IE7… tough it should.

  • watershed

    BreizFenrir, you’re missing the point. Mark-up should begin with a semantic approach. CSS can then impose upon that as the design warrants, not the other way around.

  • Loveanie

    Hmmm, don’t know what happened… but after 5-6 tries, it finally opened as expected in IE7… strange.

  • http://www.heulog.co.uk cymrojazz

    I am also using FireFox 2.0.0.12 and it displayed as Stiles said? Que pasa?

  • http://www.kevdev.com KevDev

    I know it would be business suicide for most of you to do so, but I don’t bother with supporting IE at all (I can get away with it on my project). It would be nice if all web developers could get together and, at midnight, shut off support for non-compliant browsers; if it was done en-masse, users would be forced to use the right browsers and life would be good.

    Kev

  • bpalmer

    Tables (for layout) are dead. This is just Microsoft’s way of resurrecting a dead method and empowering the untrained to do Web design.

  • ionix5891

    @watershed IE7 didn’t require genuine advantage verification for months now, you can install it easily on you pirated copy of windows without moaning

  • Steve

    It looks fine in IE6 but doesn’t display properly in FF.

    I have to take issue with your comment “The lengths to which designers must go to produce, say, a simple three-column layout using CSS techniques are so extreme”. It’s simply not true. Yes, learning CSS based layouts will take a bit of effort but we went through similar issues when we taught ourselves all the nuances of table based layouts. Spacer gif anyone?

    I work with guys that still use tables to lay out their content. I’m making an effort to teach them what I know. Once they see the benefits like improved display speed, quicker revisions etc they always want to know more. I help where I can but we’re all responsible for our own education. You have to be willing to put in the time to learn proper techniques and not just be looking for the easy way out – like using “a design expediency”. As professionals we have to keep honing our craft.

  • http://ratherodd.com Raffles

    I disagree with Eric in that “display:table” and <table> are the same thing (a fundamental misconception of what CSS does) but I can see where he’s coming from. It’s unfortunate that applying “display:table” should remind one of using <table>, but it’s probably the best name for it.

  • badotz

    In Firefox 2.0.0.12, the initial page loads but does *not* show 3 columns. Upon refreshing the page, the 3 column alignment happens. CSS bug?

    btw: it works fine in Opera 9.26

  • Tricky

    It seems as though the word “table” leaves a bad taste in designers mouths who have adopted standards based layout techniques (I being one of them). But the fact is littering your HTML with <table> and </table> tags is much much different than using display properties in css to get div’s to act like tables. The difference being that you are still separating content from presentation and users who use screen readers are hearing your site as they would with any other standards based layout.

    Also viewing your pages with styles disabled will still give you the same result whether you are using display:table-cell or float:left etc.

  • http://www.kinetasystems.com NikLP

    Doesn’t all this fly in the face of SEO and accessibility? Regardless of whether you’re rendering semantic html or not, the fact is, the ordering of the html needs to be “content first”, for screen readers AND SEO. Anything else is utter madness.

    I can’t see how this method helps anyone out; making the content first in the source, but appear otherwise on the page, is a technique achievable only by non-tabular CSS layouts surely?

  • jackew

    As with several others, I use a Mac 10.4.11 running Firefox 2.0.0.12, which was in use when I checked the site and found it not working properly. I did not think to refresh, but did a restart of FF and all worked as it was supposed to. Interesting, no?

    As for “tables” why not recommend that CSS use the term “columns” as in typesetting?
    The end result would be the same, but the semantic would be more concise.

  • Don Evans of Lazuli

    This whole conversation means little to those of us who do web work for vendors whose customers are still at IE6! My customer site information tells me that 94% are still in IE6, 1% in IE7 and the rest sprinkled through FF and others. Why do you think all those will suddenly bypass IE7 and jump to IE8?
    It all seems that the only interest in all this is with the techies that love new stuff.
    I gave up on ‘new stuff’ long ago when I found my customers viewers couldn’t see or use it.
    On another note, I agree that we should all get together and force MS to come to terms with standards acceptance!

  • ews_inc

    too bad that your three column design example above does not render in three columns (third column got moved down to start below the leftmost column) on my FF 2.0.0.12 on Leopard :) So much for that concept.

  • gihrig

    Yes, seems to be a bug in Firefox 2.0.0.12 on OS X (I’m running 10.5.2).

    The initial layout is broken, the right column (sidebar) displays below the left column (navigation). A page refresh fixes it, but interestingly, clearing Firefox’s page cache and reloading (not refreshing) brings back the broken display.

    This behavior does not appear in Firefox 2.0.0.12 on Windows 2000.

    One of the really great things about Firefox is that we won’t have to wait years for the next update, which might fix this bug!

  • http://www.loisreed.com LoisReed

    I’m sorry. I still don’t get all the fuss. Especially now that we can add padding and margins to all tags – what is the problem with a few table cells? Tables render the same in every browser, unlike css positioning.
    Is this fad simply to confound those who are not reading every new technique?
    My clients come to me because I build websites that are graphically complex. I need a technique that will not break apart anywhere.
    Sorry, I just don’t get why it is a problem to use one or two tables. CSS has been a blessing to rid us of spacer .gifs, and cells withing cells.
    As for the rest of it, divs within divs can get even more confusing.

  • ews_inc

    this article is worth reading I suppose, but when it proposes to change how we design pages and the concept doesn’t work on a very popular browser on an ever increasing popular OS… then the author isn’t really doing us a service… pls check your web design recommendation with at least the top 5 scenarios. As is, this article can’t be used by anyone designing a website for the masses.

  • davidfilmer

    There is also a problem in Firefox 2.0.0.6 in Windows. I have a screenshot on my website: http://davidfilmer.com/sitepoint.jpg. But a shift-reload fixes it. Strange.

  • palgrave

    From my point of view the purpose of a website is to look nice, work well for the end user, and make a profit.

    Anything that makes this easier is to be applauded. (Pseudo) academic discussions about what way they should be laid out according to theory are almost meaningless to me.

    Such a pity we are going to have to wait. Most of the people who look at sites I have some control over are still using IE6.

  • Josh

    This layout falls apart in Firefox 2.0.0.12 @ 1680×1050. The second paragraph of text moves to the left side under the navigation because the nav doesn’t go all the way to the bottom. Is there a simple fix for this?

  • http://www.bartwebsites.com Romuba

    I have not only looked at the layout in a number of browsers, I have already put a small website together using this method and it worked find… up to a point. You can look at http://www.kbhs.bartwebsites.com/ to see what I have done.

    I think that perhaps the use of the word tables is what is causing the upset, but these are just like divs which we have been suing for a while. I think this is great.

    For me if something can make my job easier I am all for it.

  • David

    I have the same problems in FF 20.0.12 on WinXP SP2. Reloading fixes the display.

  • http://charlessweeney.com Charles Sweeney

    Interesting article. I suspect though that we will still need to use very old-fashioned HTML table layouts for HTML email for a long time to come due to the way email readers lag behind browsers with their poor support for CSS.

    In any event, it’s only the CSS police who complain about using HTML tables for layout. You’ll never have a customer complain about it.

  • Prabhjeet

    I agree with Charles Sweeney that Customers never complain about Tables. This is true.

  • Alex

    Tables are still the best option for complex and robust page layouts. After all these years the simple 3 column layout still can not be done reliably with css. I can’t tell you how may ‘holy grail’ 3 column layouts I’ve seen and not one of them actually works as well as a table. Not to mention, to get that 3 column, doesn’t quite work right, layout you end up contorting 50 lines of css to get it. If it’s that hard to do it with css…it doesn’t work. The advent of css based tables is great…and in 10 years when the usage of IE 7 is below 1% we’ll be able to use it.

  • http://www.loisreed.com LoisReed

    Just now I got a call from a client who looked at the page in the Library (I am 30 miles outside of NYC – not in the sticks)
    The library still has all of the public computers running on IE5. The CSS layout blew apart.
    This is what you need to remember when designing – many people do not update their browsers.

    By the way – this blows apart on my mac OS X in firefox.

  • Eke Bartholomew

    You are right!!! I have a css floating code working well in IE6 and IE7 as well as in Safari 3.03 but does not display the rows in Opera 9.24 and Simbian PDA browser. But due to the fact that 76% of my site visitors use IE7 and below I have to leave the other people to their fate. But with this CSS-table and a little modification all seem to be well. I used the CSS table for all other browsers and modified the CSS for IE and it worked just fine.

  • http://www.yellowshoe.com.au/ markbrown4

    I’ll be using floats, as I don’t want browser-specific css in my layouts. table based positioning is still far-far away from being able to be used.

  • ckw

    Well I for one *would* welcome CSS table layouts because using floats to emulate grids is a mis-use of CSS as far as I’m concerned – square peg, round hole. In fact I went to the trouble of conducting detailed tests with CSS tables, the results of which were great. *Except*, there is no facility for colspan or rowspan on an element. Without this, IMO, CSS tables are pretty useless for layout.

  • http://www.tyssendesign.com.au Tyssen

    Doesn’t all this fly in the face of SEO and accessibility? Regardless of whether you’re rendering semantic html or not, the fact is, the ordering of the html needs to be “content first”, for screen readers AND SEO. Anything else is utter madness.

    I’m no accessibility expert but I’m on a mailing list populated by several people who are and I’ve read enough of their comments to know that content first is not essential for accessibility as long as you provide adequate skip links.

    And while it is true that SEs like the important content to be at the top, it’s not the most important factor in determining search positions and also won’t be such an issue depending on the nature of the content in your sidebars (and wouldn’t be an issue at all for two-column layouts where the sidebar is on the right).

  • http://www.yellowshoe.com.au/ markbrown4

    Using floats isn’t mis-using css, it’s just using a property defined in the specs that does what you are expecting consistently across browsers.

    When table based positioning in CSS has the same support i’ll welcome it also.

    There is not a single thing wrong with using floats in layouts, in-fact it is the best way to create column based layouts with CSS at the moment.

  • ShadowHawk

    I’m not a web programer. However, I can’t tell you how often I visit web pages written in CSS via FF or IE7 that the columns overlap, miss align, or context gets lost due to pages written for one size screen (I use wide screens).

    I’ve never had to complain about a table build web site.

  • http://www.sitepoint.com AlexW

    To me, using the HTML table tags seems simpler (and results in a shorter code) than playing with div tags, and that alone should limit the CSS properties misuse.

    BreizFenrir, everything you currently know is simpler than everything you don’t currently know.

    So unless you’ve decided against ever adding new skills to your repertoire, you are probably going to have to look at stuff that isn’t as simple as the stuff you already know.

    Secondly, how can the table code be shorter? The TRs and TDs have been substituted for DIVs and there’s no need for an equivalent of the TABLE tag. Not to mention no need for the normal inline COLSPAN and ROWSPAN typically needed in this sort of layout.

  • http://www.mikehealy.com.au cranial-bore

    It makes me mad to see how easy this stuff should be. All this convoluted floating and clearing is so much more complicated than it should be.

  • Mashed

    Its a pitty that the example doesn’t work in FF.

  • ProfessorDino

    I, for one, find the above technique as posted by Kevin Yank to be quite good. Not perfect–no CSS-based layout technique is, which is a fault of CSS itself–but about as close to perfect as I’ve seen to date. For that matter, I’ll gladly throw my hat in if you need help advocating this method. I teach web design myself, so I’m greatly intrigued by your example as trying to convince my students that positions and floats are a good idea is on par with chewing glass.

  • http://www.billbolte.com bbolte

    no workie for me either in FF 2.0.0.12 (WinXP), even with a refresh.

  • Brent

    Okay, so there are pros and cons to using both html tables and CSS. I design using both where appropriate with no (none that I’ve yet seen) cross-browser discrepencies in appearance. I find the use of “table” in CSS an effort to cater to those who just won’t let table layouts go.

  • ckw

    @markbrown4

    Using floats isn’t mis-using css, it’s just using a property defined in the specs that does what you are expecting consistently across browsers.

    floats were not designed for producing grid layouts – it is an overly complicated process to achieve a grid with floats, hence my view that it is mis-using floats to produce layouts.

    And I still think the biggest issue is that grids need support for colspan and rowspan to be truly useful when producing layouts.

  • Paul

    Maybe its just me, but the page displayed as only 2 columns in Firefox 2.0.0.12, with the sidebar being displayed below the Navigation column!

  • Archie

    But the test page renders correctly in Firefox 2.0.0.12 !!!

  • Stevie D

    Doesn’t all this fly in the face of SEO and accessibility? Regardless of whether you’re rendering semantic html or not, the fact is, the ordering of the html needs to be “content first”, for screen readers AND SEO. Anything else is utter madness.

    I used to be an ardent proponent of “content first”, but having read a report on AT users, the consensus was that the most important thing for people using screen-readers and other AT was consistency across sites. They might have preferred that all sites put content before navigation, but it was more helpful for all sites to be the same. Navigation first has become the de facto standard, so AT users can orient themselves quicker if people follow that standard, with skip links if necessary.

    And while it might make a small difference in SEO terms, I haven’t seen any research that shows there will be any significant difference in ranking for a content-first or navigation-first layout.

  • Jason

    This is an interesting concept, but definitely not the ship to jump aboard quite yet. Depending on where you look, IE still controls 75% – 88% of the market share for browser usage and roughly 35% of those people are still using IE 6. Sure its fun to develop on the edge, but when it comes to professional production, you cannot abandon standards and accesibility.

    Side note: The table does not display properly for me in Firefox 2.0.0.11 or Flock 1.09 which runs Firefox 2.0.0.12 for its backend.

  • EChandler

    I previewed your layout in the mac version of Firefox 2.0.0.12 and it was only two columns.
    You may want to do some more testing. I also agree with other comments that tables are suppose to be used for data not layout.

  • http://www.mikedesign.net/ mauteri

    this looks like a layout concept that we can all start using without hesitation in a few years. personally, i have no problem getting my three columns to line up properly. yes, i wanted to pull my hair out getting there, but if you think about it, you only have to do it once and can apply that part of your stylesheet to all 3-column sites that come later.

    of course, the other advantage you have with tables over divs (other than ease of putting it together) is when you put background colors to one of your columns, so that even a short columns will go to the bottom of the page with the background and not stop where the content ends. at this point, divs don’t do that unless you use a background image in your wrap div that gives the “illusion” of it, or do what i did once and use javascript to control the lengths of your columns (not recommended).

  • http://www.sitepoint.com/ Kevin Yank

    Fixed the Firefox issue by explicitly adding a <div> with display: table-row instead of relying on the browser to add a virtual table row to contain the table cells. This is necessary due to a longstanding bug in that browser.

  • http://www.martin-fleming.co.uk AlphOmega

    This to me means one day the eventual end to floats with negative margins, and an easier life!

  • neildonald

    this is great news. if there is a reliable way of having three column layouts which a) can expand the middle bit to fit the page and b) not require testing with every release of every browser then it’s good news. OK it can be done at the moment but anyone who likes producing clean, maintainable and readable CSS will shy away from the likes of the “A List Apart” article (and its many clones).

  • tbee

    Hey Kevin,

    I just finished my “Sunday morning” rant to my colleagues; it was based on your article and the though sequence and resulting conclusion was interesting.

    Basically it came down to this: if we’re trying to rid HTML from layout information, what are all the meaningless DIV and SPAN tags doing inside my HTML? We now have tags-for-layout and tags-for-content.

    So I opted for sending a content-only XML/HTML to the browser accompanied by an XSLT to add the layout. In this way there is a true clean separation. But this also means that in the end HTML you can use table-for-layout again and there is no real reason to move it to CSS! Naturally CSS still gives you reusability and bandwidth savings, but the semantical reason not to use table is not valid then, IMHO.

    Taking semantic content in the web it one step further resulted in me complaining that my content loses meaning, because the content is still build up using HTML tags like A, P, TABLE, etc. So in the content I have a text “Tom” which is sent next to the text “first name”, probably inside a table, but there is no semantic connection between the two. It would semantically be more informative to have send <firstname>Tom</firstname>. Then the content would have much more information!

    This, as I understand it, would result in the “sematic web” (see wikipedia), but without standardization it would be next to impossible for search engines to index these documents. For example: in the clean-but-HTML-based-content a link that ends up in a menu would be present as an anchor (“A” tag). In the XML-content it may be present in a totally randomly named tag which denotes its meaning, e.g. “importantExternalLink”.

    My end conclusion was: if we’re trying to purify the HTML that is being sent in terms of semantic meaning of the tags, then the whole CSS discussion is only a halfway solution. If we’re trying to clean things up, then let’s do it as it should be done. What that in the end means, I’m not certain.

  • http://www.sitepoint.com/ Kevin Yank

    Hi tbee,

    Basically it came down to this: if we’re trying to rid HTML from layout information, what are all the meaningless DIV and SPAN tags doing inside my HTML? We now have tags-for-layout and tags-for-content.

    The <div> tag (as well as its inline equivalent, the <span> tag) are defined in HTML as having no semantic meaning. There are intended exactly for adding styling hooks to HTML content. Thus, adding them to the document provides the elements you need to apply styles to the page without polluting the document with invalid semantic information (as you get with <table> tags).

    So I opted for sending a content-only XML/HTML to the browser accompanied by an XSLT to add the layout. In this way there is a true clean separation. But this also means that in the end HTML you can use table-for-layout again and there is no real reason to move it to CSS! Naturally CSS still gives you reusability and bandwidth savings, but the semantical reason not to use table is not valid then, IMHO.

    I disagree. Yes, sending XML content achieves a clean separation from content and presentation, but who is going to be able to access that content? The value of having semantically meaningful HTML is that HTML is a semantically meaningful standard that many tools understand. Tools like screen readers and search engines can read and understand HTML content. They cannot read and understand your custom XML content format.

    Taking semantic content in the web it one step further resulted in me complaining that my content loses meaning, because the content is still build up using HTML tags like A, P, TABLE, etc. So in the content I have a text “Tom” which is sent next to the text “first name”, probably inside a table, but there is no semantic connection between the two. It would semantically be more informative to have send <firstname>Tom</firstname>. Then the content would have much more information!

    Or you could just use the semantic features of HTML:

    <tr><th scope="row">First name</th><td>Tom</td></tr>
  • Oscar

    Well, tables are -to me- a very easy, effective and robust way to layout a web page; but experts say us ‘now you do it with DIVs’, their reasons looks fine. So but when a method to layout a web page remind me an old way to do the things well, to me is impossible don’t draw a smile in my face because it’s, after all, an evocation (or invocation?) to a depracated way to do the same.
    I test your script with updateds FF, Navigator, Opera, Safari, Flock, it run without problem in all them (it’s true, 3 of them are birds of the same flock); with IE7, it fails (no surprise because IE sucks).
    Your script and your article are nice, now I dream of the day when this technique could be massively applied or IE dissapear, what happen first.

  • tbee

    Hey Kevin,

    Let’s work up the discussion:

    The tag (as well as its inline equivalent, the tag) are defined in HTML as having no semantic meaning. There are intended exactly for adding styling hooks to HTML content.

    Right. This usually is when my sarcastic side comes out :-) So as long as someone tells you it is ok to have these weird plants growing on the addict, and tap the powerlines directly, then it is?

    Either we rid the content from all layout and bolt it on later on, or we don’t.

    I totally agree with the “better do something than nothing”, but if we’re in the process of making changes to the standard, then I’m for “let’s do it right”.

    but who is going to be able to access that content? The value of having semantically meaningful HTML is that HTML is a semantically meaningful standard that many tools understand. Tools like screen readers and search engines can read and understand HTML content. They cannot read and understand your custom XML content format.

    Well, the XML is accompanied with a XSLT to convert it into HTML. Thus you get both the clean content and the converted one. Yes, the tools must be able to transform them, but XML and XSLT and common libraries now and it is easy to do that. So I do not consider your point a problem.

    Or you could just use the semantic features of HTML

    Ah. Didn’t know that exists, but my first reaction is: that is the world backward! Again: the need to layout stuff overrules the actual data here. It is first rendered in a table and then the semantics is bolted on. What is more important?
    By using the XML/XSLT approach you get semantics first and layout second. Content related tools can directly examine the content, readers can work with the rendered-version. Both from the same source.

    I would like to repeat that my issue is not with HTML, but with the effort being put into the whole CSS thing. If I really think it through, it seems like a midway solution and I always het to put effort in something that is only half of what I actually want.

    Tom

  • Stevie D

    Basically it came down to this: if we’re trying to rid HTML from layout information, what are all the meaningless DIV and SPAN tags doing inside my HTML? We now have tags-for-layout and tags-for-content.

    The difference is that [div]s aren’t layout information. They are hooks for layout, but that is all. You could redesign the page for a completely new layout just by changing the CSS, without altering the HTML at all – the [div]s are endlessly versatile. That isn’t true for [table]s, where the HTML is inextricably tied to a particular layout.

    Taking semantic content in the web it one step further resulted in me complaining that my content loses meaning, because the content is still build up using HTML tags like A, P, TABLE, etc. So in the content I have a text “Tom” which is sent next to the text “first name”, probably inside a table, but there is no semantic connection between the two. It would semantically be more informative to have send [firstname]Tom[/firstname]. Then the content would have much more information!

    We have to have a standard set of tags and ‘meta’ information about the content to make it manageable. As Kevin says, you can use [th], scope and [td] to associate data with a label – or if that’s not appropriate, you can use [dfn] or [dd] and [dt]. That gives information that is both semantically correct and human-readable, which a [firstname] tag wouldn’t be.

  • tbee

    Even though I completely understand the all arguments, IMHO it misses my point. The concluding suggestion was to send XML/XHTML and a XSLT. XML/XHTML totally without any layout information; no tables-for-layout, no divs-for-layout, no CSS, only actual content and thus no discussion about anything layout related.

    Now, if you want to show that XML on a screen, then you pull it through the XSLT and voila. But! The result is for display, so please do not complain about any layout stuff being present. If you don’t want the layout stuff, use the content file.

  • http://www.sitepoint.com/ Kevin Yank

    tbee,

    Your proposed solution hinges on the adoption by tools of a standard for where to find semantically pure markup (i.e. you un-transformed content) and where to find the presentational markup (your transformed content). This would take years to come about in any useful form.

    The standard for separation of content and presentation is already here, and has already been adopted by accessibility tools. It’s the XHTML/CSS divide.

    You can argue that CSS is less convenient/useful than presentational markup would be—and having used XSL-FO (a print layout markup language) to lay out all of SitePoint’s books I agree there is an argument to be made there—but any such argument is bound to be nothing but an academic one for the foreseeable future.

  • altjeringa

    Wow only about 5 years to late. I remember using these properties with Safari 5 years ago only to have to abandon them because IE didn’t support them. Another example of Microsoft retarding innovation.

  • tbee

    Your proposed solution hinges on the adoption by tools of a standard for where to find semantically pure markup (i.e. you un-transformed content) and where to find the presentational markup (your transformed content). This would take years to come about in any useful form.

    I understand, so the step towards true semantic XML is one bridge too far. However, sending an XHTML document with content-only HTML tags would be ok and perfectly (even better?) interpretable by search engines and reader software. After all: it is valid HTML and totally not garbled by layout.

    And I know for a fact that IE7 can do XSLT, and so can Firefox and Opera.

  • Niels Matthijs

    Ah well, nice article, although some things need to be added:

    * css3 will give us a special way to handle columns, one that (luckily) doesn’t mimic a table.

    * the problem with tables is that the td cannot be positioned relative, which is the same for the css declaration as far as I’m aware. This calls for extra unneeded wrapper divs.

    And those people complaining about css and layouts … if you would just learn how to use it, you’d see it’s not any more or less trouble to do a layout in css, it’s just more semantic.

  • tbee

    @Niels Matthijs: I tried, several times, and each time with more vigor. But as soon as I need to start using “hacks” to get CSS to work, especially cross browser… No thank you. I’ll wait for a solid solution. Like this table-layout.

  • http://www.tjkdesign.com thierry koblentz

    This is an example that uses “CSS table” + “display:inline” with “zoom” for IE. It makes the solution more browser-friendly:

    http://tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp

  • http://www.tjkdesign.com thierry koblentz

    This is an example that uses “CSS table” + “display:inline” with “zoom” for IE. It makes the solution more browser-friendly:

    no float, no clear, no joke!

  • http://www.elinity.com vozny

    Current techniques allow to place the left navigation bar after the content in the mark-up. This is sometimes required by semantics. Can tables do that?

    I think, for designers it would be more useful to have mixed units in widths and heights, like 100%-200px, etc., and multiple backgrounds.

    IE6 is still alive, so how much would we wait until IE7 dies? I don’t think you will be able to sell your client having IE7 the markup that just displays one cell incorrectly.

  • alastc

    I’m still not convinced that using CSS table properties has any advantage over just using minimal tables, especially when position:relative is nullified.

  • andrew

    Current techniques allow to place the left navigation bar after the content in the mark-up. This is sometimes required by semantics. Can tables do that?

    Yes, they can. It’s a hack, but it is sometimes used in SEO. Not sure why one would use it for any other purpose however.

    Anyway, my opinion is that the technology (tables/CSS) should not be as important as other goals – accessibility, standards and ability to display a site the way the information architects and designers wanted.

    Tables win anyway you look at it. Sorry, but tables are _standard_ (work everywhere – de facto standard) while CSS with regard to page layout is not (hacks needed even for simple requirements).

    When the CSS tables are standard and widely accepted, I will use them. Until then I will use the technology that works.

  • tbee

    When the CSS tables are standard and widely accepted, I will use them. Until then I will use the technology that works.

    +1

  • alastc

    When the CSS tables are standard and widely accepted, I will use them. Until then I will use the technology that works.

    That’s like saying ‘a hammer and nails always work, damn these newfangled screw things’.

    True, but lacking in elegance. Tables are for tabular data, according to the HTML standard.

  • Anonymous

    I got curious when I was reading the title of this article and owning a few sitepoint books myself which are quite good – i expected a good discussion.

    I was wrong.

    Surely the title of the article is a bit misleading. I wouldnt actually call it “table based layout” since it leans itself to the “old way” of doing things…

    but saying that using tags for layout is the way to go is simply wrong. Yes its easier for you, but only because you never learned how to use css properly. divs are so much easier, even floats and clears are ok. they can be a bit of a pain from time to time, but it pays off in the end.

    if you are comparing to the css display:table – you don’t even understand semantic markup and shouldn’t be part of this discussion. the should only be used for tabular data not for layouting an entire webpage. (in the zoo, you don’t put a “stop” up, just because the “beware of lions” sign is a bit more complicated to get…) markup comes first – then you worry about styling it…

    to be clear: the display:table you can use with a div – but it doesnt make it a table. it is still a div container.

    “the clients dont mind if i build it in tables”
    of course not – they wouldn’t be able to tell the difference anyway. you are most likely building websites for small to medium businesses that want to get something only. ask a government agency or global player and they will give the job to the person that can actually build proper websites (xhtml and css according to AA accessibility standards)… from the average table based website I can strip the page size down by 50%, talk about saving bandwidth and associated costs – not to mention customer satisfaction of the actual users when everything loads in half the time…

    and have you guys ever tried browsing the site with a screenreader (aka use it as a disabled person). now you will probably say – they are not our customers – which is fair enough, but bloody awful way of discriminating. you may not have the budget or time or knowledge to build it perfectly accessible, but you should make an effort.

    so much for now… happy to more hear reasons for using structures if you have some…

  • tbee

    happy to more hear reasons for using structures if you have some

    You missed the main argument, in essence: if one needs to resort to hacks in order to get it to work [cross-browser], then you better stick to simple and proven technology.

    i expected a good discussion

    BTW, my discussion, a few posts above, is all about eliminating even the meaningless but still polluting layout-only tags (like div). Is that what you were looking for?

  • www.danelsherson.com

    There is no need to wait for IE to come out and be widely accepted, now we know what version supports display:table, we can use conditional comments ( lte IE7) surrounding an actual table, and divs with /display:table-?.*/ sure the conditional comments might look ugly, but less ugly than some of the css/html hackish things (that usually require conditional comments anyway.) screenreaders, spiders, and good browsers get semantics, and sucky browsers get tables. everyone wins. you can even give the same ids and classes to your divs and table tags for styling of the typography and colours. like…
    #main{ /*rules*/}
    table#main{ /* table specific rules*/}
    div#main{display:table; /*and other rules*/}

  • Aravind

    big thing? never! i don’t think developers use anything which is absolutely not browser compatible!!!

  • watershed

    Anonymous, absolutely right.

    It’s not that hard to build in good accessibility if one simply cares enough to learn.

  • Jawad Shuaib

    This is awesome! Unfortunately, it will be a few years before it will be “safe” for developers to use such techniques :)

    - Jawad Shuaib

  • Anonymous

    happy to more hear reasons for using structures if you have some…

    You missed the main argument, in essence: if one needs to resort to hacks in order to get it to work [cross-browser], then you better stick to simple and proven technology.

    sorry that was misleading – I was just asking for a discussion, like if you feel you need table tags for layout, give a reason so we can give you reason not to :) hacks are a bad way, but conditional statements for IE are half as bad I think. if you just rely on simple and proven technology like html tables, you will end up with a lot of unnecessary markup, which is not the right solution either. it’s a thin line and there’s no absolute right or wrong. so yes keep it simple and dont use hacks, but we also need to push technology, otherwise we won’t see any progress… Remember Henry Ford: “If I had asked people what they wanted, they would have said faster horses.”

    BTW, my discussion, a few posts above, is all about eliminating even the meaningless but still polluting layout-only tags (like div). Is that what you were looking for?

    yep that’s the way to go. but again that is something that i found is handled consistently across browsers, especially for “pixel perfect” layouts… but in general i get away with simply sectioning off certain areas like header, sidebar, nav and footer and putting them in as div. the rest is all meaningful tags.

  • Animal

    If it is tabular, then why the phobia about the tags?

    Seems like a pointless hack making divs behave as table cells.

    Like using a and setting its display style to “block”.

    Why?

  • Animal

    OK, HTML is allowed… then

    Why the phobia bout <table><tbody><thead><tr><td> tags?

  • Animal

    Oh, like using a <span> and setting its display style to “block”

    (Sheesh… what a crap comment system!)

  • Anonymous

    Tables were never intended to be used for the layout of a webpage. They are intended for displaying tabular data. And no matter what happens, you will ALWAYS need to create hacks for IE5,6,7,…,N.

  • Hannes

    Don’t praise Microsoft. Keep using Firefox, Opera etc.

    Microsoft probably will first support current standards, then they gain the majority of the market and then… guess what.. they’ll starting making up standards themselfes.

    So please… IE8 is not that big of a deal to wait for.

    But I like the idea of CSS tables. I’ve used them before but IE does not support them. Divs are just so easy to brake :(

  • Anonymous

    If it is tabular, then why the phobia about the tags? Seems like a pointless hack making divs behave as table cells.

    not really, since the div merely helps to group things together. again listen to screenreader reading a tablebased layout – at that point you will see why you should use correct markup.

    Like using a and setting its display style to “block”.

    well, no thats not the same. setting display to block is actually quite helpful (eg. in the navigation). you will increase the clickable area, making it easier for the user to click without problems. it helps the usability of the site…

  • Phil

    I’m confused by all this talk of CSS column layouts being difficult. I have been doing them for the past couple of years cross browser without problem. Table layouts plain sucked and almost caused me to quit working on complex layouts. Tableless design has been far simpler, faster and more reliable. If its causing such a huge problem to layout with CSS maybe its just a lack of studying the subject. Table based layout didn’t just come to us in our sleep so neither will CSS.

  • IChao

    There are voices who say you should not use tables for layout. But have a glance at CSS2.1:17.1 Introduction to tables:

    Table layout can be used to represent tabular relationships between data. Authors specify these relationships in the document language and can specify their presentation using CSS 2.1.

    In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.

    There is a difference between a HTML-Table and a CSS-Table, the first depends structurally on the document language, the latter is part of the presentational layer by the display-property.

    And you could use them now: I’ve used the technique Thierry described a few posts above and it was pretty robust – the client threw in his CMS-non-standards-content-you-know-what-I-mean without problems. I know this wouldn’t be that easy with float layouts (the position problem inside tables aside).

    But.

    Actually the “display:table-cell for conforming browsers plus inline-block-hacks for IE”-technique shows that the inline-block property is able to mimic table-cells for most layout purposes in IE.

    Inline-blocks are superior to floats for robustness, and they are able to self-align, and you can easily align or center them horizontally and vertically. They have no problems with positioning.

    Inline-block could be used as the main property for layout. The fixes for IE are known for years, its not IE we were waiting for.

    So the news for layout is not: display: table in IE8.

    The real news for layout is: display:inline-block, finally, after all these agonizing years of stagnation, arrived in Firefox 3 !

  • http://www.tjkdesign.com thierry koblentz

    The real news for layout is: display:inline-block, finally, after all these agonizing years of stagnation, arrived in Firefox 3 !

    You’re right Ingo, *that* is the big, exciting, news. But looking at the comments here, I don’t think people are ready for that either…

  • Anonymous

    I don’t understand what the obsession is with coming up with yet another way not not to use HTML tables! So rather than using a tag that was already there they would rather use div’s. How does this make life any simpler? You would probably use just as many divs as tr’s & td’s!! If you’re thinking the symantec web argument, don’t even bother. HTML is a Markup Language and definitely not XML or anything else. If you’re thinking of the whole layout change argument, how much less work would it be using div’s rather than re-arranging the table structure. Does it really save you or anyone else any time?

  • http://www.tjkdesign.com thierry koblentz

    If you’re thinking of the whole layout change argument, how much less work would it be using div’s rather than re-arranging the table structure. Does it really save you or anyone else any time?

    The point is not even related to the time it would take to change the layout, but to the fact that with DIVs there is nothing to “re-arrange”, there is nothing to modify in the markup.
    The layout is modified through the presentational layer (CSS), the structure of the document does not have to be changed to allow a different layout (as long as the HTML flow is not an issue).

  • alastc

    “How does this make life any simpler?”

    If you view it from a purely selfish point of view, you’re right. However, if you care about who uses it (or simply doing good work), you’re wrong on each count.

    You would probably use just as many divs as tr’s & td’s!!

    If you used a hybrid (minimal table) layout, tables don’t use much more, however, if you are using tables for layout and do a complex design, putting presentational markup quickly swamps the page.

    If you’re thinking the symantec web argument, don’t even bother. HTML is a Markup Language and definitely not XML or anything else.

    There is more of an argument for HTML than XML! User agents are supposed to treat tables as tabular data, not sections of a page. User agents don’t have a clue what a random XML element might mean.

    If you’re thinking of the whole layout change argument, how much less work would it be using div’s rather than re-arranging the table structure.

    As well as Thierry Koblentz’s point, you don’t have control over the source order when using tables.

  • Whiggish59

    thierry koblentz – Great site.

    After reading the entire list of posts, it seems there are a lot of people struggling to use CSS and DIV tags for layout. Conditional comments are preferred over hacks. External control of layout is preferred over the use of mark-up tags. “Content first” is marginalized over consistency.

    I am frustrated by browser differences, but I don’t see the conflict ever going away. IE6 will not load on Windows Vista and I hear that IE7 will not load on Windows 2000. There is proprietary software that mandates the use of IE for communication, like in the Mortgage biz, so until those industries embrace FF … . Windows 98 is no longer supported, so we should see an influx of new users of IE7 or IE8 over the next year or so. Windows XP will be supported through 2014 keeping IE6 alive for another 6 years. And who’s to say that web standards will not change rendering the current beta versions non-compliant almost immediately after they are released?

    Is it worth it to go through the pains of making the sites look good on all browsers? Only as far as the money goes.

  • Mike

    The div element offers a generic way of grouping areas of content. Much like your company letterhead that you’d issue a press release on, the div tag can separate heading information from main content from footer information. The semantic meaning of the div is separation. It just so happens you can leverage that to satisfy your design layouts using css, but at its foundation the div tag is not a layout tag.

    As far as using css to emulate an html table, if the markup is sound and semantic then who cares what the css looks like or how many css hacks you used to get your layout to work?

    And as far as using tables for layout, I’m realistic- it’s not yet a perfect world and I know there are deadlines which mean compromises must be made. But if you don’t comprehend what I first typed at the beginning of this comment, then you really don’t understand web standards or what semantic markup is and I encourage you to jump right in and start to learn!

  • Bob

    The folks who have the instinct to snub CSS table-based layouts in favor of the insanely complicated hacks are the same sheeps who would inconditionally prefer to maintain obscure browser-dependent CSS code rather than compromise the “semantic-ness” of their markup by using table tags on non-tabular content.

    Ultimately, we just need a few popular CSS folks to blog to the unwashed masses that CSS tables are not taboo, and the clamoring will disappear overnight.

    /Baaah

  • TooLateForTea

    I always enjoy the chest-thumping of the CSS cognoscenti. There are so many reasons for the failure of CSS( badly described, overly complex specs, crap implementations, old browsers, etc. ) as a real solution the joke has become mercilessly sadistic.

    These people claiming it is easy are fooling themselves. “Oh, well *if* you just learned how to use it…” I call crap. Every layout, every damn page, renders differently and bizarrely if so much as a few bits of HTML are changed in IE browsers you can’t count on knowledge. Even in better browsers, to achieve all but the most basic, right-angled layouts, you have a soup of divs. Float hacks, and clearing hacks that must follow, ad nauseam.

    How about we scrap it and try using the power of software as it should be done. Advanced layout and control has been available for 15+ years with things like LaTex, PDF, and so one. HTML was great in 1994, for limited use of document transport, but today it is not. Look at all the time and money spent to produce things like Google Apps and such. Have you ever looked at the code behind it?

    No, HTML and CSS must be left behind as the Stone axes and tools of cavemen. Something like Flash that can do real layout, typography, audio, video, server communications, etc. is what is needed. You want SEO and accessibility too? No problem. Server text in a very simple format while user agents that are capable can load the binary Flash. Of course, what we don’t need is FLash and Silverlight as they are, controlled by single companies, but seriously…

    HTML and painful, tedious markup sucks. CSS and painful, unstable, unsupported hacks suck. Let’s move on to the future, shall we?

  • tbee

    In essence I totally agree: HTML is not suited for application development. It is intended for documents (I always called it digital leaflets, and make a strict distinction with applications, so clients know what I mean). And it is not without reason that there are so many developments in the RIA area. Application development should be done within a controlled environoment in order to achieve predictable behavior. And if there is one thing that webbrowser are not…

    However, on the other hand, HTML is much more light than Flash. I coded flash yesterday and it is unbelievable how often I have to drag out the OMG! and @#$@#%^%# and WTF! because something is not working as one would expect. I’m not a Flash expert, but I’ve got enough milage to be able to use my generic knowledge of movie creation, programming language and other techniques and Flash keeps baffling me (anyone tried to use that String panel?). Flash is not straight forward, with many buts and maybe’s from a programming perspective (keep selecting that actions layer), and IMHO due to this also not suited for application development. It is not without reason that Flex is created.

    But when using Flex, one quickly loses the sleekness which usually makes Flash applications stand out. It quickly becomes a good looking but fairly standard GUI application. Now, I’m not sure in what direction the future will lead us. IMHO Java (applets and JavaFX) has good cards for real application development because of its proven trackrecord in stability and available functionality, although it (unjustly) has a bad name in this area. But especially with the improvements in the upcoming release of JDK6u10, it could become a competitor again. On the other hand Flash has a proven trackrecord in GUI and sleekness, although I observed that the new Flash 9 player seems to crash very often. I still have to see what Silverlight and all other approaches will do in the end.

    In the end the RIA still is embedded in a webpage. And all the RIA platforms (Java, Flash, Flex, Silverlight, …) at the moment are too complex to quickly do some text and images. So in the end we still will be doing HTML and still require it to layout properly.

  • intellicode

    Every language and software technology serves it’s purpose to the extent that it was designed to. When I was a kid in the late 80′s there were tens of different types of BASIC that you could use to program a monochrome 386 running one of the many types of DOS, all had their limitations and advantages but in time came to the end of their functionality. With the rise of Windows as the dominant OS, application builders used more advanced languages such as C++, Java, VB and Delhpi etc to make their apps for the desktop.
    I say this to draw parallels between the past and present evolution of programming, web browsers today are few, do the essentially the same job but require tweaking code to display on each platform just like the DOS’es were. There are many different types of language today who’s prime use are as data handlers and assembly languages for HTML, similar to what BASIC once was for the Command line interface.
    In time the creativity of a language’s user requirements will surpass the original scope of its design, today there is no argument that we as designers/developers are pushing HTML towards its limits and ultimately as more highly interactive web based applications become commonplace there will be a need to move on.
    The big software companies realise this, the Adobe Flex/Flash/Air combo aims to cash in early on this transition and Microsoft no doubt to any follows wherever there is a potential to profit on emerging markets.
    The question in my mind is which combination of current technologies will survive the longest and can the software behemoths of the 90′s survive in an OpenSource future?
    Only time will tell… but for now it’s primarily a case of learning to use ones tools well, however blunt they may be.

  • Peter Shannon

    I’ve been coding web stuff for a while, had a break for a couple of years and come back, wanting to see the sate of CSS. Not really impressed so far.

    It seems great for getting rid of some cruft and for producing simple layouts but all the solutions I’ve tried for laying out moderately complex forms seem to horribly break far too often. Really whats the point if technology has so many poor implementations so widely used you can’t rely on it! Everybody keeps saying that it works if you know what you doing – fine but I haven’t seen a reliable way of making divs work for me satisfactorily.

    Stick with tables for forms, its only a couple extra tag, which for me are all generated by scripts.

  • Richard Cherry

    After 12 years of building web sites, using table-based layouts, then CSS i now move into a FLASH/.NET tier system.

    Microsoft, in .NET 2.0, has broken the tier-separation ‘purity’ by allowing data binding to happen in the presentation layer (ASPX file).
    Also, if one is to build a data-driven app with server-side controls that are called within the context of back-end methods (canonical form), then the complexity of maintaining a DIV-based CSS structure becomes really problemtic.

    Page maintenance is funky enough, what with having to do Inman position clearing, etc. or seeing your floats break the cosmetic rendering… so i moved into a FLASH front-end to avoid all this positioning nonsense..
    Admittedly there are issues of industry-acceptance of FLASH as a presentation layer, especially within conservative IT groups.

    APIs exist to serve as loadable assemblies that work seamlessly either with or without utilizing the FLASH component set or Actionscript coding.
    The actions of DHTML (innerHTML, for ex.) can be accomplished by building all pages as positioned movie frame elements and GoTo these pages/frames as indicated.
    Because .NET munges all C# code into Table tags when displaying data we can assume that HTML table/cell methodology will be around for awhile.

    Of course, these comments apply to Microsoft tools…and there’s the rub.

    RC/Binaryvillage

  • http://www.patricksamphire.com/ PatrickSamphire

    What convinced me to move away from HTML table-based layouts to CSS-based was my experience of having to convert a complex table-based website of around 600 pages to a new design some years ago. It was hell. In the end, I just had to dump the whole thing and redo the content from scratch. It took the best part of a month.

    When, a year ago, I had to update the same website to another new design, it took ten minutes, simply swapping the header and footer. Why? Because the CSS was well thought out.

    After that, I’ll never touch another HTML table-layout website. They’re not worth it.

    CSS table-layout? Now, that does sound more interesting.

  • http://jamiemitchelldesign.com.au/ Jamie Mitchell

    It just seems like a new way to do something old, CSS layouts are easy, and we now some fabulous open source frameworks available like blueprint and yui-grids, it is just so easy these days to produce something like a 3 column layout ( or any other layout) that works across all major browsers.

  • Bill Getas

    Neat idea: we require users to install firefox or chrome and explicitly ban IE users access. As usual when totally abandoning belligerent creeps: problem solved.

  • Tom

    No can do. Both firefox and chrome only support one session across all tabs and windows. From a professional usage point this su.., ah, is a bad thing. The only browser that has session management down is IE.

  • CSS Police

    Show me an example with flexible source ordering and I’ll believe this is a good idea.

  • HTNMMO

    It will take a while for IE8 to gain enough market share to justify this type of change.

    Here we are almost a year later and it’s still not feasible to implement css tables.

    By now, people have already developed ways to get around this and that’s going to stick. Just like people are still using table layouts.

    I prefer css myself and I’ve done tons of table based layouts and I’m happy to be done with them.

    I have a related post on how to align three column layouts so that your primary content shows up first in your HTML. For some reason many people have a problem with three column layouts. I can tell by how your page loaded that this sites uses a similar technique to what I described.

    You can see examples and instructions here:
    http://www.howtonotmakemoneyonline.com/2008/12/clean-up-your-html-code-to-improve-seo.html

  • Mikey

    Just finished reading the book – thanks, it’s great guys!

    I think it’s great that you can use tabular layouts without making your site inaccessible (for example, by misusing HTML tables). I also agree that using “skip links” are more accessible than assuming that screen-reader users want to access the navigation last (can be a nightmare on a long page!)

    I’ll be following all of the suggestions you gave, including providing an alternative layout for older Internet Explorer browsers (I had no idea it could be so easily achieved!)

    My only criticism is that you could have gone into more depth outlining the need to include “table” and “table-row” display values for correct rendering in some browsers.

    Great book and great article – thanks

  • sirCamelot

    we just need supported actions for CSS3 or 4 for divs to behave similar to tables when needed,
    where are tags like overflow:wrap to wrap my content to a width,height I specify and stretch the div vertically, float:center or float-index:1 in order to sort my float divs and easily make columns? Those who started designing CSS functions apparently weren’t web designers…

  • Onimok

    I think Kevin is really onto something big here. After years of web development using table based design in the 90s and then having to unlearn tables with the advent of web standards and now using css layouts this seems to me to be a perfect solution.

    CSS layout is a real pain to accomplish such a simple thing as a few colums with a header and footer, it’s ridiculous. Is the fuss really about the average person (non designer) being able to whip up the 3 column holy grail in a few minutes using css table layout where designers after much blood sweat and tears having to ditch all the painful learning curve experiences needed to produce the same thing? Time to move on I say!!

    The html markup can still be semantic and accessible using these layout techniques. I give it 2 years and everyone will be using this technique in some form or another for layout.

    It just makes sense.

  • STERZILLA

    @Jamie Mitchell on September 9th, 2008 at 11:43 am

    This is a new way to do something old, but that is where I part from your opinion. Layouts with div tags are NOT easy and intuitive when you are doing something nontrivial. Also open-source frameworks are great, but why should there be a framework for creating layouts? CSS is supposed to be the framework/standard that works across all browsers. We shouldn’t need the hack of a framework for a framework.
    CSS tables at least make it easier to vertically align text, but I don’t see how to span multiple rows or columns. (Not saying it’s impossible, just saying either I’m a bit dense or it is not intuitive, or maybe it is impossible…) =p