To iniciando no html e css, estou tentando fazer uma page simples, mas nao consigo fazer a table ter a formataço correta com todas as linhas da borda. A borda que estou colocando está aparecendo apenas nas laterais e não está fazendo a divisão dos elementos dentro dela. Se alguem conseguir me ajudar agradeço.
Codigo do html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portifólio</title>
<link rel="stylesheet" type="text/css" href="reset_css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!--- AQUI COMEÇA O CABEÇALHO DO PORTIFOLIO-->
<header class="cabeçalho">
<img class="imgNav" src="imagens/imgNav.jpg"> <!--FUNDO DA NAVEGAÇÃO-->
<h1 class="tituloPrincipal">Lorem Ipsum</h1>
<h2 class="subTituloPrincipal" >Lorem Ipsum Lorem Ipsum</h2>
<nav class="navegacao">
<ul class="lista">
<li class="listNav"><a href="#">Quem Sou ?</a></li>
<li class="listNav"><a href="#">Habilidades</a></li>
<li class="listNav"><a href="#">Projetos</a></li>
<li class="listNav"><a href="#">Contato</a></li>
</ul>
</nav><!--NAVEGACAO--->
</header> <!---CABECALHO-->
<main class="main">
<section class="secao">
<p class="apresentacao">Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren </p> <!-- TEXTO DE APRESENTAÇÃO-->
<img class="avatar" src="imagens/avatar.jpg"><!--IMAGEM DO AVATAR-->
</section >
<!--SECAO DAS HABILIDADES--->
<section class="secao" id="secao2">
<h2 id="habilidades" class="subTitulo">Habilidades</h2>
<div class="divTabela"><!-- FIZ ESSA DIV PARA VISUALIZAR MELHOR A TABLE--->
<table class="tabela"><!--Essa tabela nao fica do jeito que quero-->
<thead>
<tr>
<th>Conhecimentos</th>
<th>Nivel de Conhecimento</th>
</tr>
</thead>
<tbody class="conhecimentos">
<tr>
<td>Html</td>
<td>Básico</td>
</tr>
<tr>
<td>Css</td>
<td>Básico</td>
</tr>
<tr>
<td>Javascript</td>
<td>Básico</td>
</tr>
<tr>
<td>Java</td>
<td>Básica</td>
</tr>
</tbody>
</table><!--TABLE CLASS TABELA--->
<h2 class="subTitulo">Cursos e Certificações</h2>
<ul>
<li>Loren ipsum</li>
<li>Loren ipsum</li>
<li>Loren ipsum</li>
<li>Loren ipsum</li>
</ul>
</section>
</main><!---MAIN-->
</body>
</html>
Codigo do css
body{
background-image: url(../imagens/fundo.jpg);
background-size: 100%;
background-attachment: fixed;
}
/*AQUI COMEÇA O CSS DO HEADER E NAV*/
.imgNav{
width: 100%;
height: 150px;
}
.tituloPrincipal{
margin: 20px;
font-size: 35px;
font-weight: bold;
padding: 10px 10px 0 10px;
color: white;
}
.subTituloPrincipal{
margin: 20px;
font-size: 30px;
font-weight: bold;
padding: 0 10px 10px 10px;
position: absolute;
top: 195px;
color: white;
}
.navegacao{
margin: 35px;
position: absolute;
top: 20px;
right: 500px;
}
.lista li{
padding: 0 0 0 0;
display: inline;
margin: 0 0 0 50px;
}
.listNav:hover{
text-decoration: underline;
}
.lista a{
font-size: 28px;
text-decoration: none;
color: yellow;
font-family: Jazz LET, fantasy;
}
a:hover{
color: #de0404;
font-size: 38px;
font-weight: bold;
font-family:Snell Roundhand, cursive;
}
/*--AQUI COMEÇA O CSS DO MAIN, SECTION E TABELAS*/
.apresentacao{
color: white;
margin:20px;
padding-top: 50px;
text-align: justify;
font-size: 23px;
position: absolute;
right: 844px;
font-family: Impact, fantasy;
}
.avatar{
width: 816px;
height: 400px;
position: relative;
left: 700px;
top: -87px;
}
.subTitulo{
color: white;
font-size: 30px;
font-weight: bold;
margin: 20px 0 20px 15px;
text-align: center;
}
li{
color: white;
margin: 10px 0 0 15px;
font-family: Stencil Std, fantasy;
font-size: 20px;
text-align: center;
}
.divTabela{
background-color: white;
width: 100%;
height: 200px;
}
table{
width: 500px;
border: 2px solid black;
margin-left: 520px;
}