← Basic Web Development

Lesson 3 of 10

Times Table Grid

Build a multiplication table with a loop inside a loop. About 100 cells come from 20 lines of code.

What you will learn

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

Before you start

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

What this page does

  • It shows a 10 by 10 multiplication table.
  • The perfect squares are highlighted. Those are the answers where the row number and the column number are the same: 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

SIZE is used by both loops. Drag it and watch how many cells the two loops build.

10

How many rows and columns. Both loops use it, so 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 cells are built in this order: row 1 column 1, row 1 column 2, row 1 column 3, and so on to the end of row 1. Only then does row 2 start.

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 cells will be built for a 3 by 3 grid. Then put your row loop inside a second loop and 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 and 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 in the files beside this guide. None of them need anything the lesson has not covered.

  • Change `SIZE` to 12, then to 15.
  • Give the whole 7 times table row a different colour.
  • Highlight every even answer. Use `% 2 === 0`.
  • Add an input box and a button so the user chooses the size.
  • Hard: leave the cells blank where `col > row`, so each fact appears only once.
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 and 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.