Plaid-Striped HTML Tables
Also sometime in 2005, Patrick Lauke introduced “Splintered Striper” on 24ways.org. He furthur built on the concepts first posted by David Miller after needing to apply a striped effect to a medium sized unordered list.
…Fast Forward to 2007
I recently wanted to implement some “zebra-striped” tables to display some detailed financial information. So I remembered the old post about some iTunes-inspired “zebra tables” at A List Apart. I dug up the article and quickly started implementing the code sample into my project when I hit a snag.
It seems the javascript provided in that example was designed to work off of a single id element.
Uh oh.
I can only use this script once per page and I have multiple tables to display in my financial dashboard design.
Time to upgrade this script. I collaborate with our developer Aaron and I give him the new requirements.
- This script must work off of a css class so I can apply it to any number of tables on the same page
- It should automatically stripe the table rows with alternating colors without requiring the author to manually apply a class or id to each row or cell.
Well, Aaron exceeded my expectations and authored a very useful script. He even took it a step further by designing a script that would add alternating vertical stripes and even detect the overlap and assign yet another color to the cells.
In this example we have two possible classes we can apply to an HTML table.
- class=”standard”
- class=”enhanced”
Style 1: Standard
In version one we can apply the .standard class to an html table and automatically get horizontally striped tables. Pretty simple. Since it is applied as a class and not an id there is no reason I can’t duplicate this table 100 times on the page. If I need to highlight a specific vertical path I can selectively apply one class (.overlap) to the th element and the vertical stripe appears with the overlap effect.
Style 2: Enhanced
In version two we can automatically generate horizontal and vertical stripes.
I apply the .enhanced class and automatically get vertical and horizontally striped tables without any further intervention.
