CSS-Based Tables: Modern Solutions

Advertisement

We continue 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 forms1, 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

Screenshot2
3

Redesigning a simple table4

Screenshot5
6

Zebra Tables7

Screenshot8
9

Better Zebra Tables10

Screenshot11
12

Splintered striper: Enhanced Zebra Stripes13

Screenshot14

Standardista Table Sorting (A client-side JavaScript Table Sort module)15

Screenshot16
17

Designing Tables with Stylesheets18

Screenshot19
20

SortedTable instructions and examples21

Screenshot22
23

A CSS Styled Table24 by Veerle Pieters.

Screenshot25
26

2274ways: Tables with style28

Screenshot29

Sinnhafte Websites30

Screenshot31

Data Tables and Cascading Style Sheets Gallery32 – 78 CSS Table Designs.

Screenshot33

Zebra Table Showdown34 featuring Plain DOM Scripting, Yahoo UI, Dojo, Prototype, Mochikit, mootlos, jQuery, AJS. – design67

Screenshot35

Stripe your tables the OO way36

Screenshot37

Unobtrusive Table Sort Script (Revisited)38

Screenshot39

Brainjar.com: DHTML Table Sort40

Screenshot41

Table sorting JavaScript: Unobtrusive and with alternating row colors42

Tables with further functionalities (i.e. sorting, filtering)

Screenshot43

Replicating a tree table44

Screenshot45

Reformat the Table46 and Reformat the Table 247

Screenshot48

Table not a table49

Screenshot50

CSS Style Tables Tutorial51

Screenshot52

How to create and style accessible tables53 – design56

Screenshot54

Sort Table Rows55 with Javascript

Screenshot56

The Table Ruler57

Screenshot58

sorttable: Make all your tables sortable59

Screenshot60

Sortable Tables (WebFX)61

Screenshot62

Sort’n’scroll Table63

Screenshot64

Unobtrusive Table Sort Script65

Screenshot

Dynamic Sorting of HTML-tables via XSLT

Screenshot66

Accessible Data Tables6967

Tools

  • Data Generator68 lets you generate large volumes of random, custom data (for testing purposes only).

Links and references

Books

Footnotes

  1. 1 http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
  2. 2 http://www.lukew.com/ff/entry.asp?328
  3. 3 http://www.lukew.com/ff/entry.asp?328
  4. 4 http://www.lukew.com/ff/entry.asp?328
  5. 5 http://www.alistapart.com/articles/zebratables/
  6. 6 http://www.alistapart.com/articles/zebratables/
  7. 7 http://www.alistapart.com/articles/zebratables/
  8. 8 http://validweb.nl/artikelen/javascript/better-zebra-tables/
  9. 9 http://validweb.nl/artikelen/javascript/better-zebra-tables/
  10. 10 http://validweb.nl/artikelen/javascript/better-zebra-tables/
  11. 11 http://24ways.org/2005/splintered-striper
  12. 12 http://24ways.org/2005/splintered-striper
  13. 13 http://24ways.org/2005/splintered-striper
  14. 14 http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting
  15. 15 http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting
  16. 16 http://fluidmind.org/test/css/tables.html
  17. 17 http://fluidmind.org/test/css/tables.html
  18. 18 http://fluidmind.org/test/css/tables.html
  19. 19 http://friedcellcollective.net/js/SortedTable/examples.html
  20. 20 http://friedcellcollective.net/js/SortedTable/examples.html
  21. 21 http://friedcellcollective.net/js/SortedTable/examples.html
  22. 22 http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
  23. 23 http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
  24. 24 http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
  25. 25 http://24ways.org/2005/tables-with-style
  26. 26 http://24ways.org/2005/tables-with-style
  27. 27 http://24ways.org/2005/tables-with-style
  28. 28 http://24ways.org/2005/tables-with-style
  29. 29 http://www.bs-markup.de/blog/archiv/2005/03/06/sinnhafte-websites-4-tabellen/
  30. 30 http://www.bs-markup.de/blog/archiv/2005/03/06/sinnhafte-websites-4-tabellen/
  31. 31 http://icant.co.uk/csstablegallery/
  32. 32 http://icant.co.uk/csstablegallery/
  33. 33 http://jquery.com/blog/2006/10/18/zebra-table-showdown/
  34. 34 http://jquery.com/blog/2006/10/18/zebra-table-showdown/
  35. 35 http://www.thewatchmakerproject.com/zebra.html
  36. 36 http://www.thewatchmakerproject.com/zebra.html
  37. 37 http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited
  38. 38 http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited
  39. 39 http://www.brainjar.com/dhtml/tablesort/
  40. 40 http://www.brainjar.com/dhtml/tablesort/
  41. 41 http://www.joostdevalk.nl/code/sortable-table/
  42. 42 http://www.joostdevalk.nl/code/sortable-table/
  43. 43 http://www.maxdesign.com.au/presentation/tree-table/
  44. 44 http://www.maxdesign.com.au/presentation/tree-table/
  45. 45 http://moronicbajebus.com/wordpress/wp-content/cssplay/reformat-table/index.html
  46. 46 http://moronicbajebus.com/wordpress/wp-content/cssplay/reformat-table/index.html
  47. 47 http://moronicbajebus.com/wordpress/wp-content/cssplay/reformat-table/index2.html
  48. 48 http://www.splintered.co.uk/experiments/archives/table_not_a_table/
  49. 49 http://www.splintered.co.uk/experiments/archives/table_not_a_table/
  50. 50 http://robertdenton.org/reference/css-tables-tutorial.html
  51. 51 http://robertdenton.org/reference/css-tables-tutorial.html
  52. 52 http://www.icant.co.uk/forreview/tables/
  53. 53 http://www.icant.co.uk/forreview/tables/
  54. 54 http://www.letselplein.nl/~exemplarisch/sort-table/sort-table-rows.html
  55. 55 http://www.letselplein.nl/~exemplarisch/sort-table/sort-table-rows.html
  56. 56 http://www.alistapart.com/articles/tableruler/
  57. 57 http://www.alistapart.com/articles/tableruler/
  58. 58 http://kryogenix.org/code/browser/sorttable/
  59. 59 http://kryogenix.org/code/browser/sorttable/
  60. 60 http://webfx.eae.net/dhtml/sortabletable/sortabletable.html
  61. 61 http://webfx.eae.net/dhtml/sortabletable/sortabletable.html
  62. 62 http://4umi.com/web/javascript/tablescroll.htm
  63. 63 http://4umi.com/web/javascript/tablescroll.htm
  64. 64 http://www.frequency-decoder.com/2005/11/18/unobtrusive-table-sort-script
  65. 65 http://www.frequency-decoder.com/2005/11/18/unobtrusive-table-sort-script
  66. 66 http://www.usability.com.au/resources/tables.cfm
  67. 67 http://www.usability.com.au/resources/tables.cfm
  68. 68 http://www.generatedata.com/
  69. 69 http://www.usability.com.au/resources/tables.cfm
  70. 70 http://www.lynchconsulting.com.au/go/articles/advanced-tables-tutorial/
  71. 71 http://www.sitepoint.com/article/background-colors-javascript
  72. 72 http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
  73. 73 http://www.webaim.org/techniques/tables/
  74. 74 http://www.snook.ca/archives/html_and_css/designing_data/
  75. 75 http://www.vorsprungdurchwebstandards.de/ein_herz_fuer_tabellen.html
  76. 76 http://dev.nozav.org/rails_ajax_table.html
  77. 77 http://icant.co.uk/sandbox/besttables/
  78. 78 http://www.uxmatters.com/MT/archives/000119.php
  79. 79 http://icant.co.uk/csstablegallery/tutorials.php
  80. 80 http://www.mcu.org.uk/articles/tables.html
  81. 81 http://motherrussia.polyester.se/jquery-plugins/tablesorter/
  82. 82 http://tetlaw.id.au/view/blog/table-sorting-with-prototype/
  83. 83 http://www.diveintoaccessibility.org/day_19_using_real_table_headers.html
  84. 84 http://joeclark.org/book/sashay/serialization/Chapter10.html

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    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.

  2. 2

    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

  3. 3

    There is a CSS Tables Gallery out there: http://icant.co.uk/csstablegallery/

    Has a list of styles you can use for your tables.

  4. 4

    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.

  5. 5

    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

  6. 6

    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.

  7. 7

    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

  8. 8

    nice collection, I’ve added your link on my site.

  9. 9

    WOW this is a great list, great resource… I like the 6th most… thanks for sharing :)

  10. 10

    This is a great article, very well laid out and very informative, thanks alot.

  11. 11

    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.

  12. 12

    You help me, thanks great table examples.

  13. 13

    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.

  14. 14

    Thanks for posting this, it’s amazing how much difference a couple of simple colours can make to a table

  15. 15

    very helpful post.

    i already made this trick in use in my new free template for phpLD script when i made another tableless template :)

  16. 16

    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.

  17. 17

    Merci, ce sont des excellents examples.

  18. 18

    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?

  19. 19

    thank you great article great table designs.

  20. 20

    Really a great job,I like it! and thanks for your sharing.

  21. 21

    thanks for you great job

  22. 22

    I’ve tried one of that on my site. Thanks

  23. 23

    very good this post, following a link to learn more ( book css )

  24. 24

    Can I humbly submit my own animated and REGEXP-friendly table sorter to this page?

    http://mitya.co.uk/scripts/Animated-table-sort-REGEXP-friendly-111

    Thanks

  25. 25

    Whats with all the Canadian bands?

↑ Back to top