This code has the following output, assuming that you want to create a table for any number of passings.
function tabuada(...args) {
for (const number of args) {
construirTabuada(number);
}
}
function construirTabuada(numero) {
let color_td; // apenas para estilizacao.
document.write("<table border='1px' style='margin: 20px'>"); // comeca a criar uma tabela.
color_td = "#ccc";
document.write(`<thead>Tabuada do numero: ${numero}</thead>`); // cria um titulo para a tabela baseado no numero.
document.write("<td style='width:30px;background-color: " + color_td + "'>Multiplicando</td>");
for (let i = 1; i < 10; i++) {
document.write("<td style='width:30px;background-color: " + color_td + "'>" + i + "</td>");
}
document.write("<tr style='height:30px;'>");
color_td = "#fff";
document.write("<td style='width:30px;background-color: " + color_td + "'>Resultado</td>");
for (let j = 1; j < 10; j++) {
document.write("<td style='width:30px;background-color:" + color_td + "'>" + j * numero + "</td>");
}
document.write("</tr>");
document.write("</table>"); // termina de montar a tabela.
}
tabuada(2, 4, 7); // chamada de teste.
Will produce the following output for the call tabuada(2,4,7)
, we have the following structure in HTML:
Function construirTabuada
is responsible for all mathematical logic and for building the table element in HTML. I hope I helped, if that’s the way you wanted it.
I don’t understand the question. You want to know how to create your own tag HTML, example:
<taboada do="3"></taboada>
or you want to know how to put these values within a<div>
or<span>
?– Augusto Vasques