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?
Image here's your prize: Image

Posted: Fri Aug 25, 2006 10:22 am
by Luke
feyd wrote:
onion2k wrote:It looks like a horse?
Image here's your prize: Image
Reminds me of Christmas when my family was poor.

Posted: Fri Aug 25, 2006 2:25 pm
by nickman013
Thanks Alot!
:D

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 :twisted:

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? :P