Flex таблицы как делать

Question

Доброй ночи. Недавно начал изучать html и столкнулся с такой проблемой. Не могу понять как тут сделать.Пробовал таблицу

{
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

<table>
    <tr>
        <td></td>
        <td> 1</td>
        <td></td>            
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>            
    </tr>
</table>

Но получается что то не то . Со всеми остальными заданиями вопросов меньше.Может кто то помочь составить код для дальнейшего анализа ? или очень подробно разжевать?

Answer 1

А зачем тут таблица? Обычными блоками можно сделать:

.container{
  width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.blocks{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.block{
  width: 250px;
  margin-bottom: 60px;
}

<div class="container">
<h2>Цифры и факты</h2>
<div class="blocks">
  <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
  <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
   <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
   <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
   <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
   <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
   <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
   <div class="block">
    <div class="block_title">86 миллиардов</div>
    <div class="block_text">Число нейронов в мозге человека</div>
  </div>
</div>
</div>

Answer 2

Или так:

.block_table {
    display:flex;
    flex-direction:row;
}
.table {
    display:flex;
    flex-direction:column;
    border:#ссс 1px solid;
    padding:0;
    margin:0;
    width:100%;
    
}
.table_title {
    text-align:center;
    font-style:none;
    list-style:none;
    font-size:19px;
    background:#ffff00;
    width:100%;
    border:#000 1px solid;
    padding-top:10px;
    padding-bottom:10px;
}
.row {
    list-style:none;
    border:#ccc 1px solid;
    padding:10px;
    margin:0;
    text-align:center;
}
.row:hover {
    list-style:none;
    border:#ccc 1px solid;
    padding:10px;
    margin:0;
    background:#e9e9e9;
    cursor:pointer;
}

<div class="block_table">
            <ul class="table">
                <li class="table_title">Заголовок 1</li>
                <li class="row">1 столбец</li>
                <li class="row">2 столбец</li>
                <li class="row">3 столбец</li>
                <li class="row">4 столбец</li>
                <li class="row">5 столбец</li>
                <li class="row">6 столбец</li>
            </ul>
            <ul class="table">
                <li class="table_title">Заголовок 2</li>
                <li class="row">1 столбец</li>
                <li class="row">2 столбец</li>
                <li class="row">3 столбец</li>
                <li class="row">4 столбец</li>
                <li class="row">5 столбец</li>
                <li class="row">6 столбец</li>
            </ul>
            <ul class="table">
                <li class="table_title">Заголовок 3</li>
                <li class="row">1 столбец</li>
                <li class="row">2 столбец</li>
                <li class="row">3 столбец</li>
                <li class="row">4 столбец</li>
                <li class="row">5 столбец</li>
                <li class="row">6 столбец</li>
            </ul>
            <ul class="table">
                <li class="table_title">Заголовок 4</li>
                <li class="row">1 столбец</li>
                <li class="row">2 столбец</li>
                <li class="row">3 столбец</li>
                <li class="row">4 столбец</li>
                <li class="row">5 столбец</li>
                <li class="row">6 столбец</li>
            </ul>
            </div>

БЛОГ НА HUSL

Flex таблицы как делать

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