Figure 1: Table with Alternative Row Style
How to create a table with look and feel similar to Figure 1 from above? Follow these steps below:
Step 1: Create CSS style for the even an and odd class. In figure 2, the background color of the even and odd table are set to different variation of grey color.
Figure 2: CSS Code for Odd and Even class
Step 2: Display array data in a table and set table row class to odd or even. Figure 3 displays the code for display the table from Figure 1.
The array $tblData contains randomly generated integers. The variable $key is the array index and $value is the actual integers.
The key line of code to differ the odd and even row is:
($key & 1) checks if the array index is even or odd. The code sets the table row style to even and odd according the array index.