Olá Victor, tudo certo? Espero que sim
Agradeço pela paciência no aguardo da resposta.
Primeiramente, gostaria de te parabenizar pelo seu esforço e dedicação em se desenvolver ainda mais! Sucesso e continue assim!
Quanto a tabela, se o objetivo é criar ela em javascript usaremos algumas funções:
- document.createElement() - cria um elemento HTML;
- appendChild - associa um elemento a outro;
- innerHTML - retorna todo o texto e o html que existe no elemento.
Levando isso em consideração, vamos pro código:
<style>
table{
border-collapse: collapse;
border-spacing: 0;
}
th, td{
padding: 10px 20px;
border: 2px solid rgb(128, 4, 4);
}
</style>
</head>
<body id="body">
<script src="script.js">
</script>
</body>
<script>
//Criaremos as tags e guardaremos em variáveis para usarmos depois
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
//Associamos título e corpo da tabela na tag tabela
table.appendChild(thead);
table.appendChild(tbody);
//Adicionamos a tabela toda na tag corpo da tabela, usamos o id registrado no style
document.getElementById('body').appendChild(table);
// Criando e adicionando separadamente nossa primeira linha da coluna, vai ser nosso cabeçalho
//Na linha, as células são criadas por meio de variáveis da esquerda para a direita, tr para linha e th para os dados do cabeçalho
//Usaremos innerHTML para adicionar dados a célula
let linha_1 = document.createElement('tr');
let cabecalho_1 = document.createElement('th');
cabecalho_1.innerHTML = "IMC";
let cabecalho_2 = document.createElement('th');
cabecalho_2.innerHTML = "Resultado";
//Associamos a célula da linha com o dado que queremos
linha_1.appendChild(cabecalho_1);
linha_1.appendChild(cabecalho_2);
//Por fim associamos toda a linha já pronta no cabeçalho da tabela
thead.appendChild(linha_1);
// Fazemos o mesmo que foi feito para o cabeçalho, porém:
//Não usamos th, usamos td para todo e qual dado fora do cabeçalho
let linha_2 = document.createElement('tr');
let linha_2_dado_1 = document.createElement('td');
linha_2_dado_1.innerHTML = "Entre 18,5 e 24,9.";
let linha_2_dado_2 = document.createElement('td');
linha_2_dado_2.innerHTML = "Peso normal";
//Conectamos dado e coluna e depois ao corpo
linha_2.appendChild(linha_2_dado_1);
linha_2.appendChild(linha_2_dado_2);
tbody.appendChild(linha_2);
//3°Linha
let linha_3 = document.createElement('tr');
let linha_3_dado_1 = document.createElement('td');
linha_3_dado_1.innerHTML = "Entre 25 e 29,9";
let linha_3_dado_2 = document.createElement('td');
linha_3_dado_2.innerHTML = "Sobrepeso";
linha_3.appendChild(linha_3_dado_1);
linha_3.appendChild(linha_3_dado_2);
tbody.appendChild(linha_3);
//4°Linha
let linha_4 = document.createElement('tr');
let linha_4_dado_1 = document.createElement('td');
linha_4_dado_1.innerHTML = "Entre 30 e 34,9";
let linha_4_dado_2 = document.createElement('td');
linha_4_dado_2.innerHTML = "Obesidade grau 1";
linha_4.appendChild(linha_4_dado_1);
linha_4.appendChild(linha_4_dado_2);
tbody.appendChild(linha_4);
// 5°Linha
let linha_5 = document.createElement('tr');
let linha_5_dado_1 = document.createElement('td');
linha_5_dado_1.innerHTML = "Entre 35 e 39,9";
let linha_5_dado_2 = document.createElement('td');
linha_5_dado_2.innerHTML = "Obesidade Grau 2";
linha_5.appendChild(linha_5_dado_1);
linha_5.appendChild(linha_5_dado_2);
tbody.appendChild(linha_5);
</script>
Se precisar de ajuda com qualquer dúvida ou problema fico à disposição, conte com a gente!
Um bom dia para você e bons estudos.
