CSS Table Gallery
Following a request on the list, where a subscriber had unsuccessfully searched for an online gallery of styled data tables, I came up with the following idea:
http://icant.co.uk/csstablegallery/
It is pretty much like csszengarden, only for a single marked up data table.
What I need now is people participating with an own style for the data table. You can submit it directly on the site and I will check through them when I come back from a training in 3 days, so please don’t expect to see things appearing immediately.
September 13th, 2006 at 4:45 am
September 1st, 2005 at 4:52 am
Interesting idea…
I know that the content of this table does not require Header abbreviations, but I think it would be interesting to include the
abbrattribute in there to create an extra hook.September 1st, 2005 at 9:31 am
Hey Chris, great idea, and I didn’t wan’t to reply on the list, but could you perhaps have a section for some ’specific’ tables?
One such would be a calendar display, I always find myself stuck when trying to find a pleasant way to style a calendar.
September 2nd, 2005 at 3:08 pm
Great idea – the poor table has taken quite a battering over the past couple of years, so it deserves a makeover!
September 2nd, 2005 at 9:38 pm
I’d put one together too, but it appears you can’t simply submit the code, you need to host a CSS file somewhere. What gives?
September 2nd, 2005 at 9:51 pm
Fatalis: It gives over 35000 hits on the second day, if I were also to host the CSS files I’d be a poor man. CSSZenGarden doesn’t host the files either, does it?
September 3rd, 2005 at 6:39 am
I had the following ideas for changes to the table mark-up, that I would like to put up for discussion:
- class=”odd” for td and th tags
-> This would allow for styling of columns
- class=”columnX/rowY”
-> This would allow to hightlight columns/rows
- class=”selected” for row of style shown
-> To seperatly highlight the displayed style.
September 3rd, 2005 at 7:32 am
Jason,
yes, that would be nice to have, however, the idea of this gallery is to show what can be done with a normal data table. In the business world of CMS driven web sites we hardly ever have the option to control the markup down to this level.
September 3rd, 2005 at 6:02 pm
One thing many of my real-world tables do have is a set of
<colgroup><col></col></colgroup>elements. Although you can only hang a limited subset of styles on them they are useful.Edit: Please use the code tag to mark up code, I had to fix this /Chris
September 3rd, 2005 at 10:10 pm
Great idea Chris, In fact I had the same thoughts a couple of days back, Tables are useful for tabular data no doubt about it, surely the lack of resources makes the job of styling complex tables even more difficult.
There should be more examples to tackle complex real world scenarios. Even after years I sill keep looking for ideas on styling and using tables in effective ways for tabular data.
Sadly there are not enough resources, other than W3C on the technical front which is a great resource to understand how tables work and few others. There are not many places that show the use of tables in different ways.
I would like to thank you for stating this site, and I hope it will grow to become a great resource.
It would be nice if there is an option to show some different layouts in tables, not just styling one table but different kinds of table layouts. Merged columns may be rows grouping different tables, hover styles, scrollable body data with fixed headers and so on.
May be articles, tutorials, links, a one stop resource on tables. That would be awesome.
September 3rd, 2005 at 11:08 pm
Actually, css zen garden does host the final versions:
September 4th, 2005 at 4:17 am
I think Gray suits you sir is fascinating. To be honest I am avoiding using tables but this is so good!
September 4th, 2005 at 8:57 am
Marko, if the data you want to display is tabular data, then there shouldn’t be any ony solution but to use a table. Only a well marked up table makes this data accessible.
Check my Data Tables and CSS article on devarticles.com for more information.
September 5th, 2005 at 1:32 am
Inspired by JasonMR comment above, I’ve played whith CSS code in order to achieve different colors for the columns.
And, once again I discover the power of the adjacent-sibling seletors (unfortunate IE again doesn’t support).
You can see the results of my work on this page.
September 5th, 2005 at 6:26 am
I have played with that aswell, however what I dislike about it is that you have to know the amount of cells and the HTML structure quite closely, which doesn’t make it very versatile :-/
September 5th, 2005 at 10:41 am
Thanks Chris. Yes that is the point. But I’d like to know, please: Am’I missing something? Because I’m thinking that the use of adjacent-sibling selectors requires a closely look at the HTML structure, not only for tables but in any kind of code. It seems to me that you point out that this solution isn’t useful for CMS. Is this?
September 5th, 2005 at 11:16 am
Here’s a little request: could you repeat the description of the submission at the top? Currently, it only says “Current style: Foo Bar by Baz Quux.” It would be nice not to have to go looking for the description in the table when you open a bunch of styles in tabs.
September 5th, 2005 at 11:49 am
@Mauricio: Yes, that is true. Any CSS technique that requires you to control or know the HTML is quite hard to use in a CMS environment.
@Aristotle: Excellent idea, implemented.
September 5th, 2005 at 7:29 pm
Very cool site! Wish I had thought of it :-)
September 5th, 2005 at 10:55 pm
Great designs! Great idea too! My favorite so far is Dan Champion’s “Muted”…very nice…subtle…beautiful.
September 5th, 2005 at 10:56 pm
Chris, if it wasn’t too hard to put the description at the top, then you might as well put the download link at the top, too. That way if you like the design you are currently viewing, you don’t have to dig down into the table again to find the download link.
Thanks for including my design!
September 6th, 2005 at 5:31 pm
What a good idea…I was actually thinking of doing something like this, experimenting with different table designs, and showcasing them on my site, but you beat me to it! Oh well, it’s good anyway!
I found the page shortly after it was published last week; it’s amazing how many designs have come in since then!
I believe tables are correct for doing tabular data, and try to use them correctly, with accessibility features and such. But this is a good way to demonstrate that tables don’t have to be boring!
September 7th, 2005 at 1:26 pm
@ Marko Petkovic – Thanks for the compliments!
As this gallery grows it’s going to be very useful.
September 11th, 2005 at 11:38 am
Great idea, Chris! Everybody will benefit from this project.
September 22nd, 2005 at 9:50 pm
Very very useful and great work
September 27th, 2005 at 8:30 am
How about css FORM gallery?
September 27th, 2005 at 9:51 am
Brawo, as Roger Johannson proved, it is almost impossible to style forms cross-browser:
Personally I dislike styled forms. Form controls are part of the operating system / browser and if you keep them as the user wants or needs them you won’t have to explain where your form controls are.
October 6th, 2005 at 9:54 pm
Chris,
How about adding a column where people can rate each design?
October 17th, 2005 at 9:56 pm
Just wanted to say thanks for this resource. I needed to throw together a table for a live reporting internal app. It’s something that will only live for a few weeks so I didn’t want to spend forever on the design, but I wanted something that would help aid in the viewing of the info. This project was perfect for it! I found a design I liked, downloaded and dropped in the CSS and only had to do minor tweaks. HUGE time saver. Thanks!
October 29th, 2005 at 2:16 am
It was a very good idea for offert at all the webmasters a table style free and easy for change for his css. It idea is great!!
November 17th, 2005 at 1:12 am
Layout bug in
http://icant.co.uk/csstablegallery/index.php?css=20
November 17th, 2005 at 5:08 pm
I’m looking for a table design for a calendar display (or is there a better CSS way to do that?). I didn’t see one in the list and I know I could modify existing but if it’s already been done…
Thanks.
November 23rd, 2005 at 11:01 am
Cool stuff, but I messed up already. How can I change the widths of the colums. I have tried adding an id, but alas no luck.
and
table #om {width:120px;} in the CSS file
December 1st, 2005 at 3:32 am
I’ve used this as guide to creating a Heading Style Gallery for styling of simple heading elements. Site allows for visitor submission of CSS code and background images. See at http://steveeray.com/headinggallery/
December 14th, 2005 at 4:04 pm
Its very hard to design a good looking large list and at the same time keep the content clear. Great inspiration source!
December 19th, 2005 at 5:28 pm
I’m the author of the style “Like Adwords”. I only want to correct the URL. The correct URL is http://www.cleiton.net/
January 18th, 2006 at 3:15 pm
It´s cool, I already sent my design. Thanks!
February 7th, 2006 at 1:18 pm
Thanks a lot. Normally almost everybody says tables are out, only css is king. I’m just working on my css-redesign and like using one table. Your showcase is perfect for me.
February 28th, 2006 at 7:19 pm
Just want to make sure I’m not retarded — Most of the hover features do NOT work in IE, correct? It works fine for me in Firefox, but doesn’t in IE (version 6). Or is it just me?
Thanks! I think the table gallery is absolutely brilliant!
March 17th, 2006 at 11:07 am
How about adding buttons to previous and next style above the table? Now it’s kinda hard to keep track of where you are when you have to scroll up and down all the time and keep note of what is the current style you’re looking at.
March 17th, 2006 at 11:07 pm
Could you use script to switch out the css file so that when a link is clicked it does not retunr to the top and you can better keep track of where you are in the list? Or the next/prev buttons mentioned already, placed at the top in a way that they did not move from page to page would prevent the need to scroll.
March 18th, 2006 at 1:36 am
Added the anchors now. I am still stunned by the amount of hits…
April 8th, 2006 at 3:39 pm
Outstanding!! This is a great resource.
Having a next table button to incirment throught the table designs would be helpful though.
April 24th, 2006 at 3:19 am
Is it possible to get the list of stylesheets in a valid XML document? I’d like to parse it and display the options in a
Thanks,
Matt
April 24th, 2006 at 7:10 am
It certainly is, but why do you want to have that data? I have traffic enough as it is and no benefit from it.
Where and why do you want to display all styles in a select?
You can have the latest ones as RSS and turn that into a select if you want to.
August 17th, 2006 at 7:27 am
Hi Chris,
check your RSS-Feed. It does not work. The Endtag ‘channel’ does not match the starttag ‘item’.
——-^
August 20th, 2006 at 12:58 pm
Thanks Chris for the effort. VERY helpful resource. I punched in on ‘Feed the Host’ as a more practical way of also saying thanks also.
Alex I.
October 18th, 2006 at 4:13 pm
how about a column indicating the browser needed. There are a couple that look good in Firefox but are missing graphics and features under IE.
October 18th, 2006 at 10:52 pm
My apology up front for a stupid question, but besides the CSS, what else do I need to try these tables?
Dale
December 14th, 2006 at 5:36 pm
Id love to see this whole collection downloadable….in one file
I would love to be able to make an offline copy… is this possible ?
February 12th, 2007 at 4:28 pm
This is a great idea. I always run into problem formatting tables with my CSS. This will give me a great resource for fixing my problems. Thanks a bunch!
March 26th, 2007 at 5:16 pm
absolutly
great site source for webmasters :)
thanks for everything !!!
June 6th, 2007 at 3:46 pm
Hi Chris,
What about adding COL elements (with IDs) to the markup? To give us hooks for the columns?
June 26th, 2007 at 8:52 pm
Great thing if you need variation of colors.
June 27th, 2007 at 2:11 pm
Thanks for helpful information you catch up us with your instructional explenation.
What people do is more important that what they say…
Best regards
September 21st, 2007 at 12:25 pm
Great idea but it could use some facility for voting for the best site
October 27th, 2007 at 6:04 pm
My CSS workshop has been covering table styling. This page is a very good resource, and I will blog it on our site.
December 3rd, 2007 at 2:38 am
I posted “City Mouse” shortly after CSS Table Gallery went up. I’ve recently changed my domain name to hadseldesign.com instead of how it is listed and hosted on the site. Unfortunately, hadsel-design.com (with a hyphen) will not be supported much longer and I’d like to know how to have the domain name changed to hadseldesign.com (without the hyphen) on the entry’s links. The css and image files are in the same folder (tableshow) on the new server as they were on the old server.
April 9th, 2008 at 10:29 am
Learning, I must redesign my site
April 9th, 2008 at 5:27 pm
Dumb newbie question probably, but if one downloads the css files, there are urls with .gif files. I don’t see the gif files — only the css. How ould one get the gif files or do they create them themselves?
April 24th, 2008 at 2:54 pm
Thanks for the very useful info. I want to learn css and css table gallery well. Regards.
July 3rd, 2008 at 12:06 am
Awesome set of stylesheets. I have incorporated their use into a PHP API I wrote allowing for ajax-based CRUD operations on database content.
See a reference to your site in my api documentation here:
http://www.ajaxcrud.com/api/index.php?id=setCSSFile
Thanks again for a great resource.
August 30th, 2008 at 9:01 pm
Very very useful and great work
November 7th, 2008 at 5:24 am
Hello, look in the link of Jacob Emiliano and you can see there a web XXX. Siento no explicarme con más claridad pero no sé demasiado inglés, pero no me parece adecuado que haya una web de esas aquÃ.
November 7th, 2008 at 5:31 am
sorry, the autor of the link xxx it isn’t Jacob Emiliano, is Cleiton Francisco from Brazil
December 4th, 2008 at 7:39 pm
Great idea and remember, table is for data presentation not for page layouts. I submitted a design called Grey Scale. Hope to see it published very soon.
Thanks.
January 22nd, 2009 at 8:31 am
How to use it I do not understand, so u write how use it .But i know it is very useful for webdesigner.
March 1st, 2009 at 1:06 pm
Thank you so much for this effort. It took me a while to find this page (I can’t remember exactly where I found a link to here) but it was worth it. I think I’ll use the TagBox design for the tabular data about low-energy-building construction on my website. I still have a bug or two to sort out (e.g. a huge space introduced above the table by Blogger) so it might be some time before the usage shows up on my site but anyway, thanks again!
March 10th, 2009 at 4:46 pm
Wow! what a resource ! Amazing …
March 25th, 2009 at 2:34 am
What do I do if I want to use a style for only one table on the page, and not all. I know I need to make it a “class”, but how?
June 9th, 2009 at 9:07 pm
Hi!
I’m just a further fan of your site and I want you to know that. Thanks!
July 20th, 2009 at 9:48 am
Thanks a lot
Regards
July 23rd, 2009 at 10:14 pm
How can we get the images associated with those styles? Can you make a link for us to download those images once for all?
September 1st, 2009 at 9:30 am
By the way, is there any license for these designs? Can we use it commercial projects for the clients?