Building Zebra Tables with CSS and JavaScript

As I explained in the introduction, there are different approaches that can be taken to building zebra tables, including both client- and server-side techniques. In this particular case, I'm going to demonstrate how to create the tables in question by using a basic PHP function. Then, with that example digested, you'll learn how to build them using a combination of CSS and the corresponding structural markup.

That being said, pay attention to the signature of the following user-defined PHP function, which is tasked with building rudimentary zebra tables. Here it is: 

// example on building a zebra table with a server-side scripting language like PHP

// define 'buildZebraTable()' function (generates the zebra table dynamically)

function buildZebraTable($oddRows='#cccccc',$evenRows='#eeeeee',$numRows=10){

$evenFlag=false;

$html='<table><tbody>'."n";

for($i=0;$i<$numRows;$i++){

$bgColor=!$evenFlag?$evenRows:$oddRows;

$html.='<tr bgcolor="'.$bgColor.'"><td>Content for cell goes here</td></tr>'."n";

$evenFlag=!$evenFlag;

}

$html.='</tbody></table>';

return $html;

}

Even if you're not familiar with PHP, I'm pretty sure that you'll find the logic implemented by the previous "buildZebraTable()" function extremely easy to understand and use. As you can see, the function takes up a few incoming parameters, such as the background colors of the even and odd rows, as well as the number of rows that the table will contain.

With all of these arguments available, the function simply uses a PHP loop to build the markup of the zebra table. It finalizes its execution by returning the whole HTML to client code. Quite easy to understand, isn't it?

Having explained how the previous "buildZebraTable()" PHP function does its thing, here's an example that demonstrates how to use it, accompanied by an illustrative screen capture:

<?php

// build zebra table

echo buildZebraTable();

?>

As you'll realize, building zebra tables using a custom PHP function like the one shown a few lines above is actually a straightforward process that can be extended to other server-side programming languages with relative ease. Of course, the previous function is rather useless on its own, since it populates the pertinent table rows with static data. So its signature should eventually be modified to work with records pulled directly from a database.

Nevertheless, my mission has been largely accomplished, since I showed you how to build and display zebra tables utilizing a server-side approach. But the tables in question can also be constructed by way of conventional (X)HTML markup and some simple CSS styles. So in the section to come, I'll be showing you the complete details of this interesting process.

Do you see the link that appears below? Great! Click on it and keep reading.