Adding PHP alternate table row colours to existing HTML table - php

Question

I have a Table already written in PHP that echos out data called from the database like so:
<TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
<TR>
<TD bgColor=whitesmoke colSpan=0><B>Pages</B></td>
</tr>
<tr>
<td>
<table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
<tr>
<td align="center" valign="bottom"> <font color="#4d71a1"><b>Page Name</b></font> </td>
</tr>
<?php while ($row = mssql_fetch_array($result)) { ?>
<tr bgcolor="#eeeeee">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php } ?>
<tr><td colspan="7"> </td></tr>
<tr>
<td colspan="7" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
I have been trying to alternate the colours of the rows, using a snippet of PHP and after some research implemented this:
<tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#000000' : '#ffffff'); ?>">
It doesn't seem to work correctly, so I feel I am going wrong somewhere, I know there is longer ways to implement this that I could implement. I was just hoping for something simple. Am I wasting effort trying to implement it this way?
I integrated it as follows:
<TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
<TR>
<td bgColor=whitesmoke colSpan=0><B>Pages</B></td>
</tr>
<tr>
<td>
<table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
<tr bgcolor="#3A7525">
<td align="center" valign="bottom"> <font color="#4d71a1"><b>Page Name</b></font> </td>
</tr>
<?php while ($row = mssql_fetch_array($result)) { ?>
<tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#C2C2C2' : '#ffffff'); ?>">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php } ?>
<tr>
<td colspan="7" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
It sort of works, but for some reason the very first entry is blue? When I've specified white and grey.

Answer 1

You could use the following when looping through the results returned from your db:
<?php
// Define row colors
$color1 = "#FFFFFF";
$color2 = "#F4F9FF";
// Set row counter
$row_count = 0;
while ($row = mssql_fetch_array($result)) {
$row_color = ($row_count % 2) ? $color1 : $color2;
?>
<tr bgcolor="<?php echo $row_color; ?>">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php
$row_count++;
}
?>
Alternatively, you could replace the bgcolor tags and assign a CSS class to each row.

Answer 2

Use the CSS selector :nth-of-type( ).
By putting different styles for both the :nth-of-type(even) and :nth-of-type(odd) the browser does the alternating styling for you, so you won't have to worry about it.
See the W3Schools entry on this.

Answer 3

Try This:
<tr <?php if($i%2){?>bgcolor="#eeeeee"<?php } else{ ?>bgcolor="red" <?php } $i++; ?>>

Answer 4

Thanks to Bas van den Heuvel for the great answer using CSS. If you encountered extra line spacing like I did, and want to remove it, use the following example code. This will make the alternating color lines be tighter together. (I used light grey and white)
p:nth-of-type(odd)
{
background:#e2e2e2;
margin: 0px;
padding: 0px;
}
p:nth-of-type(even)
{
background:#ffffff;
margin: 0px;
padding: 0px;
}