Errors configurating CSS - html

Question

I am trying to work with CSS and containers without success, I would like if someone helps:
I am trying to do as the specified with the following code, the table is okay is fulfilled the 100% of the 40% of body Container1 DIV, the problem is with the rows and the columns, they don't follow the specification.
<div id="CamadaSuperior" >
<table id="tabela">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="CamadaDoMeio" >
CamadaDoMeio
</div>
<div id="CamadaInferior" >
<table class="TabelaDaCamadaInferior" border="1">
<tr><td>Esquerda</td><td>Meio</td><td> Direita</td></tr>
</table>
</div>
<div id="CamadaRodape" >
</div>
</body>
My CSS is this:
html, body{
height: 100%;
margin:0;
padding:0;
}
div{
border:1px solid black;
padding:0;
}
#CamadaSuperior
{
height: 40%;
}
#CamadaDoMeio
{
height: 10%;
}
#CamadaInferior
{
height: 40%;
padding:0;
}
#CamadaRodape
{
height: 10%;
padding:0;
}
#tabela{
height:100%;
table-layout: fixed;
border-width:1px;
}
#tabela tr{
width:50%;
height:100%;
border-width:1px;
}
#tabela tr td{
width:100%;
height:16.7%;
}
.TabelaDaCamadaInferior
{
height: 100%;
width: 100%
}
.TabelaDaCamadaInferior tr td
{
width:33%;
}
But this is what is happening with table row:
TD tag does not work as well:

Answer 1

Well the short answer is to make use of a CSS framework like bootstrap, it can be used in an eclipse environment and just attach the classes you need in order to get it to position correctly. Check the link here https://www.texniq.de/en/web-engineering-i/create-first-bootstrap-project
The long answer is that you need to style each td & tr with a class that has the width and height that you want. You'll also need to adjust the font-size accordingly so that the text in each cell will fit properly. Right now the table has some css applied but the tags within it are using their default values.