Skip to content

24 ways to impress your friends

Tables with Style

Jonathan Snook Jonathan Snook

29 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Nathan Smith

Great write-up. It’s good to see more attention being given to semantics, and implictly increased style-ability, for tables. I admit that back in the dark days of table design, I often found little use for Tbody or Tfoot, or the like, since all we were using tables for was presentation (tisk tisk). And, now that most layouts are done in CSS, entire months will go by without having to deal with tables at all. Thanks for reminding us about proper usage, and helping to merge the old-school with new methods. Also, gotta love the candy-cane holiday zebra-striped theme!

Grant Palin

Some good examples. I agree with your point at the beginning about how tables can be an interesting (if not sometimes frustating!) element to style. What with the different sub-elements you can style, there’s many different things that can be done to style tables.

One thing that can make things difficult is the html attributes for padding and spacing – if you don’t take those into account when styling tables, your work would be a lot more difficult. I know when I was learning CSS, this plagued me to no end until I realized that I should zero the table’s cellpadding and cellspacing attributes to make things easier.

karim

Hi all,

First of all thanks a lot for these articles! It’s very interesting!

Well about :first-child and :last-child

I used to use them with tables, like you

did. And for IE and others

I suggest using classes named

.firstchild and lastchild which will be

styled like the elements with the selectors :first-child and :last-child

respectively.

and of course aply to the first TR (or TD) the class .firstchild and to the last ones .lastchild.

Well, I hope you enjoy my modest idea,

I’m personally using it :)

Thanks again

Charles Roper

Gerben, you beat me to the punch. In light of Tantek’s excellent article and day 17, I’m trying to do away with hacks where possible and the * html hack it a prime candidate. So I modified the CSS a bit and used

tbody tr.odd td { ... }

for the non-compliant browsers and then used

tbody tr.odd > td { ... }

to feed the correct declarations to the good browsers.

Seems to work a treat.

trovster

Pretty funky table. I had my doubts that they could look nice, but you’ve certainly quashed them…

Jonathan: I think you missed the html part of your star-hack in the article, but not on the page.

Ô thank you. I’m looking for this way of assigning an id to a col for a long time now. But CSS gurus talk about evreything but tables (except to get rid of them, mostly rightly though).

Jonathan Snook

trovster: ha, not much of a star-html hack if I forget the -html part now is it? :) Fixed.

Tim: If you’re using XHTML, you absolutely should. All my examples use HTML, in which case, you shouldn’t.

Bob Sawyer

JS: All my examples use HTML, in which case, you shouldn’t.

Really? Shouldn’t, or don’t have to? I don’t want to start an ideological war of words here, but I’ve never known HTML to be restrictive with closing tags. Isn’t it just good practice to close them regardless of whether you’re using XHTML or HTML?

Lovely examples, by the way. Don’t want to take away from the point of the article, which is excellent…

Jonathan Snook

While it probably doesn’t hurt, the HTML 4.01 spec actually says:

“Some HTML element types have no content. For example, the line break element BR has no content; its only role is to terminate a line of text. Such empty elements never have end tags.” COL is an empty element. So, no, you shouldn’t. :)

Dylan

That really is a beautiful table, so red and shiny… In a time when I’ve been getting a bit tired of CSS, you’ve sparked my interest again with that well designed table.

The COL element doesn’t have a closing tag, it just self closes like an IMG or BR (br /), so you wouldn’t close it in HTML in just the same fashion you wouldn’t close a BR in HTML but would in XHTML.

Jonathan Snook

Dextro: pretty observant! :) The problem is that IE won’t apply the png hack filter to a cell that doesn’t have a background set. You’ll notice that in the PNG hack example on this page, I actually set the background color to #C00. Let’s hope IE7 gets it right. :)

ark

OK, this is a bit not on the subject, I hope you guys can find a moment to help me out with my little problem…

My strong part is the server-side scripting, so I have a server-side script that generates images for rounded corners.

I have a library of my functions, so I can use this script on all of sites I develop, from a single file.

Point is it’s a single piece of code that generates rounded corners on both these sites: http://www.haroldauto.com/edit:1:43t243r and http://www.bmw-speedometer-repair.com/Safety.html

If someone could have a look and tell me why does the second site shows a bit of the wrong image in the top right corner, I would appreciate it very much.

It’s a single script on the server, and CSS/XHTML is not my strong side, I tried to make the css(at least the relevant css(I thought)), the same on both sites, but something must be off.

thanks,

ark

FataL

Opera for now is the one browser that can style TBODY (tbodies) – in the example only Opera has border after TBODY.

Opera 9 TP1 has pretty good rendering for last example.

Too bad that all browsers have so little support for styling COLs and COLGROUPs.

David Singleton

Another nice article.

Good to see more people being made aware of thead, tbody, tfoot and the usefulness of cols and colgroups, although a shame that there’s no mention of very useful caption tag or the acessability enhancing summary attribute.

@ FataL: There’s a good reason and explanation why browsers are limited in col styling, with the exception of IE, oddly.

Impress us

Be friendly / use Textile