如何创建并排HTML表网格？

Question

我想创建一个包含诸如此类的东西的表：

我现在所拥有的：

<table class="table">
  <td>
    <tr>
      <div style="width: 100px;height:100px; background-color: blue;"></div>
    </tr>
    <tr>
      <div style="width: 100px;height:100px; background-color: red;"></div>
    </tr>
  </td>
  <td>
    <div style="width: 100px;height:200px; background-color: yellow;"></div>
  </td>
</table>

Answer 1

使用rowspan，并且td不能是table的直接子代。

table {
  border-collapse: collapse;
}
td {
  width: 100px;
  text-align: center;
  vertical-align: middle;
}
.blue {
  background-color: royalblue;
  height: 100px;
}
.yellow {
  background-color: yellow;
  height: 200px;
}
.red {
  background-color: red;
  height: 100px;
}

<table>
  <tr>
    <td class="blue">1</td>
    <td class="yellow" rowspan="2">3</td>
  </tr>
  <tr>
    <td class="red">2</td>
  </tr>
</table>

Answer 2

您的代码必须像这样：使用rowpan进行第二次交易

<table cellpadding="0" cellspacing="0">
    <tr>
        <td  style="width: 100px;height:100px; background-color: blue;"></td> 
        <td rowspan="2"  style="width: 100px;height:200px; background-color: yellow;"></td>
    </tr>
    <tr>
        <td  style="width: 100px;height:100px; background-color: red;"></td>
    </tr>
</table>
</tr>
</table>

Answer 3

首先，您的表语法已关闭。看起来应该像这样。

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

接下来，您想要的是第一行有两列，第二列占用两行的空间。下一行将有一列。这可以使用rowspan来完成。 这是您的重构代码。

<table class="table">
  <tr>
    <td rowspan="1">
      <div style="width: 100px;height:100px; background-color: blue;"></div>
    </td>
    <td rowspan="2">
      <div style="width: 100px;height:200px; background-color: yellow;"></div>
    </td>
  </tr>
  <tr>
    <td rowspan="1">
      <div style="width: 100px;height:100px; background-color: red;"></div>
    </td>
  </tr>
</table>