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.
Alex WalkerAlex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.
