我无法弄清楚这个表的表标记

Question

我曾尝试使用rowspan和colspan在过去2小时内布置此表，但我想不出来，我想看看是否有人可以解决这个难题。

Answer 1

让我们检查一下这个解决方案：

HTML：

<table>
  <tr>
    <td rowspan=3>1.1</td>
    <td>1.2</td>
    <td rowspan=2>1.3</td>
    <td rowspan=4>1.4</td>
  </tr>
  <tr>
    <td rowspan=3>2.1</td>
    <!--<td>2.2</td>-->
    <!--<td>2.3</td>-->
    <!--<td>2.4</td>-->
  </tr>
  <tr>
    <!--<td>3.1</td>-->
    <!--<td>3.2</td>-->
    <td rowspan=2>3.3</td>
    <!--<td>3.4</td>-->
  </tr>
  <tr>
    <td >4.1</td>
    <!--<td>4.2</td>-->
    <!--<td>4.3</td>-->
    <!--<td>4.4</td>-->
  </tr>
</table>

CSS：

td {
  border: 1px solid black;
}

tr {
  height: 20px;//It only work for fixed height. Haven't found better solution yet
}

Answer 2

这是一支你可以看到工作解决方案的笔： Codepen

我添加了一些颜色以使其可见。 为了帮助您构建表，我就是这样做的：

• 首先，你有4行。
• 在第一个中，你将有4个单元格，因为它们都从顶部开始。
• 一个单元格从第二行开始，因此，您在第二行中添加一个单元格。
• 一个单元格从第三行开始，因此您在第三行添加一个单元格。
• 一个单元格从最后一行开始，因此您在最后一行添加一个单元格。
• 然后，您只需要相应地添加rowspan=""方案。

    table {
  width:100%;
  height: 400px;
}
tr:nth-child(1) td:nth-child(1){
  background: #cceeee;
}
tr:nth-child(1) td:nth-child(2){
  background: #eeccee;
}
tr:nth-child(2) td:nth-child(1){
  background: #eecccc;
}
tr:nth-child(1) td:nth-child(3){
  background: #ccccee;
}
tr:nth-child(3) td:nth-child(1){
  background: #eeccee;
}
tr:nth-child(4) td:nth-child(1){
  background: #eeccee;
}
tr:nth-child(1) td:nth-child(4){
  background: #cceecc;
}
tr{
  height:25%;
}

<table>
  <tbody>
    <tr>
      <td rowspan="3">
      </td>
      <td>
      </td>
      <td rowspan="2">
      </td>
      <td rowspan="4">
      </td>
    </tr>
    <tr>
      <td rowspan="3">
      </td>
    </tr>
    <tr>
      <td rowspan="2">
      </td>
    </tr>
    <tr>
      <td>
      </td>
    </tr>
  </tbody>
</table>