Smashing Magazine we smash you with the information that will make your life easier. really.
CSS-Based Tables: Modern Solutions
December 29th, 2006 in CSS | 73 Comments
We coninue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms, today we present some useful techniques for displaying information in a tabular mode. In fact, tables can present data quite efficiently, particularly if you can use some sorting or filtering functions in order to improve the legibility of the text stored in the table. Furthermore, Zebra tables are becoming more and more popular, and the techniqies supposed to enhance their functionality appear on a weekly basis.
So what do we have? Let’s take a look around: over 28 modern css-based techniques in a brief overview. Links checked: May/27 2008.
Zebra Tables
Splintered striper: Enhanced Zebra Stripes
Standardista Table Sorting (A client-side JavaScript Table Sort module)
Designing Tables with Stylesheets
SortedTable instructions and examples
A CSS Styled Table by Veerle Pieters.
Data Tables and Cascading Style Sheets Gallery - 78 CSS Table Designs.
Zebra Table Showdown featuring Plain DOM Scripting, Yahoo UI, Dojo, Prototype, Mochikit, mootlos, jQuery, AJS. - design67
Unobtrusive Table Sort Script (Revisited)
Brainjar.com: DHTML Table Sort
Table sorting JavaScript: Unobtrusive and with alternating row colors
Tables with further functionalities (i.e. sorting, filtering)
Reformat the Table and Reformat the Table 2
How to create and style accessible tables - design56
Sort Table Rows with Javascript
sorttable: Make all your tables sortable
Dynamic Sorting of HTML-tables via XSLT
Tools
- Data Generator lets you generate large volumes of random, custom data (for testing purposes only).
Links and references
- Accessible Data Tables
- Advanced HTML Tables and CSS Tutorial
- Alter Table Row Background Colors Using JavaScript
- Bring on the tables: Roger Johansson explains when to use tables for presenting information on the Web.
- Create tables that transform gracefully by WebAIM
- Designing Data: Table structure by Jonathan Snook
- Ein Herz fuer Tabellen (German) explains how to use tables efficiently and when not to use them.
- How to paginate, sort and search a table with Ajax and Rails
- HTML Tables best practice Presentation
- Refining Data Tables by Luke Wroblewski.
- Tables and CSS Tutorials by Chris Heilmann
- Table Manners by Jim Byrne
- Tablesorter plugin for jQuery
- Table Sorting with Prototype
Books
- Mark Pilgrim, Dive Into Accessibility: Day 19: Using real table headers
- Joe Clark: Building Accessible Web-Sites. Chapter 10: Tables and Frames
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 40 Free Fonts
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 65 Flash Designs
- Beautiful Icon Sets
- Beautiful Wallpapers
- Beautiful Photos
- Free Design Templates
- Free CSS Layouts
- Photoshop Tutorials
- Illustrator Tutorials
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Badges and Pins
- Black & White Photography
- Block Quotes
- Blog Designs
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Form Design Patterns
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Product Designs
- RSS Best Design Practices
- RSS Feed Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typography Showcase
- Typography BIG 1, 2
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- WYSIWYG Editors
Webtips
Fresh Bookmarks
50 Beautiful Gig Posters
"The gig poster scene isn’t exactly the best kept secret among music fiends like myself. It is a tradition that started in the 60’s and is still going strong."
An Ode To Criterion Box Art
The showcase of DVD box art design.
How Usable is Your Copy?
There is one element that should not be ignored as it alone can waste all the hard work you’ve put into crafting a beautiful UI. Copy.
Is There Anything You Wish CSS Could Do?
15 Designer/Developers Sound Off
Color inspiration from Rainbows
A gallery of rainbow photos.
Seek Attention jQuery plugin
The “seekAttention” plugin gracefully gets your users attention by fading out a definable area but leaving the target element.
Yahoo Design Stencil Kit
This kit contains basic UI design templates (grids, placeholders, tabs, navigation, pagination etc.) and is available for OmniGraffle, Visio (XML), Illustrator (PDF and SVG), and Photoshop (PNG). Useful for wireframing.
Christian Watson (December 30th, 2006, 12:56 am)
This is a useful list - thanks for collecting these examples together.
However, many of the examples are more about using JavaScript to add functionality to tables (sort, filter, etc) rather than about using CSS to style them.
It might be more helpful to further categorize this list in order to make it more useful to people. For example, what are the special features of each example that make for its inclusion in the list?
As a designer, I’d rather have fewer examples with more information for each. Just my 2c.
David G. Paul (December 30th, 2006, 1:55 am)
cool examples, I actually remember blogging about the forms one you did a while back - so I’ve mentioned your latest (this tables) one now as well
Divya (December 30th, 2006, 8:51 am)
There is a CSS Tables Gallery out there: Link [icant.co.uk]
Has a list of styles you can use for your tables.
Jesse (December 30th, 2006, 9:43 am)
Hey,
Good site and good list. Not to spam your comments or anything, but I build a script combining the zebra striping (from Jop De Klein/David F. Miller) and the sort functionality (from kryogenix.org) with a few of my own additions (disabling rows) and allowing the tables to be submitted. Definitely useful in web apps if you don’t have a full library like the YUI. It all degrades perfectly so the form will always work too. If you enjoy it and feel like adding it to your list, go for it.
Guy Mc Paul (December 31st, 2006, 4:58 am)
Really a great job, as ususal. I find your lists always very precious and inspiring. Keep going like this.
By the way, happy new year.
Guy
Becky (January 4th, 2007, 4:50 am)
The Standardista Table Sorting (A client-side JavaScript Table Sort module) page LOCKS UP my Firefox 1.5.0.9 on Mac OS X. A pretty annoying effect.
Nice list, otherwise.
add (January 4th, 2007, 8:58 pm)
How stupid is that? Using CSS tables is like using tables for layout. It’s all about semantics…
was created for tabular data, so why not use it that way
css gallery (January 6th, 2007, 2:53 am)
nice collection, I’ve added your link on my site.
PohEe,com (January 22nd, 2007, 9:29 am)
Nice article. It had been blink to Link [blinklist.com]
Alex Mos (January 31st, 2007, 7:30 am)
WOW this is a great list, great resource… I like the 6th most… thanks for sharing :)
Sarah (March 9th, 2007, 10:20 pm)
This is a great article, very well laid out and very informative, thanks alot.
Bob (March 26th, 2007, 4:33 pm)
Thanks for taking the time to post this. It’s amazing how much difference a little colour makes to something as simple as a table.
Hostimal (June 27th, 2007, 4:06 am)
You help me, thanks great table examples.
Keral Patel (July 23rd, 2007, 12:00 am)
This is really a nice collection. I did searched for CSS tables but I was shown all useless results but I was knowing that smashing magazine does have nice resources on this kind of stuff. Landed here and Dang found it the exact thing I was looking for.
Thanks a lot for the reference links.
Stacy (August 15th, 2007, 9:56 pm)
Thanks for posting this, it’s amazing how much difference a couple of simple colours can make to a table
Syed Balkhi (August 21st, 2007, 9:15 pm)
very helpful post.
i already made this trick in use in my new free template for phpLD script when i made another tableless template :)
Nikki (October 10th, 2007, 6:17 pm)
Our whole site is CSS based and I found your insight into CSS tables (and CSS in general),both interesting and useful. Thanks Vitaly and Sven.
Nouralhouda (March 28th, 2008, 4:41 am)
Merci, ce sont des excellents examples.
what? (May 8th, 2008, 10:18 pm)
add wrote: “How stupid is that? Using CSS tables is like using tables for layout. It’s all about semantics…
was created for tabular data, so why not use it that way”
Less stupid than you. The examples presented clearly contain tabular data… or were your eyes closed when your looked at this page?