Code Irony

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.

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:

<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()