html/css段屏幕分为4个象限

我想做一个布局，其中网页被分割，如下图所示：

我一直在尝试使用一个table标签，但我需要使用整个屏幕（100%的宽度和高度），我更愿意使用更现代的标签，因为我最终将不得不在其中一个部分中使用canvas

像这样吗

HTML:

---

您可以使用css网格进行以下操作：

HTML:

<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>

.tl { position: absolute; top: 0; left: 0; right: 30%; bottom: 30%; 
      background: red; border:solid #000; border-width: 0 10px 10px 0; }
.tr { position: absolute; top: 0; left: 70%; right: 0; bottom: 30%; 
      background: blue; border:solid #000; border-width: 0 0 10px 0; }
.bl { position: absolute; top: 70%; left: 0; right: 30%; bottom: 0; 
      background: yellow; border:solid #000; border-width: 0 10px 0 0; }
.br { position: absolute; top: 70%; left: 70%; right: 0; bottom: 0; 
      background: green; } 

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.grid {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 70% 30%;
  grid-auto-rows: 70vh 30vh;
}

.item {
  border: 1px solid black;
}