How to produce a chessboard pattern in PHP

In this lesson we will create a chessboard pattern, an 8x8 grid of black and white squares like this:

The chessboard pattern is basically a HTML table consisting of 8 rows each with 8 cells. This is a repeating pattern so we could use a for loop to create a row of the 8 cells and then repeat this within another loop 8 times. In effect, we need a nested loop.

Before we begin coding the loops let us just consider the format of a simple HTML table. To keep the code fairly short I will just show the code for a 2 x 2 table.

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

We can see that we have repeated lines consisting of a table row and table cells (the td elements).

Now let's add a single loop to produce a row with 8 cells.

<table>
   <tr>
      <?php
         for($column = 1; $column <= 8; $column++){
            echo "<td></td>";    
         }
      ?>
   </tr>
</table>

Let's add some styling to the row so that we can see it. The default styling for tables in some browsers means that the table cells are not visible by default.

We will set the height and width of the cells and add a border to each cell so that we can see them. Note that we will be changing this later!

td {
   height: 30px;
   width: 30px;
   border: 1px solid black;
}

We now have a table with one row like this:

This pattern of 8 cells needs to be repeated for each of the 8 rows in the chessboard.

So, we add another loop and nest the first loop inside it as follows:

<table>
   <?php
      for($row = 1; $row <= 8; $row++){
         echo "<tr>";
            for($column = 1; $column <= 8; $column++){
               echo "<td></td>";    
            }
         echo "</tr>";
      }
   ?>
</table>

We now have the following:

We now need to consider how we will colour the squares.

First of all, let's consider a numbered chessboard like this:

23456789
345678910
4567891011
56789101112
678910111213
7891011121314
89101112131415
910111213141516

The numbers are simply the addition of the row and column numbers.

E.g. the first cell is the first row and the first column so 1 + 1 = 2

Similarly, the cell in the third row and fifth column is a result of adding 3 and 5 to get 8.

If you notice, any cells with an even number need to be coloured black.

We use a conditional statement to assign a class of 'black' to any cell which is an even number. We test for an even number by adding the $row and $column values and then using the modulus operator as follows:

<table>
   <?php
      for($row = 1; $row <= 8; $row++){
         echo "<tr>";
            for($column = 1; $column <= 8; $column++){
               if(($row + $column) % 2 == 0){
                  echo "<td class='black'></td>";
               } else {
                  echo "<td></td>";
               }    
            }
         echo "</tr>";
      }
   ?>
</table>

Line 6: we first add the $row and $column. We then check the remainder of this total when it is divided by 2. If the total is an even number then we should get zero when we divide by 2. If we get zero then we render a black square.

We can now adjust our css rules as follows:

table {
   border: 1px solid black;
}

td {
   height: 30px;
   width: 30px;
}

.black {
   background: black;
}

We now have the required chessboard pattern.

Want to Learn More?

Become a member and get access to the member only area of this site here.

Comments

Your email address will not be published.

User Avatar

Super cool! I was given a similar task in a recent assignment and I struggled with getting the colours correct. However, I understand now!

by Dicey12, 27-Dec-2015

User Avatar

Glad this tutorial proved useful. There are many variations on this task with some nice little extension exercises such as colouring various squares in difference colours, producing multiplication grids, identifying multiples of numbers (for number grids) etc

by Patrick Morrow, 27-Dec-2015

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.