Alternating Colors For Table Rows

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Alternating Colors For Table Rows

Post by nickman013 »

Hello,

I was wondering how I can get alternating background colors for my table rows, that come from a database.

Thanks
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Code: Select all

echo "<tr style=\"background-color: #".(($rowCounter++%2==0)?"ffffff":"000000").";\"><td></td></tr>";
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Search the forums. This has been discussed many times before.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

it's usually referred to as Zebra. Two guesses as to why. :)
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

feyd wrote:it's usually referred to as Zebra. Two guesses as to why. :)
It looks like a horse?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

onion2k wrote:It looks like a horse?
Image here's your prize: Image
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

Thanks Alot!
:D
User avatar
bokehman
Forum Regular
Posts: 509
Joined: Wed May 11, 2005 2:33 am
Location: Alicante (Spain)

Post by bokehman »

Code: Select all

echo '<tr'.((@$i^=1)?' class="invert"':null).'>';
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Isn't there a tutorial on this on our boards?
bg
Forum Contributor
Posts: 157
Joined: Fri Sep 12, 2003 11:01 am

Post 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:
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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';
User avatar
bokehman
Forum Regular
Posts: 509
Joined: Wed May 11, 2005 2:33 am
Location: Alicante (Spain)

Post 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.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post 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
Post Reply