Coding Challenge: Use HTML, CSS and PHP to Create a Grid

 
phplogo.jpg

In this coding challenge you need to use HTML, CSS and PHP to create a 10 x 10 grid pattern as shown below. The task is relatively straightforward but will get you using a combination of HTML, CSS and PHP to achieve the desired output.

If you want to attempt the challenge on your own without any clues then stop reading now!


CODING HINTS

NESTED LOOPS IN PHP

In order to achieve the grid pattern you should consider how you can avoid repeating code by using PHP loops. In fact, you will need to use nested PHP loops.

Each row in constructed of 10 individual cells and each row of cells is repeated 10 times. This is what leads to using nested PHP loops.

HOW TO USE CSS BORDER-COLLAPSE

Once you have created your 10 x 10 grid pattern and styled it with a 1 pixel border you may end up with something that looks like this:

In order to close the gap between the cells you will need to use the CSS rule border-collapse as follows:

table {
  border-collapse: collapse;
}

The rest of the code should be fairly easy but if you get stuck then feel free to ask for help below in the comments.

DO YOU WANT TO SEE THE FULL SOLUTION?