Code Irony

An Ironic Look at the State of the Art by Christopher Myers and Justin Davis

A Rose By Any Other Name…

January 31st, 2008 | Category: CSS

Sure, semantic HTML and pure CSS layout are all the rage, but we at Code Irony can’t help but notice that somewhere along the way, the table element became a persona non grata. We find that there are some occasions where using a table can mean a particular layout is well behaved across browsers, predictable, maintainable, and quick to implement. Think column layouts.Sad Table Tag

Ever notice how your “semantic” markup with divs and spans oddly enough ends up looking similar to how it would look using a table with trs and tds? It’s not really that semantic at all. Plus, you have to use “float,” which if you think about it means you’re really just pushing the dirt under the CSS rug. To top it all off, it just doesn’t work as well. If the user can’t tell, then what exactly are you trying to accomplish?

So we want to help eliminate the shame your colleagues and friends will heap on you for using the <table> so you can just move on with your life and stop fiddling with your markup and CSS. We figure the best way to do that is to introduce a new HTML element! This way, the purists can keep their pride and you can bask in pragmatic warmth.

It’s called: <layout>

I know… mind-blowing. We should write a book about it. It’s not without friends, too: <layout-row> and <layout-cell>.

Here’s an example of how to get a two-column layout using our new tags:Happy Layout Tag

<layout>

    <layout-row>

       <layout-cell>Left Content</layout-cell>

       <layout-cell>Right Content</layout-cell>

    </layout-row>

</layout>

And since the browser won’t know what in the world you’re talking about, we’ve written a script that turns it back into valid HTML. You can download the Table Shame Eliminator here, or check out how it’s done below.

#—————————————————————————-
# Filename: layout.py
# Revision: 0.1
#
# Copyright 2008 Christopher Myers and Justin Davis
#
# “Table Element Shame Eliminator”
# The purpose of this script is to transform markup with our magical “layout”
# element into valid HTML using the html table.
#
# You have unlimited license to use this software however you want.  There
# is no warranty either expressed nor implied.  Actually, we recommend not 
# using it.  It just exists to prove a point.
#—————————————————————————-

import os
import sys

from BeautifulSoup import BeautifulSoup

def usage():
    print “Usage: %s input-filename” % (sys.argv[0])

if not sys.argv[1:] or not os.path.exists(sys.argv[1]) or \
    not os.path.isfile(sys.argv[1]):
    usage()
    sys.exit(1)

# Soup the input
infile = sys.argv[1]
fhandle = open(infile, “r”)
soup = BeautifulSoup(fhandle)
fhandle.close()

# Convert from our semantic elements to actual html elements
layout_to_table_map = {
    “layout”        : “table”,
    “layout-row”    : “tr”,
    “layout-cell”   : “td”
}

layout_elements = soup.findAll(layout_to_table_map.keys())
for layout_element in layout_elements:
    layout_element.name = layout_to_table_map[layout_element.name]

print soup.prettify()

16 Comments so far

  1. Ned Batchelder January 31st, 2008 10:11 pm

    Same as it ever was: http://nedbatchelder.com/blog/200310/impossible_css_gripe_2.html

    I agree with you wholeheartedly. I think CSS missed some opportunities to use established tools to express layouts.

  2. rob January 31st, 2008 10:28 pm

    brilliant

  3. cwmonkey January 31st, 2008 11:24 pm

    All the internet needs is more layers of complexity. If you don’t know how to do columns in proper xhtml and css please learn.

  4. noonespecial February 1st, 2008 12:38 am

    If you don’t know how to do columns in proper xhtml and css *in all 7 major browser platforms and make it look uniform in each* please *take the extra 4 hours per layout to fiddle with it and make it just right* and learn.

    There. Fixed that.

  5. Eric B February 1st, 2008 1:07 am

    How does that work for a screen reader or other enabling technologies for the blind?

  6. Mark February 1st, 2008 4:28 am

    complicated/fragile css is the devil

    just use tables, please.

  7. chad udell February 1st, 2008 10:50 am

    Are you seriously proposing this or is it a joke? Who does this make web design easier for? The backend developer who stopped doing html before the standards movement took hold? i don’t get it at all.

  8. cmyers February 1st, 2008 11:44 am

    “irony: (noun) the expression of one’s meaning by using language that normally signifies the opposite, typically for humorous or emphatic effect.”

    It’s a joke, but we’re only half kidding. The point is for people to think more critically about what philosophies they adopt.

    We spend all day trying to mimic desktop application interfaces in a medium not designed for it. The real frustration is having to pull our punches, leaving many good tools out of our toolbox that could otherwise be used judiciously to great effect.

  9. Chui February 2nd, 2008 5:01 am

    Agreed. It’s not much uglier than the DIV hacks used for rounded corners.

  10. Chad February 2nd, 2008 9:41 am

    You could always just build your stuff in Flex. ;-)

  11. Quiller June 8th, 2008 10:30 pm

    I don’t see how , especially when paired with row and cell tags, can be considering semantic. What happens if I re-design the site in a few years and want to move the sidebar from the left to the right? What if I initially have vertical navigation on the left and later transform it into horizontal navigation on the top?

    More importantly, though, I’m not sure you are aware of the intent behind semantic code. It’s not about what the end result looks like, and if you think table-based code is easier to write (or easier to style) then you’re definitely doing something wrong.

  12. Adam June 9th, 2008 9:02 pm

    I’m pretty sure it was a joke.

    And semantic does not mean easily-changed or easily-maintained.

    It’s a sad fact that for most people table-based layouts are easier than pure CSS-positioning, both at the conceptual and implementation level, that’s why they continue to use them.

  13. Olav Junker Kjær June 18th, 2008 7:21 am

    I suggest a slight improvement:

    layout_to_css_map = {
    “layout” : “div style=’display:table’”,
    “layout-row” : “div style=’display:table-row’”,
    “layout-cell” : “div style=’display:table-cell’”
    }

    if (UserAgent==InternetExplorer)
    layout_map = layout_to_css_map;
    else layout_map = layout_to_table_map;

  14. Kylie Batt May 12th, 2010 4:29 pm

    Прошу прощения, ничем не могу помочь. Но уверен, что Вы найдёте правильное решение. Не отчаивайтесь….

    Енциклопедія підприємця-початківця. Практичні рекомендації We find that there are some occasions where using a table can mean a…

  15. Webmaster June 10th, 2010 2:20 pm

    Hello! Please e-mail me your contacts. I have a question < a href=”http://bravto.ru/ webmaster@bravto.ru” >…< /a >…

    Thank you!!!…

  16. CAMERON June 24th, 2010 7:19 am

    Medicamentspot.com International Legal RX Medications. Special Internet Prices (up to 40% off average US price). NO PRIOR PRESCRIPTION REQUIRED!…

    Combivir@buy.online” rel=”nofollow”>.…

Leave a reply