Criando Tabelas HTML em JavaScript

Suponha que temos uma tabela HTML vazia como esta:

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

Vamos preencher esta tabela com linhas e colunas. Aqui está um exemplo do que devemos obter:

<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>

Para resolver a tarefa, precisamos de dois loops aninhados. O primeiro loop criará as linhas da tabela, e o segundo - as células em cada linha:

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);
}

É dada uma tabela HTML vazia. Usando dois loops aninhados for preencha esta tabela com 5 linhas e 5 colunas.

Modifique a tarefa anterior para que a tabela seja criada com o tamanho de 10 linhas por 5 colunas.

Modifique a tarefa anterior para que em cada td seja adicionado o texto 'x'.

Implemente um gerador de tabelas, onde a largura e a altura das tabelas são definidas em dois inputs (por exemplo, tabela de 5 por 10 células).