Como montar tabelas a partir de arrays | JavaScript | Alura

Fiz um código para descobrir nacionalidades de países e queria gerar uma tabela pelo JavaScript a partir do código que fiz:

const descubra = document.getElementById('descubra');

descubra.addEventListener("click", function(event) {
    event.preventDefault();
    const txtPais = document.getElementById('pais');
    const pais = String(txtPais.value);

    const nomePaises = ['Afeganistão','Andorra', 'Angola','Antígua e Barbuda','Argélia','Argentina','Armênia','Austrália','Áustria','Azerbaijão','Bahamas','Bangladesh','Barbados','Barém','Bielorrússia','Bélgica','Belize','Benim','Bolívia','Bósnia','Bósnia e Herzegovina','Botsuana','Brasil','Brunei','Bulgária','BurkinaFaso','Burundi','Butão','Cabo Verde','Camarões'];

    const nacionalidades = ['Afegão','Andorrano','Angolano','Antiguano','Argelino','Argentino','Armênio','Australiano','Austríaco','Azeri','Bahamense','Bangladês','Barbadiano','Baremita','Bielorrusso','Belga','Belizenho','Beninense','Boliviano','Bósnio','Bósnio','Bechuano','Brasileiro','Bruneano','Búlgaro','Burquinense','Burundês','Butanense','Cabo-verdiano','Camaronense'];

let nomePais = nomePaises.indexOf(pais);
    const resultado = document.getElementById('resultado');

    if (pais.length == 0 || nomePais < 0) {
        const layout = `
        <div class="resultado">
        <label class="titulo">Aqui está o resultado:</label>

        <p>Não foi digitado o <strong class="letra-cor">país</strong> ou é um <strong class="letra-cor">país inválido</strong>.
        </p>
        </div>
        `
        resultado.innerHTML = layout;
    } else {
        layout = `
        <div class="resultado">
        <label class="titulo">Aqui está o resultado:</label>

        <p>A nacionalidade de <strong class="letra-cor">${nomePaises[nomePais]}</strong> é <strong class="letra-cor">${nacionalidades[nomePais]}</strong>
        </p>
        </div>
        `
        resultado.innerHTML = layout;
    }      
});

Tentei criar uma classe, mas não tenho certeza exatamente do que fazer:

class MontaTr {
    constructor(nomePais, nacionalidades, bandeira){

    const paisTr = document.createElement("tr");
    paisTr.classList.add("paises");

    paisTr.appendChild(montaTd(nomePais, 'info-nomePais' ));
    paisTr.appendChild(montaTd(nacionalidades, "info-nacionalidadePais"));
    paisTr.appendChild(montaTd(bandeira, "info-bandeiraPais"));

    return paisTr;
    }
}

function montaTd(dado, classe) {
    var td = document.createElement("td");
    td.classList.add(classe);
    td.textContent = dado;

    return td;
}

Aqui está o HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nacionalidades</title>
    <link rel="stylesheet" href="css/descubra.css">
    <link rel="stylesheet" href="css/filtro.css">
</head>
<body>
    <main>
        <section>
            <label for="pais" class="titulo">Descubra as Nacionalidades</label>
            <input type="text" id="pais" class="digite" placeholder="Curiosidade de qual país..." required>
            <button id="descubra" class="bto-descubra">Descubra</button>
        </section>
        <section class="tabela">
            <label for="filtrar-tabela" class="titulo">Filtro:</label>
            <input id="filtrar-tabela" type="text" name="filtro" placeholder="Encontre o país..." class="digite">
            <table>
                <thead>
                    <tr>
                        <th>País</th>
                        <th>Nacionalidade</th>
                        <th>Bandeira</th>
                    </tr>
                </thead>
                <tbody id="tabela-paises">
                    <tr class="paises" id="celula-paises">
                        <td class="info-nomePais"></td>
                        <td class="info-nacionalidadePais"></td>
                        <td class="info-bandeiraPais"></td>
                    </tr>
                </tbody>
            </table>
        </section>
        <div id="resultado"> 
        </div>     
    </main>   
    <script src="js/descubra.js"></script>
</body>
</html>

Aqui o CSS:

body {
    background-color: #f2f2f2;
    width: auto;
}

main {
    width: 940px;
    margin: 0 auto;
}

section {
    background-color: #2c2a3d;
    font-family: 'Montserrat';
    width: 42%;
    float: left;
    height: 280px;
    margin: 0 35px 0 0;
    color: #f2f2f2;
    border-radius: 30px;
    padding: 20px;
}

.titulo {
    display: block;
    margin: 0 auto;
    padding: 10px 0 10px 0;
    position: relative;
    font-size: 50px;
    font-weight: 700;
    align-content: center;
}

.digite {
    width: 98%;
    height: 40px;
    font-weight: 500;
    font-size: 30px;
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.bto-descubra {
    padding: 5px 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #2c2a3d;
    border-radius: 5px;
    border-color: #ff8864;
}

.bto-descubra:hover {
    color: #ff8864; 
}

.resultado {
    background-color: rgb(44, 42, 61);
    font-family: 'Montserrat';
    margin-top: 20px;
    width: 42%;
    height: 280px;
    display: block;
    float: left;
    font-size: 30px;
    color: #f2f2f2;
    border-radius: 30px;
    padding: 20px;
}
.letra-cor {
    color: #ff8864;
}