VIDEO TUTORIAL
Today we are going to be making jQuery Tip 9 Table Striping.
So what were going to be doing is adding a little styling to your table and also increasing readability. This is a quick tip so lets get started.
Markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<table width="400px"> <thead> <tr> <th colspan="2">My Table</th> </tr> </thead> <tbody> <tr> <td>John Smith</td> <td>123 123 1234</td> </tr> <tr> <td>John Smith</td> <td>123 123 1234</td> </tr> <tr> <td>John Smith</td> <td>123 123 1234</td> </tr> <tr> <td>John Smith</td> <td>123 123 1234</td> </tr> <tr> <td>John Smith</td> <td>123 123 1234</td> </tr> <tr> <td>John Smith</td> <td>123 123 1234</td> </tr> <tr> <td>John Smith</td> <td>123 123 1234</td> </tr> </tbody> </table> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
table { margin: 0 auto; border-collapse: collapse; margin-bottom: 20px; } th{ font-size: 2em; padding: 10px; text-align: center; color: #fff; background: #1787cf; } td { border: 1px solid #ddd; padding: 5px; } tbody tr { cursor: pointer; } .even { background: #eee; } .odd { background: #fff; } .hover { background: #AEEDDF; } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(function($){ $('tr:even').addClass('even'); $('tr:odd').addClass('odd'); $('tbody tr').hover(function() { $(this).toggleClass('hover'); }, function() { $(this).toggleClass('hover'); }); })(jQuery); |
This is a quick tip but never the less it does increase readability. I hope this helps in some way.
And as always …
jQuery Tip 3 Style Sheet Switcher
jQuery Tip 8 Tabs
jQuery Tip 5 Cool Picture SlideToggle