Проблема с расположением таблиц HTML/CSS

Question

Всем привет, я совсем профан в CSS и HTML, но задания есть и их нужно делать. Пока что делаю так что бы было, а дальше буду разбираться как сделать лучше. Вот во время выполнения таблиц стыкался с кучей проблем, но они решались, а над этой уже застрял на долго. Так вот, выделенный элемент (таблица) на фото мне нужно что бы находился на начале страницы слева (под уже первой сделанной), а он в никакую не хочет туда двигаться, если можете, то объясните как его передвинуть правильно, или же как лучше переделать полностью это задание?

Код предоставляю ниже (P.S. я знаю что он ужасен, но лучше я пока сделать не в состоянии)

#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;
}

<body>

  <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>

</body>

</html>

БЛОГ НА HUSL

Проблема с расположением таблиц HTML/CSS

Ответы (0 шт):