Creating HTML tables in JavaScript

Suppose we have such an empty HTML table:

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

Let's fill this table with rows and columns. Here is an example of what we should obtain:

<table id="table"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

To solve the problem, we need two nested loops. The first loop will create the rows of the table and the second will create the cells in each row:

let 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'); tr.appendChild(td); } table.appendChild(tr); }

Given an empty HTML table. Fill this table with 5 rows with 5 columns using two nested for loops.

Modify the previous task so that the table is 10 rows by 5 columns.

Modify the previous task so that the text 'x' is added to each td.

Implement a table generator, the width and height of the tables are given in two inputs (for example, a table of 5 by 10 cells).