Web Cash

There are a lot of situations in which you’d like to alternate CSS styles from one element to the next. Long tables, for example, look a lot nicer when the background color of the rows is alternated.

How do we do that? Some pretty simple PHP can help you accomplish this task and spice up your HTML/CSS.

Look At the HTML/CSS

Before we start making things dynamic, let’s look at the basic HTML.

Let’s say we want to make a list of items - in a table - maybe a list of emails. The end result should be a table with alternating background colors for rows - white and light blue.

If we were to create this table by hand, it might look something like this.

<table>
<tr class="blue"><td>E-mail subject</td><td>Sender</td></tr>
<tr class="white"><td>E-mail subject</td><td>Sender</td></tr>
</table>

This assumes that we have a CSS class defined as “blue” with a blue background and “white” with a white background.

Adding Some PHP to Assign Classes

We’re setting the background color by adding a class declaration to the table row. The first step in making this dynamic is to use PHP to echo the class. Like this…

<tr class="<?php echo 'blue'; ?>"><td> ... </td></tr>

We’ve taken the same table row element from before and replaced “blue” with a php snippet that echos the same phrase, “blue.” The end result is the same HTML that we created in the first example.

Dynamically Choosing the Class

The final step in making this dynamic is to add a conditional statement to the PHP block. For example, let’s say we’re executing a loop 5 times. On the odd iterations (1, 3, 5) we’ll use “blue” as the class. On the even iterations (2, 4), we’ll use “white.”

To test whether or not a number is odd, you can use the modulus (%) operator. This returns the remainder of a division - so 2 % 3 = 1. With a little basic math theory, we know that if a number is divided by 2 and has no remainder it’s even - but if there’s a remainder of 1 it’s odd.

Here’s what the loop might look like.

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php
      if ($x % 2 == 1) { echo "blue"; }
      else { echo "white"; }
      ?>"><td> ... </td></tr>
<?php } ?>

That If Statement Is Kind of Long…

Well, we can shorten that up. This is a great place to use the obscure and un-readable ternary operator in PHP. It’s a shortcut that allows you to write a simple if-statement in one line.

For example…

echo (true ? "Yes" : "No");

The ternary operator takes three parts - the conditional statement (in this case I just wrote true), a value to return if the statement is true (”Yes”), and a value to return if the statement is false (”No”). I echo’ed the result just so you could see what the statement outputs (in this case, “Yes”).

We turn our previous if statement into a ternary operator statement and shorten up that code block quite a bit. Like so…

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php echo ($x % 2 == 1 ? "blue" : "white"); ?>"><td> ... </td></tr>
<?php } ?>

Creating these table rows is just one example of how you can use PHP to help spice up your HTML. With this concept, you can dynamically alternate styles based on a bunch of factors.

How else could you use this?

You could alternate the background colors of comments in your blog template. You could include a bottom-border after every five rows in your table. You could make a calendar module and display Saturday and Sunday in boldface.

The options are really endless - so long as you understand the basic principal.

Tags: blog, css, html, php, style, template