photo credit: Lee Carson

Everyone loves the alternating table row colors on web pages. The same idea is applied to alternating blog comment styles. You can do it quite easily, and here are the three simple steps to do it.

This technique involves PHP, CSS, and a touch of SQL. However, the logic and therefore the heavy lifting is found in the PHP. You can use this method with table rows (as is commonly used for WordPress comments), or for stacked div elements. I will present a table row version first, then a div version.

Step one is to style your two table rows so they appear distinct from each other. This of course goes in your stylesheet:

tr.rowA {
    background-color: #666;
    text-align: left;
}
tr.rowB {
    background-color: #333;
    text-align: right;
}

Step two is to write the function to determine if the row is an even or odd row (and therefore rowA or rowB). This is accomplished using the modulus operator (% in PHP). This operation gives you the remainder of a division. No matter what number we feed it, even numbers divided by 2 result in 0 remainder (therefore boolean ‘false’). Odd numbers divided by 2 result in .5 remainder (therefore boolean ‘true’).

function alternatingRows(&$counter) {
	if ($counter % 2) {
		$row = 'rowA';
	}
	else {
		$row = 'rowB';
	}
	$counter++; // increment counter for next iteration
	return $row; // return rowB or rowA
}

Note that this function can be placed on the page where it is used, but a better place would a globals file that you include. Code reuse is next to godliness.

Step three is to write the code to select your data, and present it in a loop. This is assuming you know how to create your connection object and have done so already.

$myQuery= "SELECT * FROM table";
$myResult = @$connectionObject->query($myQuery);

Note that if this is in a table you will need to code the table start and end tags outside the loop (or you will get multiple tables).

// echo alternating table rows
echo "<table>";
$ndx = 0;
while ($row = $myResult->fetch_assoc()) {
    $rowClass = alternatingRows($ndx);
    echo "<tr class=\"$rowClass\">";
    echo "<td>$row[data1]</td>";
    echo "<td>$row[data2]</td>";
    echo "</tr>";
}
echo "</table>";

The function logic is the simplest part. The echoing out your data is the trickiest part, but start small until it works and then you can expand the complexity. The styling is the funnest part, limited only by your imagination and CSS abilities.

Here is another similar example using div elements instead of table rows:

Stylesheet:

.divA {
    float: left;
    background-color: #666;
    text-align: left;
}
.divB {
    float: right;
    background-color: #333;
    text-align: right;
}

Function:

function alternatingRows(&$counter) {
	if ($counter % 2) {
		$div = 'divA';
	}
	else {
		$div = 'divB';
	}
	$counter++; // increment counter for next iteration
	return $div; // return divA or divB
}

Display:

// echo alternating divs
$ndx = 0;
while ($each = $myResult->fetch_assoc()) {
    $divClass = alternatingRows($ndx);
    echo "<div class=\"$divClass\">
    echo "<h1>$each[data1]</h1>";
    echo "<p>$each[data2]</p>";
    echo "</div>";
}

Questions or comments?

No related posts.