How to zebra stripe tables.

Discussion in 'Digital Marketing' started by Dirty Water, Aug 5, 2007.

  1. Dirty Water

    Dirty Water LawnSite Fanatic
    Posts: 6,794

    Zebra striping a table is when the table is themed to have alternating colors on each row. They help the user differentiate data by seperating the rows visually.

    You can see an example one here:

    http://jholland.phpwebhosting.com/zebra.html

    Click the button at the button "Stripe Table" to show the table striped. This is a demonstration page, and I wanted to show before and after.

    There are several ways to stripe a table, one way is doing it by hand using CSS, which is a bit of a pain, but works fine if your table is hand generated and never going to change.

    My technique uses both CSS and javascript to stripe the table after it has been created. This is handy if you have a dynamic table being generated by database data etc.

    If you want to use it, add the following stylesheet definitions to your CSS file.

    Code:
    table 
    {
         border-collapse: collapse;
         width: 50%;
         margin: 24px;
         font-size: 1.1em;
    }
    th 
    {
         background: #3e83c9;
         color: #fff;
         font-weight: bold;
         padding: 2px 11px;
         text-align: left;
         border-right: 1px solid #fff;
         line-height: 1.2;
    }
    td 
    {
        padding: 6px 11px;
        border-bottom: 1px solid #95bce2;
        vertical-align: top;
    }
    			
    td * 
    {
        padding: 6px 11px;
    }
    
    tr.alt td 
    {
        background: #ecf6fc;
    }
    tr.over td 
    {
        background: #bcd4ec;	
        font-weight: bold;
    }
    
    Then add this script block to your page:

    Code:
    <script type="text/javascript">
    	function stripeTable(tableId)
    	{
    		// Get a reference to the table.
    		var theTable = document.getElementById(tableId);
    		if (theTable)
    		{
    			// Get all table rows inside the passed table.
    			var tableRows = theTable.getElementsByTagName('tr');
    
    			for (var i = 0; i < tableRows.length; i++)
    			{		
    				// If its an alternating row, set the alternating class
    				if ((i % 2) == 0)
    				{	
    					tableRows[i].className += " alt";
    			             }
    				// These two events are mostly for old browsers (IE6 specifically) that cannot handle using CSS Hover on elements other than the anchor tag.
    				tableRows[i].onmouseover = function () 
    				{ 						                               this.oldClassName = this.className;
    				      this.className += " over"; 
    				};
    				tableRows[i].onmouseout = function () { this.className = this.oldClassName; };
    			}
    			return true;
    		}
    		else
    		{
    			return false;
    		}
    	}
    
    And then to stripe the table, just put:
    Code:
    <script type='text/javascript'>
       stripeTable('myTable');
    </script>
    
    In the bottom of the page.
     
  2. Dirty Water

    Dirty Water LawnSite Fanatic
    Posts: 6,794

    I should mention that a major reason for using the above method is to help with maintenance.

    For example, if you hand coded the table to have the rows alternate in color, and you decide to add one new row in the middle of the table, you would have to change every row after that to fix the repeating pattern. With my code, all of that is automated.
     
  3. davevg

    davevg LawnSite Member
    Posts: 18

    Nice tip. If you aren't opposed to using a javascript framework you should check out jQuery with the tableSorter plugin. The framework is pretty simple to use, has plenty of plugins, and has fairly good online docs.
     
  4. Dirty Water

    Dirty Water LawnSite Fanatic
    Posts: 6,794

    Yeah, I'm actually not a big fan of jQuery.

    The reason is that it usually gives you the overhead of a framework when you only need a function or two. I have no problem rolling my own functions when needed.
     
  5. davevg

    davevg LawnSite Member
    Posts: 18

    Fair enough. I use it in a voip call center app for the ajax stuff, tablesorter was a bonus for me. I looked at dojo and prototype first which both looked like overkill.
     

Share This Page