Everything Old is New Again

When I was studying computer science, one of my lecturers told me that everything old will be new again and he was right. The latter half of the twentieth century saw the transition from large mainframes that were shared because computing time was so expensive to small personal computers. And in the last few years we've seen rise to cloud computing, which is little more than buying time on large servers.

I started Web development in the mid 90s when Perl CGI scripts were cutting edge, HTML was transitioning from 2 to 3 and Netscape Navigator reigned supreme. Web development was a niche back then but there was still a debate--mostly in Usenet--about the right way to do things. A popular school of thought was then that HTML was semantic and shouldn't be used for graphical interfaces. Text browsers such as lynx were typically Exhibit A.

Fast forward a decade and it would be an understatement to say that the world--even the Web world--has changed. No longer a toy of geeks and technocrats it had gone mainstream. The argument over whether or not Web pages should be graphical has long since been consigned to the dustbin of history. But the semantic Web argument has once again reared is back with a vengeance.

Everything old is new again.

This time however the battleground is tables vs "pure" CSS. The argument goes that tables are semantic and it is "wrong" to use semantic elements for layout purposes as explained in tableless design.

Now I am first and foremost a pragmatist. Most of the time we are writing software because someone is paying us to. That could be our employer, client or shareholders. It doesn't matter. The point is that we are getting paid to deliver something. As a pragmatist my position is that our first responsibility is put those requirements and needs ahead of our own. Programmers are opinionated--arguably judgemental--creatures with yours truly being no exception. This can lead to a tendency to do things for reasons that can be ascribed as nothing other than religious. It's why at least some of us get caught up in pointless debates like ATI vs nVidia, Intel vs AMD, Nikon vs Canon, Windows vs Linux and so on.

Tables vs pure CSS is no exception.

I have several problems with the anti-table argument:

1. Tables are significantly more backwards compatible than CSS. Much as we might despise it, most of the time we still need to support IE6 so this is a real issue;

2. Vertical centering in CSS is hard. An often cited counterargument to this is Vertical Centering in CSS. Three layers of divs and relative+absolute+relative positioning? How exactly is this better than:

<table style="height: 400px;">
  <td style="vertical-align: middle;">everything is vertically centered</td>

3. Semantic meaning of HTML elements is, to a certain extent, subjective. The best example of this is where some Web developers will seek to replicate the superscript and subscript tags with CSS, viewing such tags as stylistic anachronisms like <center>. This attitude is severely misguided as best described in Beware CSS for Superscript/Subscript. If the <table> element had been named <grid> would we even be having this argument?

4. Many layout issues in CSS require a sacrifice of one or more of simplicity, flexibility or cross-browser support. I posed the question of Can you do this HTML layout without using tables? on StackOverflow and in three months I am yet to receive and adequate pure CSS solution for what is a trivial layout issue.

5. Floats are a poor substitute for side-by-side content to tables. Floats need a width defined, table cells don't. If the floats are collectively too wide to fit the width they will drop down to the next "line". This is rarely what you want. It is hard to get floats to fill the remaining space but trivial for table cells. Floats often necessitate the use of empty div tags with the CSS attribute clear: both to work.

Don't get me wrong: floats are great and certainly have their uses. A lot of the time they will be adequate to this task but it is undeniable that tables are more capable and compatible.

So I take the pragmatic view to favour pure CSS. If something can be done relatively easily in pure CSS and the solution is sufficiently robust and browser-compatible then I'll do it without hesitation. But as soon as find myself spending possibly hours trying to replicate simple table functionality--and lets face it, most Web developers have been there at some point--it's time to pull out Old Faithful, the HTML Table.

So please let's all take a collective deep breath and pause--at least momentarily--before starting a religious war the next time someone uses a table for layout.


keanzu said...

The debate about which tech is better is best left for purists and scholars. People that actually need to work for a living will do whatever works most reliably.

CSS support is incomplete and inconsistent. Not worth wasting time on.

Onderhond said...

Only in rare cases are tables easier to implement than the css solution. Of course, many use this argument simply to say they are not as familiar with css as they are with tables.

Also, tables are a lot more limiting when it comes to styling pages (without further touching the html).

I've had my fair share of table redesign and I can only curse people choosing to use tables simply because they are not experienced enough to use css positioning.

Dan Howard said...

Thanks for posting a common sense article.

David J. Heinrich said...

Well, with IE8, CSS tables will be supported. That makes getting table-based layouts easy using CSS, without mis-using HTML Tables. And I've read that inline-blocks can work better in the meantime than floats.

A really simple solution is to look for ways to avoid the need for columnar layouts to begin with. This is pretty easy for photo-gallery websites, but more difficult of course for blogs.

Daniel said...

I know its a year and a half after this article is written, but I couldn't leave the page without at least saying "Thank you" for posting a common-sense, business-smart opinion on the css/tables debate.

Post a Comment