Alternate colours for list items from a php array

18. Apr, 2010

Alternative Coloured Lists

Very often we need to take data from an array and display it on a page. And how better to present this than with alternately coloured boxes? They can fit in with the style of your site, break up the data, and make readability that much better. Here we’ll take a look at the best ways to make this happen.

First of all, we’ll style our unordered list with some css, and then create a class for the alternative colour. Here, the regular list item is a lovely shade of pink, and the alternative class is a rather fetching grey.

li {
  color:#333;
  font-family:Arial, Helvetica, sans-serif;
  font-size:20px;
  letter-spacing:-1px;
  list-style:none;
  background:#E39A9A;
  border:1px dashed #999;
  padding:5px;
  width:400px;
  margin-bottom:20px;
}

.alt {
  background:#CCC;
}

Next we need to write a loop in php that will take all items from a php array (here named rather aptly $array). There’s many ways to do this, but I’ll be using my favourite method, the foreach statement.

<ul>
  <?php
    $count = 0;
    foreach ($array as $item) {
      if($count%2 == 0) echo '<li class="alt">'; else echo '<li>' ;
      echo $item;
      echo '</li>';
      $count ++;
    }
  ?>
</ul>

So what’s going on there? First of all, we need to set up a variable called $count, which will count how many times the loop has been made:

$count = 0;

As we’re putting this before any loops have been made, we set it at zero. This will be incremented every time the loop is passed. Then we need to wrap everything up in ul tags (for our unordered list), and then create a loop that takes each item from the array as a new variable, called $item. Let’s look at that:

foreach ($array as $item) {
}

The foreach loop is expanding the array named $array and creating a variable called $item. Next, we create a conditional statement for inside the loop that will check if $count is currently an even number.

if($count%2 == 0) echo '<li class="alt">'; else echo '<li>' ;

This snippet checks to see if $count divides by two. If it does, we will echo a li with class “alt”. If it doesn’t divide by two, we will echo out a standard li tag. Next, we can echo the current array item, with the variable $item, and then close the li tag.

echo $item;
echo '</li>';

And finally, we need to add one to the variable $count, so that it doesn’t stay on 0.

$count++;

This is a short way of writing “add one to the variable” and is very useful to remember for php development.

Other methods

Like almost all solutions in php, this is only one of many. There are hundreds of methods that all lead to the same conclusion, but it’s worthwhile picking one now, and sticking with it. It can save time and effort in the future if you have snippets saved up for general tasks like this, and if there is homogeneity amongst your application code it will be quicker to write and easier to edit in the future.
Now then, it’s probably a good time to mention the shortest possible method out there for alternative colour rows in php:

<ul>
  <?php
  $c = true;
  foreach($array as $item)
    echo '<li'.(($c = !$c)?' class="alt"':'').">$item</li>";
  ?>
</ul>

The principle is exactly the same as our detailed method, but it has been shrunk down using shortcodes and concatenation. The $count variable has also been changed to a Boolean so that it can be flipped from true to false in less characters. If you know of a faster way, be sure to comment.

Categories: css, php

Leave a Reply