HTML/CSS表格布局问题

Question

我对CSS和HTML完全是外行，但也有一些任务需要完成。现在，我正在做它应该做的事情，然后我会想办法做得更好。在这里，在执行表的过程中，我遇到了一堆问题，但它们都得到了解决，但我已经在这个问题上呆了很长时间。所以，我需要照片中所选的元素(表(位于左边页面的开头(在已经制作的第一个下面(，但他不想移动到那里，如果可以的话，请解释如何正确移动，或者如何最好地重做这项任务？

在此处输入图像描述

我提供了以下代码(附言：我知道这很糟糕，但我还不能做得更好(

#block1{
width: 40%;  
height: 250px;
border-collapse: collapse;
border-top: solid 3px;
float: left;
}

#block10{
width: 20%;
height: 249px;
border-collapse: collapse;
border-top: solid 3px;
float: left;
}

#block11{      
border-top: solid 3px;
height: 90px;
}

#block12{
height: 30px;
}

#block13{
height: 129px;
}

#block14{
width: 14%;
height: 249px;
border-top: solid 3px;
text-align: center;
font-size: 22px;
border-bottom: solid 1px;
}

#block12, #block11, #block13{
width: 25%;      
border-left: solid 3px;
border-right: solid 3px;
border-collapse: collapse;
float: left;
}

#frst1{
width: 35%;
height: 70px;
border-bottom: solid 3px;
border-right: solid 3px;
text-align: left;
font-size: 15pt;
}
#frst3{
text-align: right;
border-bottom: solid 3px;
font-size: 17pt;
}

#frst4, #frst2{
width: 5%;
border-right: solid 3px;
}

#frst4, .scnd2{
border-bottom: solid 1px;
}

.scnd, .scnd2{
width: 3%;
border-right: solid 1px;
border-left: solid 1px;   
}

.frt, .frt1, .frt2{
text-align: center;
border-bottom: solid 1px;
font-size: 22px;
}

.frt1{
width: 50%;
border-right: solid 1px;
}

.frt2{
width: 25%;
border-right: solid 1px;
transform: rotate(270deg);
font-size: 22px;
}


#block2{
width:2.5%;
border-collapse: collapse;
}

<table id="block1">

<tr>
<th id = "frst1">Ⅱ. Облік проведення занять та їх <br> відвідування </th> 
<td id = "frst2"></td>         
</tr>    

<tr>
<td id = "frst3">Навчальна дисципліна, <br>викладач, заклад </td>
<td id="frst4"></td>   
</tr> 
</table>
<table id= "block10">
<tr>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th> 
</tr>     
</table>

<table id = "block11" >
<tr class="frt"> <td> Тиждень №__________</td></tr>
<tr class="frt"> <td> Пропущ. занять (годин)</td></tr>       
</table>

<table id = "block12">
<tr>
<td class="frt1">за тиждень</td>   
<td class="frt1">від початку</td>
</tr>   
</table>

<table id = "block13">
<tr>
<td class="frt2">Усього</td>
<td class="frt2">З непов. причини</td>
<td class="frt2">Усього</td>
<td class="frt2">З непов. причини</td>
</tr>   
</table>


<table id = "block14">
<tr>
<td>Для нотаток</td>
</tr>   
</table>

<table id = "block2">
<tr><th>№ з/п</th></tr>
</table>

Answer 1

只需将显示：块添加到表2

#block1{
width: 40%;  
height: 250px;
border-collapse: collapse;
border-top: solid 3px;
float: left;
}

#block10{
width: 20%;
height: 249px;
border-collapse: collapse;
border-top: solid 3px;
float: left;
}

#block11{      
border-top: solid 3px;
height: 90px;
}

#block12{
height: 30px;
}

#block13{
height: 129px;
}

#block14{
width: 14%;
height: 249px;
border-top: solid 3px;
text-align: center;
font-size: 22px;
border-bottom: solid 1px;
}

#block12, #block11, #block13{
width: 25%;      
border-left: solid 3px;
border-right: solid 3px;
border-collapse: collapse;
float: left;
}

#frst1{
width: 35%;
height: 70px;
border-bottom: solid 3px;
border-right: solid 3px;
text-align: left;
font-size: 15pt;
}
#frst3{
text-align: right;
border-bottom: solid 3px;
font-size: 17pt;
}

#frst4, #frst2{
width: 5%;
border-right: solid 3px;
}

#frst4, .scnd2{
border-bottom: solid 1px;
}

.scnd, .scnd2{
width: 3%;
border-right: solid 1px;
border-left: solid 1px;   
}

.frt, .frt1, .frt2{
text-align: center;
border-bottom: solid 1px;
font-size: 22px;
}

.frt1{
width: 50%;
border-right: solid 1px;
}

.frt2{
width: 25%;
border-right: solid 1px;
transform: rotate(270deg);
font-size: 22px;
}


#block2{
width:2.5%;
border-collapse: collapse;
display:block;
}

<table id="block1">

<tr>
<th id = "frst1">Ⅱ. Облік проведення занять та їх <br> відвідування</br> </th> 
<td id = "frst2"></td>         
</tr>    

<tr>
<td id = "frst3">Навчальна дисципліна, <br>викладач, заклад</br> </td>
<td id="frst4"></td>   
</tr> 
</table>
<table id= "block10">
<tr>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th>
<th class ="scnd2"></th> 
</tr>     
</table>

<table id = "block11" >
<tr class="frt"> <td> Тиждень №__________</td></tr>
<tr class="frt"> <td> Пропущ. занять (годин)</td></tr>       
</table>

<table id = "block12">
<tr>
<td class="frt1">за тиждень</td>   
<td class="frt1">від початку</td>
</tr>   
</table>

<table id = "block13">
<tr>
<td class="frt2">Усього</td>
<td class="frt2">З непов. причини</td>
<td class="frt2">Усього</td>
<td class="frt2">З непов. причини</td>
</tr>   
</table>


<table id = "block14">
<tr>
<td>Для нотаток</td>
</tr>   
</table>

<table id = "block2">
<tr><th>№ з/п</th></tr>
</table>

Answer 2

在#block2的css中，只需降低font-size的

#block2{
font-size: 10px;
width:2.5%;
border-collapse: collapse;
}

希望这能解决你的问题。