Multiple Approah to Zebra Table(alternate row backgrould color)

Table was used to manage layout in the past, but after CSS was introduced to the internet world, table quits the job it’s not capable for and steps back to it’s original task: arrange data into rows and columns of cells. In UI design, zebra table is the most common way to display data, alternate row with different background color will guide our eyes along the row. It’s not a difficult job, and there are different approaches to achieve the result

HTML Code

Let’s start with the simple html code. I use thead, tbody, tfoot in this table example because a lot times we don’t want header and footer have zebra strip but tbody rows.

 <table class="zebra">
 <thead>  <tr><th>.... </thead>
  <tbody>  <tr><td>.... </tbody>
  <tfoot>  <tr><td>.... </tfoot>
 </table>  
  

CSS3

It’s the simplest way to do a zebra Table by CSS3’s nth-child selector, but the nth-child selector only has limited browser support(check the browser support).

Quote from W3C: “The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element. For values of a and b greater than zero, this effectively divides the element’s children into groups of a elements (the last group taking the remainder), and selecting the bth element of each group. For example, this allows the selectors to address every other row in a table, and could be used to alternate the color of paragraph text in a cycle of four. The a and b values must be integers (positive, negative, or zero). The index of the first child of an element is 1.”

tbody tr:nth-child(2n+1) {
  background-color: #99ff99;
} /*same as tbody tr:nth-child(odd)*/

Click here to see the demo page

jQuery

For now, jQuery might be the best way to get a zebra table since it’s simple, efficient and has cross-browser support.

      $(document).ready(function(){
          $(".zebra tbody tr:nth-child(odd)").addClass("odd");
		  $(".zebra tbody tr").mouseover(function(){
				$(this).addClass("over")
												});
		  $(".zebra tbody tr").mouseout(function(){
				$(this).removeClass("over")
												});
			})

Click here to see the demo page

ASP.NET

We definatly can use jQuery for zebra table in ASP.NET, and it’s what we do a lot. However, ASP.NET has its own ways to get it too.

Repeater Control: ItemTemplate & AlternatingItemTemplate

<asp:Repeater runat="server" ID="zebraData">
        <ItemTemplate>
                <tr class="even"><% ... %> </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
                <tr class="odd"><% ... %> </tr>
        </AlternatingItemTemplate>
</asp:Repeater>

GridView Control

<asp:GridView ID="ListViewTable" runat="server"  
    AllowPaging="true"  
    CssClass="zebra"   
    AlternatingRowStyle-CssClass="even">  

ListView Control

<asp:ListView ID="ListViewTable" runat="server">
<LayoutTemplate>
<table class="zebra"> 
<thead>
    <tr>
        <th>Col</th>
    </tr>
 </thead>
<tbody>
    <tr id="itemPlaceholder" runat="server"></tr>
</tbody>
</table>
</LayoutTemplate>
<ItemTemplate>
    <tr class="<%# ((ListViewDataItem)Container).DisplayIndex % 2 == 0 ? "even" : "odd" %>">
        <td>...</td>
    </tr>
</ItemTemplate>
</asp:ListView>