Good Table Examples

Sunday 27 February, 2005 ( 1:19PM GMT)

No, this isn't a tables vs. CSS layout argument, it's about finding good examples of the use of tables as they should be used - to present data.

Tables that look nice, tables that are especially accessible, well made jumbo-tables with a million rows... What are the best tables the web has to offer?

Comments

Comment 1

Hmmm.... I am not sure my tables qualify as 'best' but I think they do the job the way they are supposed to.

http://www.cheltladiescollege.org/college/exams.asp

So said John Oxton on Sunday 27 February, 2005 at 3:35PM GMT.

Comment 2

The 37 Signals Basecamp sign-up tables are always topping my list:
http://www.basecamphq.com/signup.php

So said Jeff Werner on Monday 28 February, 2005 at 2:07AM GMT.

Comment 3

I find this particularly useful for checking table accessibility

http://www.w3.org/WAI/References/Tablin/form

So said John Oxton on Monday 28 February, 2005 at 11:35AM GMT.

Comment 4

Try these beasts:
http://css.maxdesign.com.au/listamatic/browser-support.htm

So said Russ Weakley on Monday 28 February, 2005 at 1:09PM GMT.

Working for a financial information company I have to style tables a lot. We've got some really nice looking ones going at the moment but unfortunately they're on development sites. I'll try to remember to post back when it launches...

So said Robin on Saturday 5 March, 2005 at 6:12PM GMT.

Comment 6

I doubt that these tables are the best, but they are a couple of my favourites, because I made them. :^) I guess that I'm just proud of my accomplishments and impressed at the possibilities of HMTL, CSS, and JS.

http://geocities.com/transitinformationpackages/packages/skytrain [don't forget to click on the numbers]

http://geocities.com/smallbusinesssites/portfolio/tohos/productinfo [scroll down, and don't forget to try the other 2 styles]

The last table was a fun challenge, but it left me a bit unsatisfied, for several reasons.
1) The table is valid HTML, but it violates the spirit of the W3C standard. You aren't really supposed to put TH in the middle of the table, if I recall correctly. The nature of the table actually requires a TH in the middle for the sake of scope and all that jazz. It seems to me that hosiery tables and other similar tables require the TD data to be on the outer edges of the table, as opposed to the TH data.
2) The colour choices for the table aren't great, but I'm not sure about where to go on this because different colours make it easier to see, but it's an eye sore, if I understand correctly.
3) I'd love to be able to scroll left, right, up and down, like a spread sheet and always have the headings in the view port. At the this point, if you view a table with 1,000 cells, then scroll to cell #500x#500, then you'll have tough time knowing what that cell's heading's are. Sure, you *could* use JS, but that should be a browser feature.
4) Sometimes it's hard to know when to put all of the data into 1 table or to break it apart into several tables. Maybe that's what experience and expertise are for.

So said Eugene Wong on Sunday 6 March, 2005 at 12:16AM GMT.

Comment 7

I shall be watching this thread like a hawk. I spent the best part of 2 hours sifting through the web looking for a decent accessible table example and found nothing. Many look good through formatting, but that doesn't make them accessible. Nobody uses 'caption' or 'summary' and not many use <th>.

As soon as I find one, I'll post it. Even my local marathon results pages are incorrectly rendered and awkward to access.

So said Eddie. on Monday 7 March, 2005 at 5:02PM GMT.

Comment 8

To whet your appetite, all my tables use theads, tbodys, summaries, column and row scoping, and CSS styling. I've never worked out the difference in semantics between caption and summary though, so I tend to just go for summary as cross browser caption styling is iffy.

So said Robin on Monday 7 March, 2005 at 9:53PM GMT.

Comment 9

@Eddie.. maybe this will be of use?

http://joshuaink.com/blog/24/accessible-table-template

So said John Oxton on Tuesday 8 March, 2005 at 2:32PM GMT.

Comment 10

This is a fairly nice table
http://www.pictureit.co.uk/

So said Derek on Wednesday 9 March, 2005 at 5:32PM GMT.

Comment 11

I did this site a long time ago in Tables - Now looking at it - It would have definitely been a good candidate for DIVs haha. Oh Well - Live and Learn. http://www.etspa.com

So said Chet on Thursday 10 March, 2005 at 7:03PM GMT.

Comment 12

http://joshuaink.com/blog/24/accessible-table-template

That's much more like it. The more well styled accessible designs there are on the internet, the more the standards can be advocated. I'm due to attend an accessibility event with regards to the web very soon and will be hearing about some of the practical usability problems faced. Validation and WAI-AAA don't go far enough as it really only assists other devices accessing the internet. Usability is the key and it's good to see such an attractive and usable table on the web.

C'mon people, show some more. I'm still struggling to find any!

So said Eddie on Saturday 19 March, 2005 at 6:56PM GMT.

Comment 13

What more appropriate use for HTML tables than to display other (SQL) tables?

Poke around, there are a bunch more (seasons and moon phases are pretty interesting).

So said Doug on Sunday 27 March, 2005 at 2:09AM GMT.

Comment 14

Oops,

http://loadaveragezero.com/app/dbrowse/dcal/tables/events/data

or you can click on my name in previous post. ~d

So said Doug on Sunday 27 March, 2005 at 2:11AM GMT.

Comment 15

Todd Dominey's work on the 2004 PGA Championship has some of the most beautiful HTML tables I have ever seen.
http://www.pga.com/pgachampionship/2004/

HTML has some validation issues and doesn't have all the accessibility features you might want, but I suspect those issues were due to the middleware/CMS. Very gorgeous tables ...

So said Patrick Taylor on Thursday 31 March, 2005 at 2:56AM GMT.