unsider Posted February 17, 2008 Share Posted February 17, 2008 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. Quote Link to comment Share on other sites More sharing options...
Daniel0 Posted February 17, 2008 Share Posted February 17, 2008 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. Quote Link to comment Share on other sites More sharing options...
Stooney Posted February 17, 2008 Share Posted February 17, 2008 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>'; ?> Quote Link to comment Share on other sites More sharing options...
unsider Posted February 17, 2008 Author Share Posted February 17, 2008 I can always count on you guys Thanks Topic Solved. Quote Link to comment Share on other sites More sharing options...
unsider Posted February 17, 2008 Author Share Posted February 17, 2008 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. Quote Link to comment Share on other sites More sharing options...
Stooney Posted February 17, 2008 Share Posted February 17, 2008 did you link the css file? <style type="text/css" media="all">@import "style.css";</style> Quote Link to comment Share on other sites More sharing options...
unsider Posted February 17, 2008 Author Share Posted February 17, 2008 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. Quote Link to comment Share on other sites More sharing options...
hokietoner Posted February 17, 2008 Share Posted February 17, 2008 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. Quote Link to comment Share on other sites More sharing options...
Stooney Posted February 17, 2008 Share Posted February 17, 2008 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. Quote Link to comment Share on other sites More sharing options...
unsider Posted February 17, 2008 Author Share Posted February 17, 2008 You were right, it worked, and I had discovered my error as well, so great, it's fixed. Thank you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.