Tables...Help

[unsider]

I have been currently working out the look of my site, trying to wrap my head around it and all, and I've seen it on a couple of websites, and I'm curious how it is done.

 

I would like to know how an alternating bg color on tables works, this is going to be used specifically for my comments portion, but it could be applied to anywehere.

 

I'm curious as o if it is done purely with PHP, or both CSS, and PHP.

 

For example, to clarify myself:

 

Table A

 

bg=grey

bg=white

bg=grey

bg=white

etc..

 

Thanks, I'll clarify anything I can if that does not make sense.

[Daniel0]

You can use CSS:

tr.nth-child(odd) {
   background: #CCC;
}
tr.nth-child(even) {
   background: #FFF;
}

 

However, most browsers do not support that yet so you can use Javascript or PHP to do it yourself.

 

<?php
$even = false;

for ($i = 0; $i <= 10; $i++) {
    if ($even == false) {
        $bg = '#CCC';
        $even = true;
    }
    else {
        $bg = '#FFF';
        $even = false;
    }
    
    echo "<tr style='background:{$bg};'>";
    // do more stuff
}
?>

 

If you want to use Javascript then just run through all the tr tags and set it sort of like I did server-side with PHP in the above example.

[Stooney]

there's more than one way to go about it, here's a quick example though.  It will basically alternate between a css class 'tr1' and 'tr2'.  You define the colors in your css template.  It's sloppy, but it should get the idea across. 

 

<?php
echo '<table>';
$result=mysql_query("SELECT comments FROM table");   //get some comments
$tr=1;
while($row=mysql_fetch_array($result)){
    echo '<tr class="tr'.$tr.'"><td>'.$row.'</td></tr>';
    if($tr==1){
        $tr=2;
    }
    else if{$tr==2){
        $tr=1;
    }
}
echo '</table>';
?>

[unsider]

I can always count on you guys

 

Thanks

 

Topic Solved.

[unsider]

Actually spoke too soon.

 

PHP

 

echo '<table>';
$tr=1;
	while ($row = mysql_fetch_array($result)) {
		echo '<tr class="tr' . $tr . '"><td>' . $row["name"] . " 
                 says: <br>" . $row['commentdate'] . "<br>" . $row['commenttext'] . '</td></tr>'; 

	if($tr==1){
        	$tr=2;
}
    	else if(	
	$tr==2){
           $tr=1;
    }
}
echo '</table>';

 

 

CSS

 

nth-child(odd) {
background: #CCC;
}
nth-child(even) {
background: #FFF;
}	

 

 

Everything is loading correctly, it is just not displaying the color.

[Stooney]

did you link the css file?

 

<style type="text/css" media="all">@import "style.css";</style>

[unsider]

Yes, everything is linked, and attached, and everything is running correctly, I think it's an error in my PHP somewhere, fogetting something... or something is incorrect.

 

 

[hokietoner]

First of all it pains me to see that if/else. I would do:

 

$tr = 0;

 

then inside the loop, do

 

$tr = ($tr+1)%2

 

That way $tr will go 0 1 0 1 0 ... etc.

 

Secondly, you're setting the class to be tr1 and tr2 but your css rules are nth-child(odd) and nth-child(even). The poster who mentioned that said most browsers don't support this, so I'm guessing it's CSS3. In any case, if most browsers don't support it, you probably don't want to use it. Plus if you're already setting the class names to tr1 and tr2, then you should make your css:

 

tr.tr1 {

  background-color: #ccc;

}

tr.tr2 {

  background-color: #fff;

}

 

Of course if you use my slicker way of setting $tr, then you'll want the above to be tr0 and tr1.

[Stooney]

Oh, you're mixing mine and and Daniel's replies.  For mine, your css should look like this:

 

tr.tr1{
    background-color: green; }

tr.tr2{
    background-color: blue; }

 

and here's the code:

<?php
echo '<table>';
$tr=1;
while ($row = mysql_fetch_array($result)) {
echo '<tr class="tr' . $tr . '"><td>' . $row["name"] . ' says: <br>' . $row['commentdate'] . '<br>' . $row['commenttext'] . '</td></tr>'; 

if($tr==1){
	$tr=2;
}
else if($tr==2){
	$tr=1;
}
}
echo '</table>';
?>

 

EDIT:  hokietoner's idea is better, I was trying to keep it basic.

[unsider]

 

You were right, it worked, and I had discovered my error as well, so great, it's fixed.

 

Thank you.