Adding PHP Alternate Table Row Colours To Existing HTML Table
I have a Table already written in PHP that echos out data called from the database like so:
Solution 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">
<a href="PageUpdate.php?id=<?php echo $row["PageID"]; ?>"><img src="images/0013-pen.gif" width="16" height="16" alt="" border="0"></a>
</td>
</tr>
<?php
$row_count++;
}
?>
Alternatively, you could replace the bgcolor tags and assign a CSS class to each row.
Solution 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.
Solution 3:
Try This:
<tr <?php if($i%2){?>bgcolor="#eeeeee"<?php } else{ ?>bgcolor="red" <?php } $i++; ?>>
Solution 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;
}
Post a Comment for "Adding PHP Alternate Table Row Colours To Existing HTML Table"