TILT! Tables sneak in the backdoor

Tweet

There’s been a lot written about using the DOM to retro-fit HTML to make to work and look nicer than is otherwise possible. Little did we know the dark force we were tinkering with. Pining for the simplicity of table-based layout, Dimitri Glazkov has come up with a cunning way to slip tables to the kids while their parents aren’t watching.

TILT, or ‘Table Injection Layout Technique’ takes a healthy, well-structured page of DIVs and refits an old-school table layout into it.

You can see it in action here. View the source normally and you’ll see the sent markup. But view the page in Firefox, hit CTRL+A (select all), and then right-click to select ‘View Selection Source’ and you’ll see ‘em there trying to look innocent. Tables.

I have to admit I’m slightly in two minds about it, and it’s certainly very clever. Even his original name for the technique is a chuckle. ‘…BOTOX, a quick way to smooth over nasty old wrinkles by injecting normally toxic stuff into the facial area of your page.’

But ultimately, it seems to me like prescribing chemotherapy for a slight sniffle. It’s fairly extreme, potentially harmful and brings in a range of nasty side-effects. Those include:

1) Accessibility issues : most screen readers can understand JavaScript and since tables are a bad for accessibility, the code is going a good job of ‘deaccessifying’ good markup.

2) DOM structural issues : if you have CSS or other JavaScript relying on a particular structure, making major on-the-fly changes to it will obviously break things. It also means you’ll need two sets of CSS if you intend to look after your JS-deprived users (‘table#page H3 {..}‘ and ‘div#page H3 {..}‘ ).

3) Source-ordering issues : TILT would seem to force you to render the page elements in the order the appear in the code (as table do), taking away one of the luxuries of CSS.

Still, it is, at the very least, a great experiment — and you have to admire Dimitri’s ability to come up with a completely new approach to a problems that tens of thousands of developers must have looked at.

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.

  • Kevin

    This is pointless. If you’re really trying for a layout that can “only” be achieved with tables, just use a damn table! It’s not going to kill you. Doing this is infinitely more of a hack than mis-using a table would ever be.

  • http://thinkdrastic.net/ gnarly

    Apart from the obvious caveat (Internet Explorer), what’s wrong with using display:table and friends?

    In fact I believe Dean Edwards’ IE7 scripts support them if you fancy taking that route.

  • Ned Collyer

    This makes me shudder.
    :) Here we are hacking CSS to get HTML rendering correctly and getting damn close.

    Now.. whats the plan?
    Throw out most of the CSS layout, and move it to javascript?

    I feel this technique, while interesting and unique, is not solving any issues. It adds a level of complexity to any DOM manipulation and use of CSS. (more testing too)

    Further, the DOM scripts will not be as easily transferable to other non TILT projects, because they have to be customised to work around the TILT stuff.

  • http://jrickards.ca jrickards

    Display:table (and friends) is CSS and does not change the structure, it just changes the display properties of the structure not unlike display: inline or display: block.

    One advantage of tables is that if you have a row of cells and you narrow the browser window narrower than the minimum width of the rows, the cells don’t wrap to the next line, instead, they stay on the same row. If that is the type of display you want but don’t want to use tables to achieve it, you could consider using display: table (and friends). However, display: table et al. does not have great support.

  • http://www.dustindiaz.com polvero

    if anything, it shows the power of DOM. i think we could agree that nobody would actually do this. Knowing the DOM well enough to perform a hack like that tells me that the person should know enough about css to get their site to look like that.

  • Kevin

    There’s an even bigger problem here. I think if you’re doing a layout that “requires” tables, you’re doing something wrong. Stop. Just stop doing what you’re doing.

    The web is not print. The web is not television. The web is not anything but the web. It’s a unique entity. It’s not composed of dynamically changing images (like television), nor is it composed of static ones (like print). Fonts CAN be enlarged, windows CAN be resized, and images CAN be disabled. There’s nothing you can do about this. This is the way it SHOULD be, too.

    What is necessary here is for designers to stop designing sites as though they’re dealing with traditional print media. Stop assuming that browsers are a certain width (read: kill fixed layouts).

    I’ve never had a design handed to me by a designer (I’m a programmer mostly, and while i do limited design work, the majority of design comes from others) that was in html. I get jpegs of what the final results should look like. I get sketches and the like. Stop that! Build for the web from the ground up.

  • http://www.sitepoint.com AlexW

    Kevin, while I can’t disagree with any of your sentiments, I can’t see what any of them have to do with TILT as a technique. It has nothing at all to do with setting fixed width layouts, or disabled images or resized fonts.

    Like a crazy X-Men character, TILT is a technique that ‘borrows’ special abilities from other entities — in particular, the browser’s well-developed skills in understanding tables — and plugs that ability into standards-compliant markup.

    Fundamentally what we’re talking about here is simply the ability to have columns that remain equal length, regardless of content, and footers that always remain below them.

    Yes, it’s a hack, but no moreso than putting in cleared BR tags, the PIE cleared float technique or any of the other CSS hacks used, because CSS can’t do it by default.