It covers a few tips and tricks on table user interface, some are obvious which is by no means a bad thing as it is handy to have them all in one place. I know as I looked down the list I got a few ideas for my Homespace Project I am working on at the minute.

Here are the highlights:

Alternating rows styling
Make the table easy to read and follow

Full row selection
Ability to select the whole row and perform a task across it makes working on a daily basis faster

Table sections
Group similar data in a clear and easily manageable manner
Obvious but implemented correctly a busy page can be transformed into a working application

Sorting
Column sorting e.g. ascending price… VERY IMPORTANT

Filtering
Filter your results, I find now with the possibilities in javascript this is a great tool as I am now able to deal with so much information on one page. For me this replaces search.

Pagination
As far as I am concerned pagination is a non javascript replacement however this may be a view not held by many customers which may find my love of dynamic content irritating

Continuous scrolling
The idea of loading in content whilst the user scrolls, I love this but not sure if mass market users would rather avoid sites being too clever
It also might be the same as streaming video, it is fine but sometimes you just want the whole thing to load / jump to the relevant content. I would imagine visiting a site a second time and waiting till your item loads might actually be irritating

Fixed table header
Make the header follow you down the page, I don’t think this is done enough and I don’t believe there are any usability issues around it

Expandable Rows
This is a nice idea, making it easy to browse lots of content until you found the one you liked.

Row actions
This section is a must read, most sites now employ these techniques so it you are not up on it then you are missing out

So that is my view on the article, please check it out and I hope it helps get you thinking about a few ways to treat your next project.

Table UI Patterns Original Article

I’m sure there is a clearer way to do this so please feel free to improve but this certainly works.


$(document).ready(function() {

ie6catch = $.browser.msie + $.browser.version;
if (ie6catch.indexOf("true6") == -1) {
alert("This is not Internet Explorer 6");
}
});