graphicpush

Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Javascript and Tables: Perfect Together

Swapping colors, throwing in some padding, dropping in background images and getting all funky with border widths are are fine when working with tables, but the tag is fundamentally static and becomes little more than 1997-era HTML.

As just about everyone reading this is aware, the concept of user interfaces constructed from tables is being phased out in favor of semantic, CSS-based design where the markup is focused on content, not design. But the initial reason for the <table> tag’s creation has not disappeared—that of displaying proper tabular data in structured columns and rows.

But frankly, ye olde <table> is boring. Swapping colors, throwing in some padding, dropping in background images and getting all funky with border widths are good design practices, but the tag is fundamentally static and becomes little more than 1997-era HTML. That is, completely non-interactive.

But recently, a few javascript gurus have introduced fresh life into the table. Through a bit of script and CSS, it can become a fully interactive, user-controlled object.

From The Daily Kryogenix comes an excellent tutorial about custom sorting of tables. The example the author provides is perfect: a collection of employee info, set in a plain HTML table, that can be sorted by name, starting date, salary and more. This enables the data to live in ways the user intends, and is ideal for corporations seeking to display large amounts of fiscal information or employee contact info. This concept is also covered by Danny Goodman.

Often the need for complex organization goes beyond simple reordering. The recently released FlexiGrid (javascript.com), enables data to be presented in an elegant hierarchy. The viewer controls multiple levels of deeply nested table data, and expands certain sections while leaving others closed.

A List Apart recently published two excellent articles on increasing the visual usability of tables. The first is “The Table Ruler,” which uses your mouse to highlight columned data with CSS-controlled rollover states. “Zebra Tables” is inspired by the beauty of iTunes, and along with sharing some visual fundamentals as to why the eye reacts better to certain designs, presents some simple javascript to achieve an effect similar to Apple’s striped interface.

Then there is the problem of data simply taking up too much screen space. Since many websites are designed for 800×600 resolution (especially older, more established sites), it is not difficult for expansive tables to quickly eat up horizontal real estate. Although tables within iFrames work, Webreference.com details a means of using internal scrollbars through javascript.