HTML/CSS table layout issue-CodePudding

I'm completely layman in CSS and HTML, but there are tasks and they need to be done. For now, I'm doing what it would be, and then I'll figure out how to do it better. Here, during the execution of the tables, I ran into a bunch of problems, but they were solved, but I was already stuck on this one for a long time. So, I need the selected element (table) in the photo to be at the beginning of the page on the left (under the first one already made), but he doesn’t want to move there, if you can, then explain how to move it correctly, or how best to redo is this task complete?

enter image description here

I provide the code below (P.S. I know that it is terrible, but I am not able to do better yet)

#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> відвідування</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 > <td> Тиждень №__________</td></tr>
    <tr > <td> Пропущ. занять (годин)</td></tr>       
</table>
 
<table id = "block12">
    <tr>
        <td >за тиждень</td>   
        <td >від початку</td>
   </tr>   
</table>
 
<table id = "block13">
    <tr>
        <td >Усього</td>
        <td >З непов. причини</td>
        <td >Усього</td>
        <td >З непов. причини</td>
   </tr>   
</table>
 
 
<table id = "block14">
    <tr>
        <td>Для нотаток</td>
   </tr>   
</table>
 
<table id = "block2">
    <tr><th>№ з/п</th></tr>
</table>

CodePudding user response：

just add display:block to table 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 > <td> Тиждень №__________</td></tr>
    <tr > <td> Пропущ. занять (годин)</td></tr>       
</table>
 
<table id = "block12">
    <tr>
        <td >за тиждень</td>   
        <td >від початку</td>
   </tr>   
</table>
 
<table id = "block13">
    <tr>
        <td >Усього</td>
        <td >З непов. причини</td>
        <td >Усього</td>
        <td >З непов. причини</td>
   </tr>   
</table>
 
 
<table id = "block14">
    <tr>
        <td>Для нотаток</td>
   </tr>   
</table>
 
<table id = "block2">
    <tr><th>№ з/п</th></tr>
</table>

CodePudding user response：

In css of #block2, just decrease the font-size

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

Hope this will solve your problem.