Professional Table Styling using CSS
On this blog, I have a post about using jquery to apply alternating table row coloring. Someone commented that they couldnt quite get it working and needed an example. So, while making the example for him, I figure it would be a good post to show how to style a table professionally with CSS.
So, were going to start with this markup:
Note: You only need to load jquery and jquery.scripts if you want to do the last part of this example.
<html>
<head>
<title>Table Row Coloring Example</title>
<script type="text/javascript" src="jquery.js"></script> <!--load jquery-->
<script type="text/javascript" src="jquery.scripts.js"></script> <!--load our custom jquery file-->
<link rel="stylesheet" type="text/css" href="style.css"/><!--load our css styles-->
</head>
<body>
<table>
<th>id</th>
<th>First name</th>
<th>Last name</th>
<tr><td>1</td><td>Scott</td><td>Moniz</td></tr>
<tr class="row2"><td>2</td><td>Bob</td><td>Barker</td></tr>
</table>
</body>
</html>
Alright, now that we have that done. We area going to create style.css and add a few rules.
Here is the table selector:
table{
border: 1px solid #ccc;
}
well....that doesnt look very good..YET.
Lets add a rule to the header. We'll add a background color.
table th{
background-color: #ccc;
}
Lets add a rule to the table data tags.
table tr{
border: 1px solid #ccc;
}
Now, lets see what we got so far.
Not too bad. You'll notice the headers are a little to close, and the borders dont look too great. Don't worry well fix that. Lets add another couple rules to table th and td.
table th{
border: 1px solid #000;
padding: 5px;
}
table td{
padding: 2px;
}
Alright..lookin good so far. Here's what you should have:
Lets take care of these ugly borders.
On our table selector we will add this rule:
table{
border-collapse: collapse;
}
If you look at the table, you'll notice that on the 2nd row there is a class="row2". We will now style that class.
table tr.row2{background-color: #EBEBEB;}
DONE. The final result looks like this.
You can always modify the styles as you wish.
Tip: Every 2nd row, add the class="row2" to the row to get the alternating row colors. Optionally, add text-align: center; to the table selector.
Here's the full CSS:
table{border: 1px solid #ccc;border-collapse:collapse; text-align: center;}
table th{background-color: #ccc; padding: 5px; border: 1px solid #000;}
table td{border: 1px solid #ccc; padding: 2px;}
table tr.row2{background-color: #EBEBEB;}
Keep reading for an easy way to alternate row colors when you have a lot of rows.
Alright, now, if your table has 20 rows, maybe even 50, or 100, adding row2 manually is really a pain...and I personally wouldn't do that. We will use jquery to color the alternate rows.
Find the <tr class="row2"> and change it to <tr>. If you load the table you'll notice the alternate rows aren't colored anymore. We will now add a class to the table. So <table> should look like this <table class="altcolor">.
Now that our table is setup, we will use a jquery selector to color rows in any table that has the class altcolor.
You should have jquery.js and you should create a file named jquery.scripts.js.
Open jquery.scripts.js and add the following:
$("document").ready(function(){
$("table.altcolor tr:even").addClass("row2");
});
This loads when the webpage is ready
//Notice the selector ?
table.altcolor tr:even means any even row, in a table, that has the class "altcolor"
Now we just call addClass, which will add the class row2.
now, the class row2 is added to every even row in a table with the class altcolor.
Done. 
If you don't get the same result, you might want to download the example source and check it out.
Download Table Styling Example
Tip: When using jquery to style alternate rows, check your table with javascript disabled.
For example, if you style your tables to have white text, and your row2 is supposed to apply a dark background to make the white text show up, if they have javascript disabled, they won't see the white text. Be careful and make sure your table looks good with and without javascript.
September 22nd, 2009 - 00:45
Hi Scott Moniz,
Thanks a ton for your reference. I’ll definetely use it on my site.
Best regards
Koijam