How to combine CSS with PHP while loop and table?

CSS can do alternating colour table rows very easily, without you needing to do anything specific in your PHP code.

You can do it with the :nth-child or :nth-of-type selectors.

Example:

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

See also documentation from the W3C: http://www.w3.org/Style/Examples/007/evenodd.en.html

The only caveat is that this isn't supported in IE8 or earlier. But all other browsers in common use support it just fine, so if you can live without IE6/7/8 support, then just do that, and you'll be fine.

If you do need to support IE8 or earlier, then you have a few options.

• The obvious option is just to leave it, and let IE8 show a single colour for the table rows. It won't prevent people using the site, so just leave the better looking stuff for better browsers.
• But there are some javascript hacks that add support for the :nth-child selector to older versions of IE. The best one I'll recommend is http://selectivizr.com/. Now you can use advanced CSS even in older IE versions.
• If you don't want to do that, but you do need to show row colours in IE, then the only option you have left is to add classes to the rows. Just configure two classes for odd and even rows, and add the classes to each row as appropriate. This could be done in your PHP code or in your JS code when the page loads. It's not the ideal solution though; Selectivizr is better because it means that other browsers don't suffer because of old IE's lack of features.

Hope that helps.

$i = 0;
while ($row = mysqli_fetch_assoc($result))
{
    echo "<tr ".($i%2 == 1) ? 'style="background-color:red': ''."><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>";

$i++;
}

You need to add a specific class to every odd or even row, and apply your CSS to that class, have a look at the below code snippet.

  echo "<style type='text/css'>
            tr {background: #999999;}
            tr.row_odd {background: #EFEFEF;}
        </style>
        <table border=1>
            <tr>
                <th>Product ID</th>
                <th>Title</th>
                <th>Author</th>
                <th>Description</th>
            </tr>
            ";

$count = 0;
while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr".($count%2?'class="row_odd"':'').">
        <td>" . $row["id"] . "</td>
        <td>" . $row["title"] . "</td>
        <td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td>
        <td>" . $row["description"] . "</td>
    </tr>";

    $count++;
}

echo "</table>";