Multiplication table using appendchild and html table

Question

Could anyone help me make a multiplication table, 0-10 in an 11x11 table? I need to use createElement/appendchild. When I use document write, it almost look complete, just miss the placement of the blue columns/rows.

It should look something like this (Only need the numbers, no fancy outline):

This is what I've got so far:

for(var i = 0; i < 1; i++){
    var tabell1 = document.createElement("table");
    tabell.appendChild(tabell1);
    //document.write("<table>");

        for(var j = 0; j<11; j++){
            var rad = document.createElement("tr");
            tabell.appendChild("tr");
            //document.write("<tr>");

            for(var k = 1; k<=11; k++){
                var kolonne = document.createElement("td");
                tabell.appendChild(kolonne);
                kolonne.innerHTML = k*(j+1);
                
                //document.write("<td>"+ k*(j+1) +"</td>");
            }
            //document.write("</tr>");
        }
        //document.write("</table>")
}

<div id="tabell"></div>

Answer 1

You can generate the table using two loops.

You iterate twice from 0 to 10 included.

Use use the value 0 to represent your top row and first column, which hold the numbers to be multiplied. Since the iterator starts at 0, the value will be 0 and you can use that to detect when to add the header class and set the value to your non-zero iterator, either i or j:

const table = document.createElement('table');

for (let i = 0; i <= 10; i++){
  const row = document.createElement('tr');
  for (let j = 0; j <= 10; j++){
    const col = document.createElement('td');
    let val = i * j;
    if (val === 0) {
      val = i || j;
      val = val ? val : '';
      col.classList.add('header');
    }
    col.innerHTML = val;
    row.appendChild(col);
  }
  table.appendChild(row);
}

document.body.appendChild(table);

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 3px;
  text-align: center;
}

.header {
  background: #ccf;
}