Assigning Background Colors Dynamically to Zebra Tables with CSS and JavaScript - Review: building a basic zebra table using a CSS-based approach
(Page 2 of 4 )
Before I proceed to show you how to use the assistance of JavaScript to build zebra tables dynamically, first I’d like to reintroduce a concrete hands-on example that was developed in the prior article of the series. Its primary objective was to illustrate how to create this type of table via a conventional CSS-based approach.
Having said that, please take a quick look at the following code sample, which constructs a primitive zebra table using two simple classes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on building a simple zebra table with CSS (both odd and even rows are styled)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0;
}
#zebratable{
width: 40%;
text-align: center;
}
#zebratable tbody tr.evenrow td{
background: #eee;
padding: 10px;
}
#zebratable tbody tr.oddrow td{
background: #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>Example on building a simple zebra table with CSS</h1>
<table id="zebratable">
<tbody>
<tr class="oddrow">
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="evenrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr class="oddrow">
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="evenrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr class="oddrow">
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="evenrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr class="oddrow">
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="evenrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr class="oddrow">
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="evenrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
</tbody>
</table>
</body>
</html>
After examining the above hands-on example in detail, you’ll have to agree with me that building a rudimentary zebra table by using a couple of CSS classes is a very straightforward process that can be performed with minor hassles.
For this specific case, “the zebra effect” (doesn’t it sound like a movie title?) is achieved by assigning a different CSS class to even and odd rows of the table, which you’ve probably done hundreds of times before. Nonetheless, as I said before, including those CSS classes manually into the table’s markup can be hard work, especially if the table is large and contains numerous rows.
Nonetheless, it’s perfectly possible to address the aforementioned issue with the help of JavaScript, since it can be used to dynamically assign the respective CSS classes to the table’s rows, thus, automating this rather annoying task.
This JavaScript-based approach can be quite helpful when it comes to building zebra tables, so if you’re interested in learning how to put it to work for you, then simply read the following section.
Next: Building zebra tables dynamically with a JavaScript function >>
More JavaScript Articles
More By Alejandro Gervasio
