For those who have worked with tables you know how much of a pain it can be to style it just right. In this article I’ll share with you how I get the job done quickly using jQuery and a bit of CSS class styles. Good table structure is key to great design. With it you have a lot of options in the way you present your table. Use the appropriate <th>, <tbody>, and other tags correctly. The result of this demo can be seen here. At the end of this post you can download the source code.
HTML Structure
Here’s the HTML:
<table> <thead> <tr> <th>Books for Sale</th> <th>Regular Price</th> <th>Sale Price</th> </tr> </thead> <tbody> <tr> <td>Gifter Hands (Ben Carson)</td> <td>$25.00</td> <td>$19.95</td> </tr> <tr> <td>Pelican Brief (John Grisham)</td> <td>$29.00</td> <td>$25.50</td> </tr> <tr> <td>Built to Sell (John Warrillow)</td> <td>$21.65</td> <td>$17.35</td> </tr> <tr> <td>Steve Jobs (Walter Issacson)</td> <td>$35.05</td> <td>$29.50</td> </tr> <tr> <td>Nobody Moved Your Cheese (Ross Shafer)</td> <td>$25.00</td> <td>$21.50</td> </tr> </tbody> </table>
CSS Styles
Now here comes the CSS to style our table:
html, body { margin: 0; padding: 0; } body { font-family: Arial; font-size: 0.7em; } table { float:left; width: 500px; margin: 0; padding: 0; border-collapse: collapse; } table thead tr { background: #568df5; color: #fff; } table tr th { padding: 5px; } table tr th:first-child { width: 55%; } table tr.odd { background: #ccf; } table tr.even { background: #f5f5f5; } table tr td:first-child { text-align: left; } table tr td { text-align: center; padding: 5px; font-size: 0.8em; }
A few things to note here:
- Set border-collapse to collapse to eliminate the double border what appears on most tables
- We use thead to style the heading of this table. It’s best practice to use thead, tfoot, and tbody to further structure the table
- We create two classes, .odd and .even, that we’ll use with jQuery to apply a background to odd and even rows respectively.
jQuery Code Snippet
We’ll use jQuery to select and style odd and even rows. We do that by using the jQuery ‘:odd’ and ‘:even’ selectors. Remember they select odd and even elements starting at 0 (It’s zero-based) respectively.
$(document).ready(function() { $('tbody tr:odd').addClass('odd'); $('tbody tr:even').addClass('even'); });
That’s pretty much it. I hope you’ve learned something from this tutorial. If you have any suggestions please do share.
{filelink=2}