[HELP]meu codigo está mostrando os dados em diagonal

Front-end JavaScript
#1

boa noite, estou com um problema e não sei como resolver…
estou salvando alguns dados pelo meu formulario mas na hora de exibir os dados em uma tabela ela exibe em diagonal e em linhas diferentes

<!DOCTYPE html>
   <html>
    <head>
        <meta charset="utf-8"/>
        <title>CADASTRO DE ALUNOS</title>
        <link rel="stylesheet" type="text/css" href="form.css">
       <script src="js/jquery.min.js"></script>
        <script>
            var base;
                if(localStorage.getItem("base")!== null){
                    base = JSON.parse(localStorage.getItem("base"));
                }else{
                    base = {
                        dados:[]
                    };
                }
            
        </script>
        <script>
            
            $(function(){
                $("#botao_cadastrar").click(gravarDados);
                $("#botao_apagar").click(apagarDados);
                $("#botao_mostrar").click(mostrarDados);
             
            });
            
            
            
            
            
            function gravarDados(){
                
                
                base.dados.push({nome:$("#nome_aluno").val()});
                base.dados.push({rgm:$("#rgm_aluno").val()});
                base.dados.push({parcial:$("#av_parcial").val()});
                base.dados.push({projeto:$("#av_projeto").val()});
                base.dados.push({regimental:$("#av_regimental").val()});
                localStorage.setItem('base', JSON.stringify(base));
                alert(" DADOS CADASTRADOS! ");
                
                limparCampos();
            }



function apagarDados(){
                
                if (localStorage.length > 0){
                    localStorage.clear();
                    
                window.location = window.location;
                    
                }else{
                    alert(" STORAGE VAZIO! ");
                }
                
            }
            
            
            
            
            
            function processador(){
                var conteudo = "<table align='center' border='1'>";
                    for(var i = 0; i < base.dados.length;i++){
                    
                        conteudo += "<tr>";
                        conteudo += "<td>" + "NOME: " + base.dados[i].nome + "</td>";
                        conteudo += "<td>" + "RGM: " + base.dados[i].rgm + "</td>";
                        conteudo += "<td>" + "PARCIAL: " + base.dados[i].parcial + "</td>";
                        conteudo += "<td>" + "PROJETO: " + base.dados[i].projeto + "</td>";
                        conteudo += "<td>" + "REGIMENTAL: " + base.dados[i].regimental + "</td>";
                        
                       conteudo + "</tr>";
                }
                        conteudo + "</table>";
                        $("#mostrar_tudo").html(conteudo);
            }
            
                
                
                
                
                
            
            //MOSTRAR OS DADOS
            
            function mostrarDados(){
               base = JSON.parse(localStorage.getItem("base"));
                if(localStorage.length > 0){
                    processador();
                }else{
                    alert(" NENHUM DADO ENCONTRADO! ");
                }
            }
           
            
            function limparCampos(){
                $("#nome_aluno").val("");
                $("#rgm_aluno").val("");
                $("#av_parcial").val("");
                $("#av_projeto").val("");
                $("#av_regimental").val("");
            }
        
        
        </script>
    </head>
    <body>
    <form class="form1">
        <h1>CADASTRO DE ALUNOS<br/>
            
        </h1>
        <div>
            <!--CAMPOS PARA CADASTRAR-->
            <input id="nome_aluno" type="text" name="nome" placeholder="NOME" class="entrada"/>
            
            <input id="rgm_aluno" type="text" name="rgm" placeholder="RGM" class="entrada"/>
            
            <input id="av_parcial" type="" name="parcial" placeholder="NOTA AV PARCIAL (MAX: 2 PONTOS)" class="entrada"/>
            
            <input id="av_projeto" type="number" name="projeto" placeholder="NOTA PROJETO (MAX: 3 PONTOS)" class="entrada"/>
            
             <input id="av_regimental" type="number" name="regimental" placeholder="NOTA AV REGIMENTAL (MAX: 5 PONTOS)" class="entrada"/>
            
         
        </div>
        
        <div>
            <!--BOTAO PARA CADASTRAR--->
           <input type="button" name="button" value="CADASTRAR" id="botao_cadastrar"  title="CLIQUE PARA ADICIONAR UM NOVO ALUNO!"/>
          
              <!--BOTAO PARA EXIBIR--->
            <input type="button" name="button3" value="EXIBIR ALUNOS" id="botao_mostrar" title="CLIQUE PARA MOSTRAR OS ALUNOS!"/>
            
            <!--BOTAO PARA APAGAR--->
            <input type="button" name="button4" id="botao_apagar" title="CLIQUE PARA APAGAR TODOS OS ALUNOS!"/>
        </div>
    
       
        
    </form>
         
        <div id="mostrar_tudo"></div>
        
    </body>
    
</html>

.form1{
width: 300px;
height: auto;
background-color: #dbdbdb;
padding: 20px 30px 20px 30px;
font-size: 12px;
font-family: sans-serif, fantasy;
color: #6d6d6d;
border-radius: 10px;
margin: 0 auto;
}
table{

background-color: #dbdbdb;
font-size: 20px;
border-radius: 4px;
margin-top: 20px;
color: #9a9a9a;

}

h1{
padding: 0px 0px 10px 0px;
border-bottom: 3px solid #9d9d9d;
text-align: center;
}

.rotulos{
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
.titulo2{
font-size: 11px;
}
div{
margin: 0px 0px 20px;
}
.entrada{
border: none;
color: #484848;
height: 30px;
line-height: 15px;
padding: 5px 0px 5px 5px;
width: 290px;
border-radius: 5px;
background-color: #b9b9b9;
margin: 3px
}
#mensagem{
height: 100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
#botao_cadastrar{
background-color: #21649d;
border: none;
margin-left: 10px;
padding: 9px 20px 9px 20px;
color: #ffffff;
border-radius: 4px;
font-weight: bold;
font-size: 11px;

}
#botao_apagar{
background-color: #931818;
border-radius: 4px;
font-weight: bold;
padding: 6px 15px 11px 15px;
background-image:url(img/transparency.png);
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
border: none;
margin-left: 5px;
}

#botao_mostrar{
background-color: #21649d;
border: none;
margin-left: 5px;
padding: 9px 20px 9px 20px;
color: #ffffff;
border-radius: 4px;
font-weight: bold;
font-size: 10px;

}

#botao_cadastrar:hover{
color: #ffffff;
background-color: #377eba;
}

#botao_mostrar:hover{
background-color: #377eba;
}

#botao_apagar:hover{
background-color: #b42e2e;
}

Capturar
Capturar.JPG943×358 41.1 KB
Texto pré-formatado