Browse By

How to create ITunes like CSS table

itunes css tableIf 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.

3 best Web books of 2008
Name Authour Publisher Date of release
What Would Google Do? Jeff Jarvis Collins Business January 2009
The Numerati Stephen Baker Houghton Mifflin August, 2008
Groundswell: Winning in a World Transformed by Social Technologies Charlene Li and Josh Bernoff Harvard Business School Press April 2008

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;
}
Share This
Facebooktwitterpinterest

Leave a Reply

Your email address will not be published.

13 + twenty =

This site uses Akismet to reduce spam. Learn how your comment data is processed.