|rows table template||Omar '0m4r' Adobati||Italy||Simple, clean and a quite classic table template :)||Download|
|Blue Dream||Teylor Feliz||USA||Beautiful combination of Blue and Brown.||Download|
|Web20 Table||Netway Media Webdesign||Germany||Nice, very simple and clean style with a gradient.||Download|
|TagBox||TagBox||Deutschland||Table design based on the fresh TagBox style.||Download|
|Maniac Merchants||Marten Willberg||Germany||A Georgia headline with a green-blue body.||Download|
|Acuity Design Style||Acuity Internet Marketing||Brazil||Black Style, with smooth grey and green elements.||Download|
|Smooth Taste||Thomas Opp||Germany||Smooth style with my favourite colours. Enjoy!||Download|
|Sky is no heaven||Michael Schmieding||Germany||My new Design colors.||Download|
|Foggy Country||Straussennest||South Africa||Foggy Country - Green Trees planted on brown sugared ground.||Download|
|Blue gradient||Mihalcea Romeo||Romania||Nice table design based on a very subtile blue gradient.||Download|
|desert||Marc Bodon||Germany||brown, red, grey and white... simply smooth ;-)||Download|
|orange and grey||Christoph Plessner||Germany||Download|
|REDandBLACK||Martin Paffenholz||Germany||Style like our website. Best viewed in Mozilla Firefox.||Download|
|The OC||Rodolfo Marin||Chile||Table based in the color table from one of my latest design, overclockers.cl||Download|
|blue like ice||Erik Ginnerskov||Denmark||Nice and clean. No fancy stuff.||Download|
|Dark Night||Michael Schmieding||germany||That's my design with my favorite colors. I hope you like it.||Download|
|mediagroove||mayumi takami||Japan||i like this type of design.||Download|
|chives' tables||chives||Germany||Clean and spicy design from chives-team||Download|
|table red-white||Jens||Germany||Inspired by the original 'Assischale' and dedicated to 'Kollesche' ;-) Best wishes to everybody!||Download|
|Candy||Stefan Bihl||Germany||Hi, I hope this CSS File is not to pink ;-) Regards Stefan||Download|
|Blue||Newton de GÃ³es Horta||Brasil||Minimalist design in blue||Download|
|Azulon||Joorge Epunan||Chile||Just playing with the ccode. I like the blue, and how it combines with other elements Looks pretty nice.||Download|
|Casablanca||Rodrigo Castilho Galvao Ferreira||Brazil||Inspired by Casablanca Web Standards Template existing in Template Design Competition, WESTCIV.||Download|
|Blix Theme||Newton de GÂ—es Horta||Brasil||Table design based on Sebastian Schmieg's Blix Theme for Wordpress 2.0. Icons by Kevin Potts||Download|
|Poetry For Browser||Monika Thon-Soun||Austria||Code is Poetry. Internet Explorer you can't show us arrows and hover effects. You can't show us correct borders. It looks like that you can't understand poetry. Don't be jealous of browsers. It is simply:Learn to be a browser and everything is going to be alright.||Download|
|Pretty In Pink||Viktor Persson||Sweden||Smooth, pretty and pink. Best viewed in Mozilla Firefox.||Download|
|Two times table||Stu Nicholls||England||A very basic table for all Internet Explorer users but something VERY different for understanding browsers :o Hope you like it.||Download|
|bluish||Stefan Herzig||Germany||Blue style with a hint of Amiga||Download|
|pop.pop.star||Timo Wirth||Germany||Inspired by Andy Warhol, this bold and simple table emphasizes the table rows (rather than the columns).||Download|
|Tabular tables||Stu Nicholls||England||A simple table using a little border art for mouseovers.||Download|
|Sea Glass||Stephanie Leary||US||Subtle and green.||Download|
|Orange Brownie||Cody Lindley||US||Nice idea, the site that is.||Download|
|Blaugrana||Choan C. GÂ‡lvez||Spain||Alternating row and link colors. Enhancements (hover, image replacement) for modern browsers.||Download|
|Shades of Blue||Velizar Garvalov||Bulgaria||Simple blue design with some :hover effects||Download|
|Gmail scrolling||Mauricio Samy Silva||Brazil||A look-alike theme with fixed height for the table container DIV and vertical scroll bar. There is an :hover behavior on caption background image.||Download|
|Shades of Purple||Demetrius Francis||Bahamas||Basic styles with a purple scheme.||Download|
|Turkish Delight||Paul Brownsmith||UK||Raspberry shades with chocolate rollovers for compliant browsers. Clean, clear and choco-sweet.||Download|
|Grayed Out||Terence Ordona||US||A simple look and feel that improves with the quality of your browser's CSS support. Shows possible use of a la Excel styling.||Download|
|Nimbupani||Divya||Singapore||A minimalist style that explores the relative weights of the lines that differentiates one element from the other. The same design elements has also been used on this site http://jflickruploader.blogspot.com||Download|
|Trekkish Violets||Patryk Zawadzki||Poland||Well... a bit trekkish I guess (but not really inspired by holodeck). Blues and violets here and there. Looks best when viewed in Firefox.||Download|
|Golden style||Michael Horn||Germany||Golden coloured style, with hover effects in modern browsers (Firefox, Opera).||Download|
|Oranges In The Sky||Krasimir Makaveev||Bulgaria||Just a simple table design with orange and blue links!||Download|
|Rockstar||Jens Wedin||Sweden||Simple classic design with advanced stuff for standard compliant browsers.||Download|
|Greyscale||Two Plus Four||UK||Minimalist design in black, white and shades of grey. Resizeable text and CCS2 enhancements for those that know.||Download|
|Coffee with milk||Roger Johansson||Sweden||Clean, no-nonsense design with a latte-ish colour palette. Some extra design features in modern browsers.||Download|
|Clean and crisp||Mats Lindblad||Sweden||Clean and Crips table style, with a little MS feel to it. Although it works best in Firefox.||Download|
|Winter Blues||Gunta Klavina||Latvia||Blue pastel coloured style.||Download|
|Green Life||Vitaly Friedman||Germany||A Fresh, Warm and Readable Table||Download|
|iTunes||John Lawrence||UK||Table design based on Apple's iTunes software.||Download|
|MintGreen||Taimar Teetlok||Estonia||Warm and friendly mint-green presentation.||Download|
|Heaven is Closer||Niko Neugebauer||Portugal||A simple style that improves with the quality of your browser's CSS support||Download|
|Cygenta||Tim Baker||Canada||Monospaced with a painful palette.||Download|
|Spread Firefox!||Thierry Koblentz||USA||Best experience in Firefox! ;-)||Download|
|Muted||Dan Champion||Scotland||Grey and beige, clean and simple. Minimal use of CSS2 fancy bits like :after and tr:hover.||Download|
|Inset cells||Mauricio Samy Silva||Brazil||A table with inset cells and the use of adjacent-sibling selectors and border-spacing propertie for compliants browsers.||Download|
|Lab Report||Louise Dade||UK||Clear, simple and informative data display for a scientific paper. Includes a background image, download icon and a "faux alpha transparency" rollover effect (a tiny tile with every other pixel transparent). Fully commented CSS file.||Download|
|Orange You Glad||Randy Peterman||USA||There is an image required for standards compliant browsers to get a 'bonus' download arrow for the download links.||Download|
|10 minutes||Richard Grevers||New Zealand||Minimalist, using separated borders and spacing with a four-colour pallette.||Download|
|Spearmint tints||Ben Boyle||AUS||Simple coloured style with a minty theme.||Download|
|Table structure||Ben Boyle||AUS||Contrasts headings and cells, displays heading scope and summary (where supported).||Download|
|Alpha transparency||Mauricio Samy Silva||Brazil||Simulating alpha transparency with CSS||Download|
|Grey suits you sir||Stuart Colville||UK||Smart grey table with hover effect.||Download|
|Cusco Sky||Braulio AndrÂŽs Soncco Pimentel||PerÂœ||Soft blues like Cusco Sky||Download|
|Blue On Blue||Glenn Slaven||AUS||A serif font table with a bit of colour to define the cells.||Download|
|Chrome de la chrome||Chris Heilmann||UK||Using gradient backgrounds to create chrome effects||Download|
|Minimalist||Chris Heilmann||UK||As minimal as you can get, only lines around the body cells||Download|
|Plain old table||Chris Heilmann||UK||Tried and true, boring grey table with a one pixel line||Download|
What is this about?
The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them.
Basically the thread/email that gave me the idea was this request on the evolt list.
Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering.
There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go.
Table and CSS tutorials
May the following off-site resources give you wisdom and inspiration:
- HTML Tables best practice - Chris Heilmann (a bit tongue-in-cheek, done for a quick client presentation)
- HTML, CSS and tables - the beauty of data - Chris Heilmann (ah, that one)
- A CSS Styled Table - Veerle Pieters.
- Bring on the tables - Roger Johansson.
- CSS Tables - Robert Denton.
- Designing Data Part 1: Table structure - Jonathan Snook.
- Designing Data Part 2: Adding Style - Jonathan Snook.
- HTML, CSS and tables - the beauty of data.
- Styling Tables with CSS - Dan Delaney.
- Tables for Tabular Data.
- Tabular Weirdness - Eric A. Meyer.
- The Mystery Of Why Only Four Properties Apply To Table Columns - Ian Hickson.
- Why CSS styling is for tables too - Michael Meadhra.
- Zebra Tables - David F. Miller.
Most blatantly stolen from Laura L. Carlson's extensive tutorial list - give the lady a big hand!