How to create ITunes like CSS table

If you’ like to learn how to create ITunes like CSS tables then follow this tutorial. Using alternating row colors in tables has become a well-recognized design feature. It provides structure to long tables and let viewer scan table rows easily. If you will add a hover effect to highlight the row under the mouse pointer, it can produce an attractive and functional look. The code used for this ITunes style CSS table with hover effect is quite simple. Try to hover your mouse over this table, it’s working example.

Let’s focus on the details. First of all, you’re setting each of the two row classes (.odd and .even) background:

table tbody tr.odd {background-color: #eff7ff;}
table tbody tr.even {background-color: #fff;}

Next, you set a rule that changes the background color of a row when the user’s mouse hovers over it:

table tbody tr:hover {background-color:  #3d84d2;}

And finally, you change the color of the text contained within the row that is being hovered over, making it lighter to stand out against its new darker background color:

table tbody tr:hover td {color: #fff;}

Here’s the the CSS needed to style the table rows.

 table {
background-color: #fff;
border: 1px solid #ddd;
empty-cells: show;
font-size: 90%;
margin: 0 0 20px 0;
padding: 4px;
text-align: left;
width: 500px;
}
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: #777;
font-size: 90%;
padding: 3px 0;
margin: 0 0 5px 0;
text-align: left;
}
table tbody tr.odd {
background-color: #eff7ff;
}
table tbody tr.even {
background-color: #fff;
}
table tbody tr:hover {
background-color: #3d84d2;
}
table tbody td {
color: #888;
padding: 2px;
border: 0;
}
table tbody tr:hover td {
color: #fff;
}