Building Zebra Tables with CSS and JavaScript - Creating a zebra table using CSS and some basic structural markup
(Page 3 of 4 )
To be frank, building zebra tables with CSS and structural markup is possibly one of the easiest things that you'll ever learn in your life, since the whole process requires only one HTML table! And the rest consists merely of defining the respective background colors for even and odd rows via CSS. Period.
Below I defined a primitive (X)HTML file that displays a basic zebra table, similar to the one created with PHP, on the browser.
The pertinent code sample is as follows:
<!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>
As shown in the above hands-on example, the zebra table is simply created by defining two different CSS classes, where each of them is attached alternatively to even and odd rows. This achieves the so-called "zebra" effect. As you can see for yourself, constructing this type of table using a client-side approach is a no-brainer process that can be tackled with minor hassles.
In addition to the sample (X)HTML file coded previously, I included another screen shot that shows how the zebra table I just created looks:
So far, so good, right? At this moment, you should feel pretty satisfied, because you learned how to build a zebra table via a few basic CSS styles, along with the corresponding table's markup. So, what's the next step? Well, as you possibly noticed, the table in question was styled with two different CSS classes. This could eventually be a waste of code, since it's feasible to achieve the same result using only one.
Thus, assuming that you may want to learn how to create zebra tables using a single CSS class, jump ahead and read the next section. I'll be there waiting for you.
Next: Creating a zebra table by styling only its even rows >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
