table 태그로 아래 그림 만들기

<table>
  <tr>
    <th colspan="2"></th>
    <th rowspan="2"></th>
    <th rowspan="3"></th>
  </tr>
  <tr>
    <th colspan="2"></th>
  </tr>
  <tr>
    <th colspan="3"></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

th {
  border: 1px solid;
  width: 100px;
  height: 100px;
}

div로 아래 그림 맨들기

<div class="div-tag">
  <div>
    <div class="div-tag">
      <div>
        <div class="w2"></div>
        <div class="w2"></div>
      </div>
      <div class="w1 h2"></div>
    </div>
    <div class="w3"></div>
  </div>
  <div class="w1 h3"></div>
</div>
<div class="div-tag">
  <div class="w1"></div>
  <div class="w1"></div>
  <div class="w1"></div>
  <div class="w1"></div>
</div>

.div-tag {
  display: flex;
}
.w1 {
  border: 1px solid;
  width: 100px;
  height: 100px;
}
.w2 {
  border: 1px solid;
  width: 200px;
  height: 100px;
}
.w3 {
  border: 1px solid;
  width: 300px;
  height: 100px;
}
.h2 {
  border: 1px solid;
  width: 100px;
  height: 200px;
}
.h3 {
  border: 1px solid;
  width: 100px;
  height: 300px;
}