How can I generate different color lines for each row added on a table generated from SQL?

Question

As it is the code generates every line the same color, how can I make it so that it will add a slightly darker shade every other line?

i.e.: white beige white beige white beige

So that it becomes a more readable format.

Code below:

if(mysql_num_rows($result) > 0){
    while($row = mysql_fetch_array($result)){
        $invoiceitemssql = mysql_query('SELECT * FROM tblinvoiceitems WHERE invoiceid = '.$row['id'].' LIMIT 0,1');
        $invoiceitems = mysql_fetch_array($invoiceitemssql);
        $html .= '<tr>
            <td><a href="invoices.php?action=edit&id='.$row['id'].'">'.$row['id'].'</a></td>
            <td>'.$row['firstname'].'</td>
            <td>'.$row['lastname'].'</td>
            <td>'.$row['companyname'].'</td>
            <td>'.$row['city'].'</td>
            <td>'.$row['phonenumber'].'</td>
            <td>'.$row['date'].'</td>
            <td>'.$row['duedate'].'</td>
            <td>'.$row['total'].'</td>
            <td>'.$invoiceitems['description'].'</td>
        </tr>';
    }
}

Answer 1

Like so

$i = 0;

if(mysql_num_rows($result) > 0){
    while($row = mysql_fetch_array($result)){

    if ($i % 2 == 0) {
        color white
    } else {
        color beige
    }

    $i++;
    }
}

Answer 2

You could use css

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Answer 3

Use a counter to switch the background color:

$i=0;
while($row = mysql_fetch_array($result)){
     if($i%2 == 0)
         $bgcolor='beige'; // change the color code as needed
     else 
         $bgcolor='white';
     $i++;
     ......
     $html .= '<tr style="background:#'.$bcolor.'">

Answer 4

You can use CSS to style each different rows..

for example:

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

Answer 5

you can use CSS nth-child selector for this, it makes it so you do not have to do messy php loops to add coloring.

HTML

<table>
  <tr>
   <td></td><td></td>
  </tr>
  <tr>
   <td></td><td></td>
  </tr>
  <tr>
   <td></td><td></td>
  </tr>
</table>

CSS

table tr:nth-child(odd) {
  background:#F00;
}
table tr:nth-child(even) {
  background:#FF0;
}

JSFiddle Demo