Page 1 of 2
Alternating Colors For Table Rows
Posted: Fri Aug 25, 2006 1:17 am
by nickman013
Hello,
I was wondering how I can get alternating background colors for my table rows, that come from a database.
Thanks
Posted: Fri Aug 25, 2006 3:15 am
by onion2k
Code: Select all
echo "<tr style=\"background-color: #".(($rowCounter++%2==0)?"ffffff":"000000").";\"><td></td></tr>";
Posted: Fri Aug 25, 2006 9:55 am
by pickle
Search the forums. This has been discussed many times before.
Posted: Fri Aug 25, 2006 9:56 am
by feyd
it's usually referred to as Zebra. Two guesses as to why.

Posted: Fri Aug 25, 2006 10:19 am
by onion2k
feyd wrote:it's usually referred to as Zebra. Two guesses as to why.

It looks like a horse?
Posted: Fri Aug 25, 2006 10:21 am
by feyd
onion2k wrote:It looks like a horse?

here's your prize:

Posted: Fri Aug 25, 2006 10:22 am
by Luke
feyd wrote:onion2k wrote:It looks like a horse?

here's your prize:

Reminds me of Christmas when my family was poor.
Posted: Fri Aug 25, 2006 2:25 pm
by nickman013
Thanks Alot!

Posted: Fri Aug 25, 2006 5:38 pm
by bokehman
Code: Select all
echo '<tr'.((@$i^=1)?' class="invert"':null).'>';
Posted: Fri Aug 25, 2006 7:13 pm
by RobertGonzalez
Isn't there a tutorial on this on our boards?
Posted: Fri Aug 25, 2006 7:38 pm
by bg
Everah wrote:Isn't there a tutorial on this on our boards?
Here's a tutorial....
% is the modulus symbol. If you don't know what that is, pretend its a division symbol. Calculate the result as a whole number and take note of the remainder. The remainder is the result of a modulus calculation.
2 % 2 = 0
5 % 3 = 2
When alternating column colors, what we do is set up an incremental counter and use the modulus function to determine whether the counter is an odd or even number. Here is an example of a loop and the modulus calculation:
Code: Select all
for($x = 1; $x<10; $x++){
switch($x % 2){
case 0: echo $x . ' is even. ';
break;
case 1: echo $x . ' is odd. ';
break;
}
}
Basically, what we're doing is dividing $x by two and noting the remainder. If there is no remainder, the number is divisible by 2 which makes it an even number. If there is a remainder of 1, then it is odd. When looping through table rows, we do this and then basically assign the table row a color based on whether the number is odd or even. Hope this clears up the extremely cryptic answers to your question

Posted: Fri Aug 25, 2006 10:16 pm
by RobertGonzalez
I kind of like using a simple switching mechanism depending on value...
Code: Select all
<?php
$color = '#ffffff';
for ($i = 0; $i < $array_count; $i)
{
echo '<tr><td bgcolor="' . $color . '">Some content</td></tr>';
if ('#ffffff' == $color)
{
$color = '#cccccc';
}
else
{
$color = '#ffffff';
}
}
?>
This involves no math. In fact, it is a simple value check that sets a new value if needed.
Posted: Sat Aug 26, 2006 3:00 am
by Oren
Or like this:
Code: Select all
echo ($i++ & 1) ? 'color_one' : 'color_two';
Edit: I believe that
bokehman's way is the best. In the normal way ($i++%2==0) the counter grows and grows... and therefore takes more space in the memory. With
bokehman's way, the counter will never be larger than 1:
Code: Select all
echo ($i ^= 1)? 'class_one' : 'class_two';
Posted: Sat Aug 26, 2006 3:43 am
by bokehman
Oren wrote:Or like this:
Code: Select all
echo ($i++ & 1) ? 'color_one' : 'color_two';
You only need one class. The non-inverted row will then default to the style of a <tr> with no class.
Demo... except thats a <ul> styled like that.
Also I don't like the idea of the style being embeded in the tag; I want to be able to control everything to do with style from the stylesheet, not by editing a php file.
Posted: Sat Aug 26, 2006 4:08 am
by onion2k
bokehman wrote:Oren wrote:Or like this:
Code: Select all
echo ($i++ & 1) ? 'color_one' : 'color_two';
You only need one class. The non-inverted row will then default to the style of a <tr> with no class.
Demo... except thats a <ul> styled like that.
Also I don't like the idea of the style being embeded in the tag; I want to be able to control everything to do with style from the stylesheet, not by editing a php file.
If you want to be able to control everything from the CSS file, wouldn't it be better to assign two classes (dark and light) rather than using one class and an unstyled table row?
