如何用单个HTML table与CSS实现蒙德里安红蓝黄构图画作

请问有人可以帮我在浏览器中使用HTML <table> 标签和CSS复现目标画作吗？

参考画作 #

我已经尝试完成该任务，但老师对我的实现结果不满意，他指出所有元素必须仅通过1个table元素构建，但我不清楚如何正确使用colspan和rowspan属性。
以下是我编写的表格相关代码，我仅被允许使用table、colspan、rowspan以及CSS完成该任务，不得使用其他技术。

现有CSS代码 #

* {
  box-sizing: border-box;
  background-color: floralwhite;
}

body {
  margin-top: 160px;
  width: 100%;
  background-color: floralwhite;
}

table {
  margin: 0 auto;
  empty-cells: show;
  border: 0px solid magenta;
  width: 404px;
  height: 404px;
  border-collapse: collapse;
}

tr {
  border: 4px solid black;
}

td {
  border: 4px solid black;
}

.remove-border-left {
  border-left-color: transparent;
}

.remove-border-top {
  border-top-color: transparent;
}

.remove-border-right {
  border-right-color: transparent;
}

.remove-border-bottom {
  border-bottom-color: transparent;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.black {
  background-color: black;
}

.blue {
  background-color: blue;
}

.sm {
  height: 40px;
}

现有HTML代码 #

<table id="table2">
  <tr>
    <td class="remove-border-top remove-border-left" colspan="3">&nbsp</td>
    <td class="remove-border-top" colspan="2">&nbsp</td>
    <td class="remove-border-top yellow" colspan="3">&nbsp</td>
    <td class="remove-border-top remove-border-right">&nbsp</td>
  </tr>
  <tr class="remove-border-right remove-border-bottom">
    <td class="remove-border-left">&nbsp</td>
    <td class="remove-border-bottom red" colspan="4">&nbsp</td>
    <td class="yellow" colspan="3">&nbsp</td>
  </tr>
  <tr class="remove-border-right remove-border-bottom">
    <td class="remove-border-left" rowspan="2">&nbsp</td>
    <td class="red" colspan="4">&nbsp</td>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr class="remove-border-right sm">
    <td class="remove-border-right black">&nbsp</td>
    <td class="black">&nbsp</td>
    <td class="remove-border-right">&nbsp</td>
    <td>&nbsp</td>
    <td class="remove-border-right">&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr class="remove-border-bottom remove-border-right sm">
    <td class="remove-border-left remove-border-bottom yellow">&nbsp</td>
    <td class="remove-border-bottom black">&nbsp</td>
    <td class="remove-border-bottom black">&nbsp</td>
    <td class="remove-border-bottom remove-border-right">&nbsp</td>
    <td class="remove-border-bottom">&nbsp</td>
    <td class="remove-border-bottom blue" colspan="3">&nbsp</td>
    <td class="remove-border-bottom remove-border-right red">&nbsp</td>
  </tr>
  <tr class="remove-border-bottom remove-border-right sm">
    <td class="remove-border-left remove-border-bottom yellow">&nbsp</td>
    <td class="remove-border-bottom remove-border-right">&nbsp</td>
    <td class="remove-border-bottom">&nbsp</td>
    <td class="remove-border-bottom remove-border-right black">&nbsp</td>
    <td class="remove-border-bottom black">&nbsp</td>
    <td class="remove-border-bottom blue" colspan="3">&nbsp</td>
    <td class="remove-border-bottom remove-border-right red">&nbsp</td>
  </tr>
</table>

内容的提问来源于stack exchange，提问作者JackHoxton