Wednesday, November 12th, 2008

CSS and Tables; The war continues

Category: CSS, Fun

Time for a bit of fun. The eternal battle of tables vs. CSS layouts continues. We geeks have had classics such as vi vs. emacs, and Star Wars vs. Star Trek.

First up we have

And then we have

You have to take a look at the source for that one :)

  2. "">
  3. <html>
  4. <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.    <title>Should I use tables for layout?</title>
  7.    <style type="text/css">
  8.       html,body{
  9.        background:#999;color:#ccc;
  10.       }
  11.       h1{
  12.         font-family:"Georgia",Helvetica,Arial,Sans-Serif;
  13.         font-size:10em;
  14.         padding:.1em 0;
  15.         text-align:center;
  16.         color:#333;
  17.         margin:.5em auto;
  18.       }
  19.   </style>
  20. </head>
  21. <body>
  22.   <h1>No.</h1>
  23.   <!-- Honestly, no. -->
  25.   <!--
  26.    <table border="0" width="100%">
  27.      <tr>
  28.        <td align="center">No.</td>
  29.      </tr>
  31.  -->
  32.   <!-- Fact: Chuck Norris hates layout tables! -->
  33. </body>
  34. </html>

Who will win? Maybe both, with display: table in the future.

Posted by Dion Almaer at 12:01 am

4.3 rating from 26 votes


Comments feed TrackBack URI

Oh yes, and something that isn’t controlled by a single vendor and doesn’t require a download for the user.

Comment by TNO — November 14, 2008

Thanks for this one! :-D

Comment by PeterMichaux — November 15, 2008

Fine post, ajaxian, but I think you just started another flame war.

Comment by luke01 — November 15, 2008

DiSiLLUSiON has summed it up nicely, why TABLES simply cannot die yet. Any alternative mentioned (XUL, Flash, whatnot) may be better option than a non-working CSS, but it is much worse option than having a working TABLES.
The thing is – when I begin to implement a design that smells with complexity, I never know in advance whether I will hit the CSS problems DiSiLLUSiON has mentioned – the requirements simply change too fast – and the world is just too interesting place to spend all time with needless refactoring. Therefore I play it safe and use tables from the get go, which I’m very proficient at both from HTML as well as DOM side.
(Someone here said that “floats kill kittens”, so let me just add that TD rowspan kills puppies – both are things to avoid.)
Attempting to produce a clean work with messy and broken tools (current web starndards and their implementation by browsers) is simply foolish.
Once I can use CSS for everything where I use TABLE, but WITHOUT fugly hacks like conditinal CSS includes and deep nesting, I will be all CSS. Until then, I use both, as I’m not their bitch to exploit, they are mine:)

Comment by ypctx — November 16, 2008

I can do mostly any layout my heart desires without having to resort to tables, but there is one place I get stuck still – forms…
Does anyone here have a beautiful recipe for how to create CRUD forms using CSS and getting the alignment right…?
I have tried a couple of times but I always end up with tables…

Comment by ThomasHansen — November 17, 2008

@ThomasHansen, I have examples of a few tableless forms here. I don’t know if I’d go so far as to call them beautiful, but they work in modern browsers and offer decent layout options.

Comment by garann — November 17, 2008

When building enterprise level sites, the amount of markup in a page matters. The extra amount of code in a complex table-based layout may seem trivial, but multiply it by a million hits a month and it does have impact.

An example I recently ran into -> loading paginated comments via ajax with a CakePHP MVC backend. The view (HTML template) for each comment was built using tables. The site could easily produce 300-500 comments per page. Mix ajax loads with PHP application of a chunky DOM structure and we were getting long wait times before a given page of comments would appear.

Solution: reduce HTML per comment via the use of few block-level tags styled via CSS. Problem solved.

I’m NOT saying tables don’t have their place, but I would argue that when we do need to use them its typically because we have to support old browsers that don’t handle CSS well. In other words, its crappy old browsers that will someday die that put us in the corner – not CSS.

Comment by miscon2 — November 18, 2008

The one that continues using tables is because it does not dominate or does not know CSS. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more.

Comment by traza — January 27, 2010

Leave a comment

You must be logged in to post a comment.