Alternating Row Colors in CSS

Should I Use If/Else?

[inuwolf]

The table I've been working on, populated by a PHP script and styled with CSS, is nearly finished. It looks OK, but slightly redundant, so I've been trying to alternate the rows between light blue and white (like iTunes) to break up the monotony. In order to do this I must alternate between <tr> (white) and <tr class="odd"> (blue).

echo ("<table border=1 align=center>");
$i=0;
foreach($Data as $NewDat){
if($NewDat[0]!=""){ //error trap
$str="<tr>";
foreach($NewDat as $field)$str.="<td><center>$field</center></td>";
$str.="</td>\n";
echo $str;}}
fclose($ff);
echo "</table>";

Above is the very simple script I've been using. It only pumps out <tr>; what should I do to have it alternately apply the odd class to my rows? I'm guessing I must use an if/else loop, but I don't really understand how that will interact with the foreach function. Obviously I have very little coding experience; this project has been an ambitious one but I am almost finished.

Thanks, I appreciate all the help I've gotten at this site.

[DrDoc]

I always do a regular expression instead. Much faster.

<style type="text/css"> 
tr.diff { 
 background: red; 
} 
</style> 
<?php 
$text = "<table border='1' width='200'> 
<tr><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td></tr> 
<tr><td>&nbsp;</td></tr> 
</table>"; 
$text = preg_replace("/((<tr>.*?<\/tr>[^<]*<tr)(>.*?<\/tr>))/s", "$2 class='diff'$3", $text); 
echo $text; 
?>

It works regardless of whether you have an even or odd number of rows

[DrDoc]

So, in your example, assigning the stuff to a string instead of echoing it, and then running the preg_replace on the string before outputting it, does the trick:

$str = "<table border=\"1\" align=\"center\">";
$i = 0;
foreach($Data as $NewDat) {
if($NewDat[0]!= "") { //error trap
$str .= "<tr>";
foreach($NewDat as $field) $str.= "<td><center>$field</center></td>";
$str .= "</tr>\n";
}}
fclose($ff);
$str .= "</table>";
echo preg_replace("/((<tr>.*?<\/tr>[^<]*<tr)(>.*?<\/tr>))/s", "$2 class=\"odd\"$3", $str);

There were also a few tag closing problems in your code, but I fixed that

[appi2]

Just an example.

<style type="text/css">
.bluetr { background:#AEC9FF; color:#000;}
.greytr { background:#E2E2E2; color:#000;}
</style>

<table>
<?php

$numberofrows = 10;
$currentrownumber = 0;

while ($currentrownumber < $numberofrows){

$bgcolor = ($currentrownumber++ & 1)? 'bluetr' : 'greytr';

echo "<tr class=\"$bgcolor\"><td>Row $currentrownumber</td></tr>";
}
?>
</table>

[bedlam]

[OT]

Just an example.

<style type="text/css">
.bluetr { background:#AEC9FF; color:#000;}
.greytr { background:#E2E2E2; color:#000;}
</style>

...but a poor one--at least as far as the css is concerned.* This is one of the things about working with web apps that most annoys me: unnecessary cruft (like my favourite:

<td class="tableHeader">

) added into html output when there are simpler, better options available.

Note to Developers
Do NOT style the default state of elements with a class without a very good reason.

In most scripting situations, it should be easy enough to add a unique id attribute to the output--e.g.

<table id="dataTable123"> ... </table>

This will make it possible to style the data cells differently for that table only:

table#dataTable123 td { background-color:#900; }

...and then you can use the class on the alternate rows to style the alternating rows only:

table#dataTable123 tr.alternate td { background-color:#f90; }

-b

Note also that, unless I'm mistaken, some browsers will not apply colours etc to tr elements--you may have more luck adding the class to the tr and then using it to style the tds:

tr.foo td { background-color:#900; }

[/OT]

[appi2]

Is this what you mean. Less code output ;)

<style type="text/css">
table#dataTable123 tr.alternate td{ background:#AEC9FF; color:#000;}
table#dataTable123 td { background:#E2E2E2; color:#000;}
</style>
<table id="dataTable123">
<?php

$numberofrows = 10;
$currentrownumber = 0;

while ($currentrownumber < $numberofrows){
$bgcolor = ($currentrownumber++ & 1)? 'class="alternate"' : '';
echo "<tr $bgcolor><td>Row $currentrownumber</td></tr>";

}
?>
</table>

Post was more to show how to alternate something using

$bgcolor = ($currentrownumber++ & 1)? 'option1' : 'option2';

[bedlam]

Less code output ;)

Ahhhhhhhh...the beauty of lighter code. Ambrosia. ;-)

-b

[inuwolf]

Thanks! I've never gotten this much help so readily! At present I'm using DrDoc's code; it was the first one up at the time, but in the future I may change to either of your examples, appi and bedlam. What matters now is that it works!

Hopefully you won't hear from me for a while; that would mean I'm having a problem. Anyway, do you think using an iTunes skin could result in legal trouble? If so I have a similar but different-enough CSS I could switch to, but I kinda like the iTunes gimmick.

My next step is making a form that submits to the database the table reads. I've already made the working form but now I'm foolproofing it: putting in word filters, even an IP logger. If anyone knows of a good script for this I'd love to hear about it, but if I must I think I can "freeball" this one.

Again, thanks. This is more help than I've ever gotten from strangers. :)