Comments on: Style tables with CSS

By: Cody

Cody — Tue, 19 May 2009 23:28:45 +0000

Hey thanks for the CSS table tips. There were a couple of techniques I never knew about. Like the table-layout: fixed; I always wonder how you can make tables obey your width element. Also great trick with the tag.

By: Emil Stenström

Emil Stenström — Fri, 03 Apr 2009 14:48:09 +0000

@Vincenzo Romano: I agree that it’s not a perfect solution, but it’s the only one that works. I think hixie’s explaination simply is that width and border affects other cells in the table, so it you set column widths calculating table cell widths gets really hairy. That’s my guess anyhow.

By: Vincenzo Romano

Vincenzo Romano — Fri, 03 Apr 2009 10:39:21 +0000

I’ve read Hixie’s interesting page.
But it’s still not clear why width or border properties are different from text-align!
Whatever the CSS mechanism does with the former ones, can be done for the latter. It sounds straightforward to my ears (but maybe I’m wrong).
In my opinion, it makes perfect sense to define table styles either by rows or by columns accordingly to the specific table.
In general, if you have items on the rows and their properties on the columns, styling by column makes better sense.

Your suggested workaround is … just a workaround. A working one, indeed.
But column styles should not rely on column ordering! And your solution does.

By: Shafaat Awan

Shafaat Awan — Wed, 27 Aug 2008 20:35:17 +0000

For me, tables are not bad, Its better to use custom CCS layout instead of this, tables are good for tabular data. They are not built for structuring the layout.

By: Sharing Best Practices!

Sharing Best Practices! — Sat, 12 Apr 2008 06:06:32 +0000

I was looking for the gradient background stuff for custom WordPress theme, the client needs the theme colors to be changed anytime.

I am sure this is gonna help me a lot. Will give it a try.

Thanks for sharing..

By: Rob

Rob — Wed, 26 Mar 2008 15:20:34 +0000

I’m working on some table -based graphs at the moment and am styling them with CSS. Thanks for this article, it couldn’t have come at a better time.

By: unwiredbrain

unwiredbrain — Wed, 19 Mar 2008 02:06:32 +0000

OK. now the code section 2 (“Remove the space between the cells with CSS”) rightly states:
table { border-collapse: collapse; }

By: Emil Stenström

Emil Stenström — Tue, 18 Mar 2008 22:44:55 +0000

@unwiredbrain: Ehmm… I don’t see any missssspellings? Thanks again…

By: unwiredbrain

unwiredbrain — Tue, 18 Mar 2008 10:38:31 +0000

Really… I don’t want to be dull, but what I see is ‘border-collape’…

Or you’re missing a ’s’ or you want mokeys in your codes! :) :P

Have a nice day.
Peace & Love
–
uwb

By: Emil Stenström

Emil Stenström — Tue, 18 Mar 2008 06:09:28 +0000

@unwiredbrain: Thanks, but it should be correct now, I’ve double-checked.

By: unwiredbrain

unwiredbrain — Tue, 18 Mar 2008 00:58:08 +0000

Err… :-\ I was reading the pre-updated. But after the update it still looks buggy! :) :P

By: unwiredbrain

unwiredbrain — Tue, 18 Mar 2008 00:55:24 +0000

Watch out! It’s not ‘border-collapsing’, it’s ‘border-collapse’: http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

By: Emil Stenström

Emil Stenström — Mon, 17 Mar 2008 07:45:28 +0000

@Nita: It sure is, thanks for correcting me :)

By: madr

madr — Fri, 14 Mar 2008 15:28:05 +0000

The trick with using COL has crossed my mind now and then for about two years now, but I never tried it – as you said, one does not use tables that much.

Nice to see that CSS does as one can expect it to. :)

Really good writeup anyways. I will definitely show this to my collegues – since they tend to classitis all tables.

By: Nita

Nita — Fri, 14 Mar 2008 14:22:33 +0000

Nice overview, thanks! But isn’t it “border-collapse”? :)