00 Votes

PHP: Colorize Table Rows Alternately with PHP

Tutorial by Stefan Trost | Last update on 2021-05-19 | Created on 2012-05-27

The readability and clarity of a table increases considerably when the eye can easily detect what belongs to which line. One way to achieve this, is to color the rows of a table alternately in different colors.

In this tip I want to show you how you can do this easily with the help of some lines of PHP.

The Code

In this code, we are reading a few rows from a MySQL database and we are displaying the result using a table. The rows of the table, we are coloring alternately.

$erg = mysqli_query($database, "SELECT id, fname, lname FROM tab");
echo '<table width="100%">';
echo '<tr style="font-weight:bold">';
echo '<td>ID</td><td>First Name</td><td>Last Name</td>';
echo '</tr>';
$i = 1;
while (list($id, $fname, $lname) = mysqli_fetch_row($erg)) {         
   echo '<tr',($i%2==0?' style="background-color:#CCC"':''),'>';
   echo '<td>',$id,'</td><td>',$fname,'</td><td>',$lname,'</td>';
   echo '</tr>';  
echo '</table>';

We use the following trick: First, we set the variable $i to 1 and then after each output of a line, we increase $i by 1 ($i++). Thus we know: $i is alternating even or odd, depending on what line we have outputed lastly.

Whenever $i is even (that is $i % 2 is 0), we give the line a color - if not, that is, if $i is odd, we leave the background as it is. We achieve the coloring here by setting the style of tr to "background-color: #CCC" (grey) if the condition applies. Alternatively, of course, we could also assign a class which properties we defined via CSS.

With $i%2==0, the condition applies to all even line numbers (2, 4, 6 and so on). If we want to do something with the odd lines instead, we can use $i%2==1 or $i%2!=0 instead.

The Result

The result will look something like this:

IDFirst NameLast Name

The Alternative

Not each table we are using on our website, has a MySQL database in the background, so that we can create and color it in the manner described above using PHP. Sometimes we have static tables in HTML documents that we nevertheless want to colorize.

In this case, we can use a CSS solution described in this tip, with which you are able to change the appearance of each table on your website by using only one central CSS style sheet, without changing anything on the tables themselves.

Of course you can also achieve the result of this PHP solution by using the CSS solution, but the necessary CSS selectors of the CSS solution are not supported by all of the old browsers.


About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile


Related Topics

HTML: Table - Merge Cells

Question | 1 Answer

MySQL: CONCAT multiple Rows

Question | 1 Answer

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.