Как переделать блочную верстку в табличную

Question

Сделал блочную верстку, но не знаю как перевести его в табличную, но чтобы все положения элементов сохранялись.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

.header {
  display: block;
  position: relative;
  width: 100%;
  height: 80px;
  background-color: black;
  color: white;
  margin-bottom: 50px;
}

.header .container {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 100%;
  align-items: center;
  color: white;
  padding-left: 30px;
  padding-right: 0;
}

.container {
  display: block;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 30px;
}

.logo_name h1 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-size: 8px;
  line-height: 17px;
}

.logo {
  width: 60%;
}

.romb {
  width: 350px;
  height: 250px;
}

.container .title {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 20px;
  color: #2F2D36;
  text-align: center;
  margin-bottom: 30px;
}

.container h3 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #2F2D36;
}

.container .gen {
  font-weight: 800;
}

.line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #D9D9D9;
  margin: 25px 0;
}

.container .footer_text {
  color: red;
}

@media (max-width:480px) {
  .logo_name h1 {
    display: none;
  }
  .logo {
    width: 150%;
    height: 30%;
  }
  .romb {
    width: 200px;
    height: auto;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  <title>Document</title>
</head>

<body>

  <div class="header">
    <div class="container">
      <a class="logo_name" href="https://andmaxlab.com/">
        <img class="logo" src="https://svgshare.com/i/ijG.svg" alt="">
        <h1>Applicated Network Detalization Models, AI-eXtended</h1>
      </a>
      <img src="https://imageup.ru/img138/3965559/romb.png" alt="" class="romb">
    </div>
  </div>

  <div class="container">
    <h3 class="title">На основании решения общего собрания</h3>
    <h3>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки систем массового участия. Разнообразный и богатый опыт рамки и место обучения кадров способствует подготовке
      и реализации направлений прогрессивного развития.
      <br><br> Что постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям. С другой стороны постоянное информационно-пропагандистское обеспечение
      нашей деятельности представляет собой интересный эксперимент проверки систем массового участия. Разнообразный и богатый опыт рамки и место обучения кадров способствует подготовке и реализации направлений прогрессивного развития. Информационно-пропагандистское
      обеспечение нашей деятельности играет
      <br><br> важную роль в формировании системы обучения кадров, соответствует насущным потребностям.
    </h3>
    <br>
    <h3 class="gen">Генеральный директор Семенов М.А.</h3>

    <div class="line"></div>

    <h3 class="footer_text">[email protected]
      <br> +7 495 822 04 02</h3>

  </div>

</body>

</html>

Answer 1

Табличная и блочная вёрстка это два разных подхода. Саму таблицу вам однозначно нужно будет делать с нуля и дописывать стили для ячеек таблицы. Вы можете использовать часть стилей, которые у вас применены к основным элементам.

БЛОГ НА HUSL

Как переделать блочную верстку в табличную

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