The technique of “zebra-striping” tables and other data-centric html elements has been around for a long time. It is an easy way to make mundane, hard-to-read elements pretty and readable. You can see an example of this technique below. Notice how each row is a difference color? This is what is referred to as “zebra-striping”.
There has been many times I’ve wished to get this effect within Miva Merchant 5. Luckily, Merchant’s SMT template system or “store-morph” technology allows for this. In fact, it’s pretty simple.
According to Miva’s “store-morph” documentation:
When stepping through an array, in a foreach loop, the current position in the array is given by the pos1 variable.
With this information, we simply use the modulo operator while we’re stepping through an array to decide whether or not we’re on an even row.
<table id="basket"> <mvt:foreach iterator="item" array="basket:items"> <!-- if pos1 MOD 2 = 0, then this is an even row because pos1 is divisable by two with no remainder --> <mvt:if expr="(pos1 MOD 2 ) EQ 0"> <tr class="even"> <mvt:else> <!-- otherwise it's an odd row --> <tr class="odd"> </mvt:if> <td>&mvt:item:name;</td> <td>&mvt:item:price;</td> </tr> </mvt:foreach>
Now all that’s left to do is style the rows with css:
#basket tr.even { background-color: #eee; } #basket tr.odd { background-color: #ddd; }
Any questions?
Jessica Enders Says:
November 18th, 2007 at 3:31 pm
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
Luke Visinoni Says:
November 19th, 2007 at 11:44 pm
Regardless of any statistics I know from personal experience that zebra-striping relieves me of any self-doubt when I am looking at tabular data. That is enough to convince me they add value to my layout.
Jessica Enders Says:
May 26th, 2008 at 1:10 am
Hi Luke
I too like zebra striping and miss it when it’s not there. I was concerned, however, that others might not feel the same way as us - maybe for some people zebra striping makes things harder to read.
I was also keen to be able to quantify the benefit of zebra striping for any who are in arguments about its worth, hence the study. In case you are interested, the (surprising) results are now public at http://alistapart.com/articles/zebrastripingdoesithelp.
Stay posted for the results from my second, follow-up study.
Cheers
Jessica