digitalBush

I'm not too much of a table hater.  Tables in your HTML have their place, and they do what they were designed to do well.  They display tabular data with ease and relatively straightforward markup.  Tables work the way they work, and there are generally very few surprises between the various browsers.  With that said, I'm not a huge fan of tables being used for layout.  I like clean markup, and using a table for small bits of information just looks bad, at least to my eye.

One day, for whatever reason, I right clicked on the front page of Stack Overflow, only to be greeted with this:

<div onclick="javascript:window.location.href='/questions/620476/can-someone-tell-me-why-my-div-buttons-wont-resize'">
	<div class="votes">
		<table width="100%">
			<tr><td class="mini-counts">0</td></tr>
			<tr><td>votes</td></tr>
		</table>
	</div>
	<div class="status answered">
		<table width="100%">
			<tr><td class="mini-counts">3</td></tr>
			<tr><td>answers</td></tr>
		</table>
	</div>
	<div class="views">
		<table width="100%">
			<tr><td class="mini-counts">40</td></tr>
			<tr><td>views</td></tr>
		</table>
	</div>
</div>

That's 3 tables to display the following area, which is repeated nearly 50 times on the front page.

stack overflow front page

So I fired off an email to Jeff Atwood explaining to him that just by changing those heavy tables to divs that he would realize a 15K savings per page. Normally, I wouldn't blink at 15K for one of my sites. My sites don't get much traffic. But, for a site like Stack Overflow which has 500,000+ page views per day, that 15K can add up fast. Jeff quickly responded with the reasoning for their decision: "Vertical alignment is something that divs do extremely poorly."

Damn, I neglected to notice the vertical centering.  But, I knew that I could still make it work.  My first attempt to make this work involved nested divs with neagtive margin.  The markup looked like crap and wasn't working well in all of the browsers for me.  Then it hit me, this is just text.  What does the "line-height" css property do?  BAM!  The text was centering vertically and the markup looks nice.  I fired that off to Jeff, he got it integrated into a dev build to test the browsers, and off it went to production.

Now the markup looks like this:

<div onclick="javascript:window.location.href='/questions/514420/how-to-validate-numeric-input-c'" style="cursor:pointer">
	<div class="votes">
	    <div class="mini-counts">2</div>
	    <div>votes</div>
	</div>
	<div class="status answered-accepted" title="one of the answers was accepted as the correct answer">
	    <div class="mini-counts">5</div>
	    <div>answers</div>
	</div>
	<div class="views">
	    <div class="mini-counts">309</div>
	    <div>views</div>
	</div>
</div>

There, doesn't that look better?  I think so. I'm just glad I was able to see an issue, offer a solution, and get my voice heard.  There it is, my small contribution to Stack Overflow.  I hope they are realizing some bandwidth savings from that smaller markup.  Without hard numbers to go on, I'd say it's only a slight improvement after the content gets gzipped.

It still sucks that we have to play this game as web developers.  We're stuck compensating for the bad decisions of web browsers from 2001.  It's really easy to just fall back to tools we know really well, like tables.  Tables aren't bad.  Sometimes they just aren't the tool for the job.  The big bummer is that for 99% of us, it's a better use of our time to go ahead and use the clunky table markup to get something simple done in a timely manner.  There simply won't be enough people using our site(s) to realize any significant benefit from the extra effort to make things "right".   For those remaining 1%, the extra effort to get things right can be worth something. That's just wrong.  It's easier to do things the "wrong" way because the "right" way doesn't work everywhere and/or involves hacks to make it work.

It's worth noting that if you are a developer and aren't participating on stack overflow, then you are cutting yourself short.  It's a great place to find the answers you need and give a little back. Now I just need to get my rep up!