# 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).

← →
↑
en ru