Paste code

<!doctype html>
<html lang="pt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gestão de Cursos</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="container text-left">
      <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">UniProg - Cursos</a>
        </div>
      </nav>

      <div class="row">
        <div class="col"></div>
        <div class="col-8">
          <div class="row">
            <div class="col">
              <div class="mb-1">
                <label for="nome" class="form-label">Nome</label>
                <input type="text" class="form-control form-control-sm" id="nome">
              </div>
            </div>
            <div class="col">
              <div class="mb-1">
                <label for="departamento" class="form-label">Departamento</label>
                <input type="text" class="form-control form-control-sm" id="departamento">
              </div>
              <div class="mb-3">
                <label for="duracao" class="form-label">Duração</label>
                <input type="text" class="form-control form-control-sm" id="duracao">
              </div>
            </div>
          </div>

          <div class="mb-4 mt-3">
            <button type="button" class="btn btn-primary" onclick="buscarCursos()">Buscar</button>
            <button type="button" class="btn btn-primary">Salvar</button>
          </div>

          <table class="table">
            <thead>
              <tr>
                <th scope="col">Ação</th>
                <th scope="col">Nome</th>
                <th scope="col">Departamento</th>
                <th scope="col">Duração</th>
              </tr>
            </thead>
            <tbody id="corpo_tabela">
            </tbody>
          </table>

        </div>
        <div class="col"></div>
      </div>
    </div>

    <script>
      var vetor_cursos = [];

      function buscarCursos() {
        vetor_cursos = [
          { nome: "Engenharia de Software", departamento: "Computação", duracao: "4 anos" },
          { nome: "Administração", departamento: "Gestão", duracao: "4 anos" }
        ];
        
        montar_tabela(vetor_cursos);
      }

      function montar_tabela(vetor_cursos) {
        var linhas = "";
        for (var i = 0; i < vetor_cursos.length; i++) {
          var linha = `<tr>
                        <td><button class="btn btn-info btn-sm" onclick="mostrarDetalhes(${i})">Ver detalhes</button></td>
                        <td>${vetor_cursos[i].nome}</td>
                        <td>${vetor_cursos[i].departamento}</td>
                        <td>${vetor_cursos[i].duracao}</td>
                      </tr>`;
          linhas += linha;
        }
        document.getElementById("corpo_tabela").innerHTML = linhas;
      }

      function mostrarDetalhes(index) {
        document.getElementById("nome").value = vetor_cursos[index].nome;
        document.getElementById("departamento").value = vetor_cursos[index].departamento;
        document.getElementById("duracao").value = vetor_cursos[index].duracao;
      }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>