Comments on: CSS and Tables; The war continues

By: traza

traza — Wed, 27 Jan 2010 18:54:43 +0000

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.

By: miscon2

miscon2 — Tue, 18 Nov 2008 16:01:16 +0000

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.

By: garann

garann — Mon, 17 Nov 2008 17:50:36 +0000

@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.

By: ThomasHansen

ThomasHansen — Mon, 17 Nov 2008 10:32:10 +0000

@TheWorld
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…

By: ypctx

ypctx — Sun, 16 Nov 2008 15:00:36 +0000

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

By: luke01

luke01 — Sun, 16 Nov 2008 03:03:26 +0000

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

By: PeterMichaux

PeterMichaux — Sun, 16 Nov 2008 00:23:39 +0000

Thanks for this one! :-D

By: TNO

TNO — Fri, 14 Nov 2008 16:25:58 +0000

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

By: TNO

TNO — Fri, 14 Nov 2008 16:21:47 +0000

@endOfLine:
Something that doesn’t cost a bajillion dollars to develop for,
doesn’t require a leaky abstraction in the page,
is easy to index by a search engine,
can be quickly updated without firing up an IDE,
Is standardized and future compatible
Is readable
Is open source

By: endOfLine

endOfLine — Fri, 14 Nov 2008 15:25:14 +0000

use Flex. It looks the same in every browser, provides as complicated a layout as you want, and gives you selectable text! What more could you ask for?

By: TNO

TNO — Thu, 13 Nov 2008 14:11:05 +0000

If you’re referring to block elements not being allowed within inline elements, its trivial to replace it using first-line:
li:first-line{ font-weight:bold; color:blue; line-height:2em; text-decoration:underline; }

By: edeverett

edeverett — Thu, 13 Nov 2008 13:49:57 +0000

@TNO – you can’t be having troynt’s H3s inside a span, but yes that would be simpler for my example.

By: TNO

TNO — Thu, 13 Nov 2008 13:03:04 +0000

instead of using li use a span with inline block and it will work back to IE6 without a hack

By: edeverett

edeverett — Thu, 13 Nov 2008 12:27:13 +0000

@troynt Here's the two minute version of that layout. http://edeverett.co.uk/experiments/noTables.html. Ok, so there's a small hack for IE, but that's a small price to pay for the benefits of not using tables for layout (for me the benefits are most in having more maintainble flexible HTML).

By: edeverett

edeverett — Thu, 13 Nov 2008 12:02:45 +0000

@troynt You should us a list then apply a style of inline-block to each li. Nice looking site though.

By: Tr0y

Tr0y — Wed, 12 Nov 2008 23:38:27 +0000

grr.. ate my markup.

Which looks like a table.

Should be a list

If the LIs heights are not consistent this will break, you can fix this with javascript, but I want it to work without javascript as well.

By: Tr0y

Tr0y — Wed, 12 Nov 2008 23:36:43 +0000

@DiSiLLUSiON: wait, maybe your suggesting something that looks like…

Which looks a lot like…

That solution is no better than a table.

It should be a list

foo
bar
foo2

etc.

By: Tr0y

Tr0y — Wed, 12 Nov 2008 23:32:06 +0000

@DiSiLLUSiON: Not so fast on that solution.
“if a li was taller than the next, the row after would display only one li.”

So your solution would require one to specify a height. I could use javascript to vjustify the elements, however I want it to work without javascript as well.

By: LeoHorie

LeoHorie — Wed, 12 Nov 2008 21:28:45 +0000

One more thing I wrote a while back about tables that I think ties nicely with this discussion: using tables for non-tabular data.

By: WillPeavy

WillPeavy — Wed, 12 Nov 2008 21:07:04 +0000

CSS really isn’t that hard to learn. And once you do learn it – I believe it becomes much easier to maintain and alter large sites and apps than with a nested table layout.