Here is a code snippet to stripe tables using a jQuery plugin. Back in the days CSS didn’t exist or the most browsers didn’t support it, <div>-Tags were unknown and to “design” a website complex table constructions where used.
Everybody did it because there was no better way and it was an inaccessible bad semantic markup nightmare.

Today tables are only used should only be used to display data. Translating a design to a working website became more sophisticated and complex. And a website competes as a user interface with other websites who has got the least challenging usability. One item within a website are complex records, represented as tables. To keep longer tables readable it is helpful to alternate the row colors.

I do this on projects using a jQuery code snippet to process tables. Then I style them using CSS (Cascading Style Sheets).

Demo – A striped table with hover effect

Move your mouse cursor over the table to see the additional effect. User find it useful to know where they are when reading long data tables.
(I used real “dummy” content here because I think placeholder text is not as good as real content for testing an application. But this is a discussion you can join in another article..)

The Javascript

// stripeTables function to alternate
// classnames and add a hover class for each row
stripeTables: function(options) {
  var options = $.extend({
    selector: 'div.entry tr',
    excludeSelector: 'table.nostripes tr', // exclude a specific table
    evenClass: 'arb-even',
    hoverClass: 'arb-hover'
  }, options);

  if (typeof(jQuery) != "undefined") {
    $(document).ready(function(){
      $(options.selector).bind('mouseover', function() {
          $(this).addClass(options.hoverClass);
        }).bind('mouseout', function() {
          $(this).removeClass(options.hoverClass);
      });
      $(options.selector + ":even").addClass(options.evenClass);
      $(options.excludeSelector).removeClass(options.evenClass).unbind('mouseover');
    });
  }
}

Code Explanation

This snippet finds every table that can be found by the selector defined in the javascript object literal “options”. In this case all TR elements within a DIV with the class “entry”. Then it adds to all even rows a class “arb-even” and also a hover function which adds/removes the class “arb-hover”.
The script also gives you an option to exclude specific tables based on a selector.

The table can be styled by using the CSS classes as follows.

HTML & CSS code for the table

<style type="text/css">
div.entry table tr.arb-even td {
  background-color: #ddd;
}
div.entry table tr.arb-hover td {
  background-color: #efefef;
}
</style>

<table>
  <tr>
    <th>What</th>
    <th>Color</th>
    <th>Likes</th>
  </tr>
  <tr>
    <td>Zebra</td>
    <td>Black/White</td>
    <td>Grass</td>
  </tr>
  <tr>
    <td>Giraffe</td>
    <td>Yellow/Brown</td>
    <td>High grass</td>
  </tr>
  <tr>
    <td>Rhino</td>
    <td>grey</td>
    <td>Other Rhinos</td>
  </tr>
  <tr>
    <td>Elephant</td>
    <td>grey</td>
    <td>No mice</td>
  </tr>
  <tr>
    <td>Parrot</td>
    <td>many</td>
    <td>Pirates</td>
  </tr>
</table>

That’s it

It’s a small but useful enhancement to your web project.
Feel free to use it, improve it and share the code now with others or continue reading about other things I like to work with.

Image source: Coda