Building Zebra Tables with CSS and JavaScript - Creating a zebra table by styling only its even rows
(Page 4 of 4 )
Throughout the course of the previous section, I taught you a simple approach aimed at building zebra tables using two different CSS classes. The first one was responsible for styling the odd rows of the pertinent table and the second one was tasked with decorating the even rows.
However, if you think carefully about how this approach works, then you'll realize that it's perfectly possible to use only one CSS class, for instance, to style the even rows of the table. This would produce practically the same results (i.e. the mentioned zebra effect).
To demonstrate the functionality of the technique, please have a look at the signature of the following (X)HTML file, which uses a single CSS class to construct a rudimentary zebra table:
<!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 (only 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;
padding: 5px;
margin: 0;
}
#zebratable{
width: 40%;
text-align: center;
background: #eee;
}
.grayrow{
background: #ccc;
}
</style>
</head>
<body>
<h1>Example on building a simple zebra table with CSS</h1>
<table id="zebratable">
<tbody>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="grayrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="grayrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="grayrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="grayrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
<tr>
<td><p>Content for cells of odd row goes here</p></td>
</tr>
<tr class="grayrow">
<td><p>Content for cells of even row goes here</p></td>
</tr>
</tbody>
</table>
</body>
</html>
As you can see, the signature of the prior (X)HTML file is slightly shorter, since it uses only one CSS class, defined as "grayrow," in order to style the respective odd rows of the pertinent table. This implements a simple technique that saves a bit of CSS code.
In order to complement the previous code sample, below I included another screen capture that shows the visual appearance of the table generated by the above (X)HTML file. Here it is:
Do you see how easy it is to build zebra tables using a pinch of CSS and the corresponding structural markup? I think you do! From this point on, you can use all of the code samples that were developed in this tutorial to start coding your own zebra tables. It's an instructive experience, believe me!
Final thoughts
That's all for the moment. As you saw in this first article of the series, it's possible to use different approaches to construct zebra tables, and all of these techniques are very easy to grasp and implement.
However, creating these tables from scratch has some serious disadvantages, since the process requires manually styling the respective odd and even rows of the tables. This has the potential to be an error-prone procedure, not to mention the annoyance.
Therefore, in the next part of the series, I'm going to demonstrate how JavaScript can be used to dynamically style the pertinent table, once it's been created with (X)HTML. This will avoiding the drawbacks that I mentioned before.
Want to see how this will be done? Don't miss the next article!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 6 
