This is a nice little challenge that will get you thinking about various aspects of the processes involved. If you think back to your days in school you may remember the multiplication tables and, in particular, the multiplication grid that looked something like this:

THE TASK

Your task is to produce the multiplication grid above.

At first glance it looks quite easy but there is quite a bit of logic involved. It is not as easy as it first looks.

You may wish to consider adding a little bit of styling to your table to provide a bit of spacing within each table cell. I used padding of 5px in the example above.

CODING HINTS

Need a hint or two?

Every student will be different in their approach and that is fine as there are multiple ways to tackle this challenge. These are my thought processes and how I would approach this task.

The first thing I would do would be to make the multiplication grid smaller e.g. just consider something like a 3 x 3 grid. This is a common approach I take to most tasks i.e. I make them easier.

I would grab a pen and paper (or, in my case, my iPad) and draw out the table. There is something I prefer about drawing out solutions. I think it stems from my old coding teacher at school who made us spend weeks drawing out flowcharts. Part of this was to iron out errors early on but the other part was that we only had a couple of computers between everyone in the class!

I would then start to assign a variable value to ‘see’ what is going on. At this stage I know I am dealing with 2 numbers which are multiplied. But this is only for the cells in the middle. The cells in the first row and the first column represent each number i.e. not a product. This complicates things a little and means that the code is not quite as simple as it could have been.

Clearly, there is a need to loop through the counting numbers and to create a table cell with the number or the product of 2 numbers.

For those of you new to coding, think about the parts of the table that are repeated. You can see that you have 13 rows and within each row there are 13 cells. So, in terms of the code required, we have a loop within a loop.

My thoughts would then turn to how to create a table in HTML. I would hand code some HTML to produce a simple table, perhaps even the 3 x 3 grid I mentioned previously. The HTML code to produce a table is quite repetitive and this is where the beauty of using PHP comes in. I would convert the HTML code using PHP. I find that doing things this way really helps me see what is going on.

Once i have the table coded in PHP I then start to consider how I am going to get values into each table cell. This is the part that has the most complexity. You may have noticed that in the very first cell in the table above I have placed the letter ‘x’ to represent that the values are multiplied. Adding this letter adds another step to the logic. It is not hard but it does require some thought about how to build this into the loops.

At this stage it is usually easy to finish off the code to produce the multiplication grid.

Once I have the code to create the multiplication grid i would start to look for any opportunities to clean up the code i.e. to make it DRY (Don’t Repeat Yourself). This is not always possible and I find that the more time I spend planning, the cleaner my code will be.

READY TO START?

Go on, have a go at this challenge and let me know in the comments below how you get on. Good luck!

WANT THE SOLUTION TO THIS CHALLENGE?

A full video solution together with all downloadable code is available. Each step of the solution is explained in detail. Learn about my thought processes as I code the solution to this challenge.

IMPROVE YOUR PHP CODING SKILLS

Would you like to improve your PHP coding skills through challenges like these?

Would you like to have full video solutions and tutor support?

The PHP for Beginners course contains over 20 such challenges, each building upon the last. You will develop your PHP coding skills from complete beginner to confident coder. There is a full FREE preview so head on over and take a look.