Ladysign

Create iTunes styled tables with jQuery and CSS

Difficulty:

Do you like those iTunes styled tabels? These tabels give you a nice overview since every odd and even row contains a different color.

But when your tabel contains dynamic data, you don’t know how many and which rows you have to style with an odd or even color class.

Styling odd and even rows, can be done by using CSS 3, write pseudo class notations.

table tbody tr:nth-child(even) { background: #f1f5fa; }
table tbody tr:nth-child(odd) { background: #fff; } 

Ofcourse and unfortunately not all browsers (*IE(eek)*) support CSS 3.

Read below, how to do this with jQuery. You can write this in less then 5 lines.
You will only need to download JQuery Javascript framework and including it in your webproject.

Here are the files you will need:

The HTML to create a accessible tabel:

<table>
 <thead>
  <tr>
   <th>Head 1</th>
   <th>Head 2</th>
   <th>Head 3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Cell 1</td>
   <td>Cell 2</td>
   <td>Cell 3</td>
  </tr>
  <tr>
   <td>Cell 4</td>
   <td>Cell 5</td>
   <td>Cell 6</td>
  </tr>
  <tr>
   <td>Cell 7</td>
   <td>Cell 8</td>
   <td>Cell 9</td>
  </tr>
 </tbody>
</table>

The styles for a iTunes generic tabel style:

table { background-color: #fff; border: 1px solid #ddd; empty-cells: show; font-size: 90%; margin: 10px 0 20px 20px; padding: 4px; text-align: left; width: 650px; }
table caption { color: #777; margin: 0 0 5px 0; padding: 0; text-align: center; text-transform: uppercase; }
table thead th { border: 0; border-bottom: 1px solid #ddd; color: #000; font-size: 90%; padding: 3px; margin: 0 0 5px 0; text-align: left; }
table tbody tr { background-color: #fff; }
table tbody tr:hover { background-color: #3D80DF !important; color: #fff; }
table tbody td { color: #000; padding: 2px; border: 0; }
table tbody tr:hover td { color: #fff; } 

jQuery, where you will pick all the odd table rows and give it the blue iTunes color:

//JQuery functions
$(document).ready(function(){
	//odd even table cells.
	$("tr:odd").css("background-color", "#F1F5FA");
});