PHP Target Rows to Change Background Color

Question

this is my code for a multiplication table. By combining PHP and HTML/CSS I need to make every alternating rows background color white or grey.

I've thought of using a row and using %2==1 and %2==0 to figure out the odd and even rows but how would i target those rows to make a id or class to target on my css file? Where would I insert this code at?

<?php
    echo '<table>';
    echo '<tr><th></th>';
    for ($x = 1; $x <= 9; $x++)
        echo '<th>'.$x.'</th>';
    echo '</tr>';
    for ($y = 1; $y <= 9; $y++)
    {   
        echo '<tr><th>'.$y.'</th>';
        for ($z = 1; $z <= 9; $z++)
        {   
            echo '<td>'.($y * $z).'</td>';
        }
        echo '</tr>';
    }
    echo '</table>';
?>

td:nth-child(even) { background: #f5f5f5 } td:nth-child(odd) { background: #ddd } — Milan and Friends
– Milan and Friends, Commented Jan 28, 2014 at 19:39
@mdesdev You again! You should make this an answer, it's the best way to go about it. — Dryden Long
– Dryden Long, Commented Jan 28, 2014 at 19:41
@DrydenLong hahaha I know, I'm doing something right now, busy, just checking from time to time new questions and making comments. Take it and post it if you wish, elaborate a little ;) — Milan and Friends
– Milan and Friends, Commented Jan 28, 2014 at 19:46

JGrinon · Accepted Answer · 2014-01-28 20:23:33Z

2

No need to assign classes with PHP when CSS can style alternate elements just fine. Using nth-child you can style alternative rows pretty easily.

tr:nth-child(even) { 
    background: #f5f5f5;
} 
tr:nth-child(odd) { 
    background: #ddd;
}

Here is a fiddle showing it off: Fiddle

And here is more info on the nth-child selector: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

edited Jan 28, 2014 at 20:23

JGrinon

1,4531 gold badge14 silver badges36 bronze badges

answered Jan 28, 2014 at 19:48

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Federico J. · Accepted Answer · 2014-01-28 19:45:09Z

0

As Dryden Long comments, best is CSS, but if you do need do it with php, you could do:

<?php
echo '<table>';
echo '<tr><th></th>';
for ($x = 1; $x <= 9; $x++)
    echo '<th>'.$x.'</th>';
echo '</tr>';
for ($y = 1; $y <= 9; $y++)
{   
    echo '<tr class="'. ( ($y%2 == 0 ) ? 'even' : 'odd' ).'"><th>'.$y.'</th>';
    for ($z = 1; $z <= 9; $z++)
    {   
        echo '<td>'.($y * $z).'</td>';
    }
    echo '</tr>';
}
echo '</table>';

and then you only have to add the CSS classes, and all will be working.

table tr.even { background-color: blue }
table tr.odd  { background-color: red }

answered Jan 28, 2014 at 19:45

Federico J.

16k7 gold badges35 silver badges54 bronze badges

1 Comment

tonesbonesjones Over a year ago

The whole point was to practice html/css manipulation with php. This was very helpful, and I also learned the use of ternary conditionals from it. Thanks!

RyanS · Accepted Answer · 2014-01-28 19:43:09Z

0

echo '<tr class ="' . ( $y % 2 == 0 ? 'even' : 'odd' ) . '"><th>'.$y.'</th>';

You can use the ternary operator to insert a class

condition ? if true : if false;

answered Jan 28, 2014 at 19:43

RyanS

4,2243 gold badges25 silver badges37 bronze badges

Collectives™ on Stack Overflow

PHP Target Rows to Change Background Color

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related