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

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;

}

Texto pré-formatado

Topicos relacionados