Skip to main content
← JavaScript

Lesson 2 of 11

Times Table Grid

Build a multiplication table with a loop inside a loop. Twenty lines of code make about 100 cells.

What you will learn

  • The counting for loop
  • Nested loops
  • if inside a loop
  • createElement
  • appendChild

Before you start

Zoo Webpage. There you used an array and read one item out of it. Here you write a loop that counts for you. Then you put one loop inside another.

What this page does

  • It shows a 10 by 10 multiplication table.
  • The page highlights the perfect squares. Those are the answers where the row number and the column number match. They are 1, 4, 9, 16, and so on.
  • Change SIZE in table.js to 12 and reload. The table gets bigger. You wrote no extra code.

One number, a whole grid

Both loops use SIZE. Drag it and watch how many cells the two loops build.

10

How many rows and columns the grid has. Both loops use it. One number changes the whole grid.

#dbeafe

How it works

A counting for loop has three parts, separated by semicolons.

PartExampleWhat it does
Startlet col = 1Makes a counter and sets its first value.
Keep going whilecol <= SIZEThe loop runs again while this is true.
Each timecol++Adds 1 to the counter. Same as col = col + 1.

This example uses two loops. The outer loop runs once for each row. The inner loop runs once for each cell in that row. The inner loop finishes completely before the outer loop moves on.

table.js, a loop inside a loop
for (let row = 1; row <= SIZE; row++) {
    const tr = document.createElement("tr");

    for (let col = 1; col <= SIZE; col++) {
        const cell = document.createElement("td");
        cell.textContent = row * col;
        if (row === col) cell.className = "square";
        tr.appendChild(cell);
    }

    table.appendChild(tr);
}

So the code builds the cells in this order: row 1 column 1, row 1 column 2, row 1 column 3, and so on to the end of row 1. Row 2 starts only after that.

Build it step by step

Write one loop before you write two.

  1. Make the page

    Make index.html with a heading and one empty <div id="tableArea">. Put the <script> tag at the end of <body>.

  2. Make one row with one loop

    In table.js, make the <table> element. Then write one for loop that makes 10 <td> cells in a single <tr>. Put the counter in each cell. Reload. You see one row that counts from 1 to 10.

  3. Predict, then nest

    Before you write anything, write down the order the code will build the cells for a 3 by 3 grid. Then put your row loop inside a second loop. Change the cell content to row * col. Reload. You get the full grid. Check your prediction.

  4. Add an if inside the loop

    Add if (row === col) inside the inner loop. Give those cells the class square. This shows that a loop can make a decision on every pass.

  5. Add the headers and the style

    Add the header row and the header column. Then style the table in index.css. You already used border-collapse in Geological Wonders.

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Read the three parts of the for header out loud, in order, every time you write one. Start, keep going while, each time.
  • Stop after one loop and one row. Do not go on until the student can explain the three parts without looking.
  • Make the student predict the build order for a 3 by 3 grid on paper before you nest the loops. Then add console.log(row, col) inside the inner loop. Check the prediction in the console.
  • The highlight if is a small step. Its purpose is to show that a loop body can contain a decision, not to teach if again.