HTML5 and CSS3 Zebra Striping - Look Ma No JavaScript

It was 5 maybe 6 years ago when I first started learning jQuery. One of the first things I did was order the jQuery In Action book. If you have read that book you should remember one of the first examples given, zebra striping a table. To me this example sold me on the idea of jQuery even if I did not actually understand how jQuery worked at the time. With one line of code I could now alternate background colors in a table.

In case you have not seen this example let's examine how it works. I am going to start in the legacy PJ (pre-jQuery) way of doing things. Back in the PJ era web sites would generate all the markup on the server and send the results to the browser. Zebra striping a table meant you would create some logic like the following (I am going to use Razor here because honestly I have forgotten how to do Web Forms):

<

table

>


@{
for(int i = 0; i

<

10; i++){
if(i % 2){

<

tr

class

="even-row"

><

td

>

{stuff goes here}

</

td

></

tr

>


}else{

<

tr

class

="odd-row"

><

td

>

{stuff goes here}

</

td

></

tr

>


}
}
}

</

table

>


When doing zebra striping in this classic way you need to manage adding classes to each row to control the alternating style. While there is nothing wrong with this technique, especially back in those days, it places the client-side concerns on the server. This is a very fragile way of doing things, especially in light of the way modern browsers work.

Now let's look at how zebra striping works when using jQuery. I am going to reuse the markup for both the jQuery and my CSS only example. Since I am a big college sports fan I thought I would list the most up to date ACC members, because let's face it conference memberships change almost daily. This should give me 14 rows that can have alternating background colors.

<

table

>


<

tr

>


<

td

>

Boston College

</

td

>


<

td

>

Eagles

</

td

>


</

tr

>


<

tr

>


<

td

>

Clemson

</

td

>


<

td

>

Tigers

</

td

>


</

tr

>


<!-- Truncated for the blog, see the jsFiddle for Full Demo -->


<

tr

>


<

td

>

Wake Forest

</

td

>


<

td

>

Demon Deacons

</

td

>


</

tr

>


</

table

>


I created a jsFiddle so you can play with the example code yourself. Now instead of managing the alternating styling on the server you can apply a CSS rule to the matching table rows. Because jQuery introduced advanced selectors you can obtain a list of odd numbered rows (7 in this example) and dynamically set the background color to a light gray.

$(

"tr:odd"

).css(

"background-color"

,

"#eee"

);

This is fantastic! Now I no longer need to worry about this on the server and can hand it over the someone that focuses more on the client-side of things. It is also extremely helpful in the context of an AJAX application because my table content has a much higher likely hood of changing without a full page refresh. When I happens I can simply reapply the styling to the new set of table rows.

Last week I posted an article about why it is time to move past jQuery reliance. One point I was trying to make was how jQuery had done a great job of pushing the browsers to offer native functionality that jQuery provides. One of those native features is advanced selectors.

Now instead of using some JavaScript magic to select every other table row you can create a CSS rule based on a selector.

tr

:nth-child(odd)
{

background-color

:

#eee;


}

This is even better than the jQuery trick because now I need no JavaScript and I do not need to run special selector calculations to retrieve the targeted table rows. Now the styling is automagically applied by the browser. This means that as I dynamically change the content in the table the browser will automatically apply the desired styles without having to manage that process in the JavaScript. This means less fuss, less margin for error and easier application maintenance.

So what about old browsers that do not support the cool new CSS selectors? Well there is always using polyfils. But more and more my desire is to just let them have the bland, degraded experience. Its expensive to write all the extra code to make this have the exact same experience as someone with a modern browser. The overall effect is just not going to be as nice, etc. And I think I will wrap this up before I start a whole new topic!

So be excited you can now make a table zebra striped with no concern on the server or the need to JavaScript! Check out the jsFiddle I created so you can see it in action.

Share This Article With Your Friends!