Elite Zebra Tables 2.0
Version 2.0 of the Elite Zebra Tables fixes some sorting functionality, but more importantly allows tables and forms to degrade gracefully.
Contents
Introduction
(top)Zebra tables are a great way to display data in a manner easy on the eyes.
Here, we elaborate on Jop de Klein's modifications of the original zebra tables script by David F. Miller. These original scripts provide the basis for styling html tables with alternating row colors and allowing row selection using simple javascript.
These tables are also sortable. By clicking on a designated header, the table will sort itself using javascript. This part of the widget comes from kryogenix.org's sortable tables script.
So what has eklekt.com contributed?
Well, first of all, we have combined the two scripts to work together. We have also
expanded the sortable script to allow the user to specify which columns should be
sortable. This way, if you have a column which you do not want to be able to sort by,
you can. Also, we have written a script to allow you to submit the selected rows
of a table using a form (oh, and by the way, your order is preserved when you submit).
You can also have links within the zebra/sortable tables.
And finally, you can have more than one zebra table or sortable
table, or a combination, on the same page. Check it out below.
How to Use
(top)Striping Functionality
Give your table a classname of "striped." The javascript will find all of the "striped" tables and make the zebra striped. All of the rows to be striped must be inside of a tbody tag.
Sorting
Give your table a class of "sortable." The javascript will grab
the first row of the table (not necessarily in a
thead tag) and will try to make each
cell sortable. Only cells which also have a class of "sortable"
will be given the functionality to sort that column. (Therefore,
you can disallow the sorting of specific columns by not adding
that class declaration.)
The script will automatically detect the datatype of the column
based upon the first row to be sorted (not the "header" row.)
All data in each column should be of the same data type to ensure
proper sorting. Date sorting is a little rigid and all dates must
be in a MM/DD/YY or MM/DD/YYYY format. (The forward slashes can
also be hyphens.)
One more note: each tbody tag within the
table is sorted independently. (This functionality
seems to be broken in Safari).
Selection & Submission
- General Uses
- Give your table a classname of selectable. If you want to submit the selections (and other data) in your table, encapsulate the table in a form tag. To get the form to submit the values of the rows in your table, you should include a column of checkboxes in your table with the appropriate name and value attributes. Each time a row is selected, the checkbox will be marked, and vice versa. Also, It is possible to make the checkbox column not display.
- Making rows selected by default
-
To make a row selected by default, give its checkbox input an
attribute of checked="checked".
Example: <input type="checkbox" ... checked="checked">
-
To make a row selected by default, give its checkbox input an
attribute of checked="checked".
- Disabling rows
- To disable a row, give it a class name of "disabled". If there are checkboxes in that row, you should disable them as well by adding disabled="disabled".
- Hiding the checkbox column
- To hide a column, give every cell in that column a class of "hideme". This includes header cells and footer cells as well. The script will go through the table and make each of these cells have a display property of 'none'. (See the Notes to learn why we must do this.)
- Using select all and select none
- Create a button within the table and assign it a class of either 'select_all' or 'select_none' - depending upon which behavior you want to assign to it.
Notes
(top)Why can't I see the headers in the "Sortable Table"?
The style sheets were combined to work together. I was too lazy to change the sortable table to have its own style sheet. This should be a simple fix, but I have no need to change it, so I haven't
Why isn't the table sorting my dates?
The date sort function is a bit funky. Your dates have to be in either mm/dd/yy or mm/dd/yyyy format right now (or you can replace the "/" with "-"). I could be totally wrong on this, but that's what I seem to remember. The fix should be a simple regex change as far as I can tell. Again, I haven't gotten around to this yet.
Why can't we use the colgroup tag to hide the checkbox columns?
This actually does work in IE and cleans up the html markup quite considerably. However, the colgroup tag is not totally supported in other browsers (namely Firefox). There seems to be a dispute about some ambiguity in the css specifications as to which attributes can be applied to colgroups. The 'display' property doesn't apply to colgroups in Firefox (maybe visibility:collapse would work?) so the best way to get the script working cross-browser was to have the javascript actually hide each element individually.
Why is your script good?
Look at the html! It's clean and easily understandable. There are no "onclick" events scattered in every row or cell. The javascript automatically handles all of that. And, the styles are easily customizable through the use of css. It just makes things a lot more readable. I'm sure there are more reasons, but that's why I like it.
Why is your script bad?
Because the functionality of the sort and the select both depend on javascript. Well...it all depends on javascript - but the zebra striping has no functionality, it is purely cosmetic. So if that is not working, then it isn't going to affect your page.
Why do your notes suck so much?
As I've said before...I'm lazy. And drunk.
ENJOY!!!
Changes
(top)- Sort can handle negative numbers now.
- Submission deprecates and works when javascript is turned off.
Demo
(top)Sortable Selectable Zebra Table
Note that only the first two columns are sortable. Also, the italicized rows are not selectable. Finally, the bottom three rows of the table are sorted independently.
Sortable Table
The 'clickable' headers have white text and a grey arrow, so it may be
difficult to see them on this page. However, this is a simple change
which can be made in the stylesheets.
Also, notice that this table sorts all of the rows together, unlike the
previous example which had two different "groups" to sort.
| Pos | Artist | Trackname |
| 1 | Lost In The Plot | The Dears |
| 2 | Poison | The Constantines |
| 3 | Plea From A Cat Named Virtute | The Weakerthans |
| 4 | Melissa Louise | Chixdiggit! |
| 5 | Living Room | Tegan And Sara |
| 6 | Speed | Bran Van 3000 |
| 7 | Fast Money Blessing | King Cobb Steelie |
| 8 | Sore | Buck 65 |
| 9 | Love Travel | Danko Jones |
| 10 | You Never Let Me Down | Furnaceface |
Striped Table
| Pos | Artist | Trackname |
| 1 | Lost In The Plot | The Dears |
| 2 | Poison | The Constantines |
| 3 | Plea From A Cat Named Virtute | The Weakerthans |
| 4 | Melissa Louise | Chixdiggit! |
| 5 | Living Room | Tegan And Sara |
| 6 | Speed | Bran Van 3000 |
| 7 | Fast Money Blessing | King Cobb Steelie |
| 8 | Sore | Buck 65 |
| 9 | Love Travel | Danko Jones |
| 10 | You Never Let Me Down | Furnaceface |
Comments
Does zebra striping really improve readability
Hello
As someone who has written about zebra striping in the past, I thought you might be interested in this video.
http://au.video.yahoo.com/video/play?vid=1472613
It’s about a study I have done into whether zebra striping actually improves readability.
Feel free to contact me for more information.
Warm regards,
Jessica
dont waste your time on jessica's video - it has no info
she just wastes your time showing you zebras (animals!), then talks about some online survey, and if you want to know the "surprising" results of her test, you will have to hire her, or come see her at some conference.
no useful info in this video.
Jessica is a sad joke
Like the previous poster said - Jessica's video is offensive. You have a guy who puts a lot of work into this, and you just piggy back on his work to self promote your "service" and provide no value in a very disrespectful manner. So here is some dis-respect back your way...
1. If your services are as professional as your video is, anyone who pays you more than $1/hour is overpaying. Also, your blatant disrespect to this person's work exhibited by your approach shows very inexperienced, non-savvy, tactless business skills on your part.
2. I doubt anyone will contact you for your UI consulting services after your poorly delivered, juvenile, and 'looks-like-it-was-made-by-a-13-year-old' plug. In fact, looking at your picture, you need to lose about 30 lbs. before anyone contacts you for any other kind of professional service you may be able to offer.
RE: Jessica is a sad joke
She does NOT need to loose 30 pounds, she is hot. A beautiful Brunette.
Plus, in your desperate and immature attempt at showing off to everyone how you've found fault with someone, you've shown yourself as being a rude, offensive, nasty person.
Moderating Comments
I don't censor or unpublish any comments, but anymore discussion regarding Jessica Enders' work or personal attacks on anybody will not be published to the site.
If there are questions or concerns about the script, please still feel free to post them here, although I can honestly say I have not seriously worked on the zebra tables script in over a year.
-Jesse
What happened to the links
I'm trying to create a selectable sortable table with checkboxes like the one in your example. But the link to your script and stylesheet is broken. Can you fix them, or email me the code?
Fixed now
That should be fixed now - I had some issues with my hosting a month back or so. I guess I forgot to check all of the demo pages.
-Jesse
My intention
I have just returned to this site to link to the findings from my research, in case anyone is interested, and was distressed to read some of the comments about me. I am a real person, after all.
My intention in posting a comment originally was to let anybody who is interested in zebra striping know that there is actually some research going on into its usefulness. In no way did I want to undermine Jesse's great work, rather I wanted to add to it.
If you are interested, the research results are (freely) available on the A List Apart website: http://alistapart.com/articles/zebrastripingdoesithelp
Post new comment