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($db, "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>'; $i++; } 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:
ID | First Name | Last Name |
1 | Anna | Miller |
2 | Benjamin | Fisher |
3 | Claudia | Catalo |
4 | Delf | Meyer |
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
You 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
CSS: Colorize Table Rows Alternately only with CSS
Tutorial | 0 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
Color Values: Convert RGB, CMYK, CMY, HSV, TColor and XYZ Values
Tutorial | 0 Comments
Pipette: Fetch Colors from all over the Screen
Tutorial | 0 Comments
Rewrite Text Files with a fixed Line Length
Tutorial | 0 Comments
CSS Hacks for the Internet Explorer
Tip | 1 Comment
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.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.