Llenado secuencial de tablas HTML

Supongamos que tenemos una tabla HTML vacía como esta:

html<table id="table"></table>

Vamos a llenar esta tabla con celdas y hagamos que en estas celdas aparezcan números del 1 al 9. Aquí un ejemplo de lo que deberíamos obtener:

html<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Empecemos con la implementación.

Para comenzar, simplemente hagamos una tabla de tamaño 3 por 3, llena de letras 'x':

javascriptlet table = document.querySelector('#table');

for (let i = 0; i < 3; i++) {
  let tr = document.createElement('tr');
  
  for (let i = 0; i < 3; i++) {
    let td = document.createElement('td');
    td.textContent = 'x';
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}

Ahora hagamos que en lugar de letras 'x' en las celdas se escriban números en orden ascendente.

Para esto necesitamos introducir otro contador, que incrementará secuencialmente sus valores en cada iteración del ciclo interno, así:

javascriptlet table = document.querySelector('#table');

let k = 1; // valor inicial del contador
for (let i = 0; i < 3; i++) {
  let tr = document.createElement('tr');
  
  for (let i = 0; i < 3; i++) {
    let td = document.createElement('td');
    
    td.textContent = k; // escribimos el contador en la celda
    k++; // incrementamos el contador
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}