如何使用 colspan 和 rowspans 构建此 table？

Question

我是 html 的新手。有人可以帮我怎么做这种 table 吗？我真的很难理解这个，因为它太复杂了。我尝试了几件事，但它使情况变得更糟。提前致谢。

enter image description here

这是我尝试过的，结果是这样的。

enter image description here

我无法 post 代码，因为它限制了我 post 太多代码

Answer 1

.table{
        width: 50%;
        border: 1px solid black;
        border-collapse:collapse;   
    }
    .table td {
        border: 1px solid black;
        padding: 2px;
            
    }

<table class="table">
  <tr>
    <td colspan="2"></td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td rowspan="5">text</td>
    <td rowspan="5">text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td colspan="4">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td colspan="3">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td colspan="3">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="5">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td colspan="2">text</td>
    <td colspan="3">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="7">text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

Answer 2

<table style="width:100%;">
    <tr style="width:100%;height:30px;">
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td rowspan = "5" style="border:solid black; width:5px;"></td>
        <td rowspan="5" style="border:solid black; width:15px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td colspan="4" style="border:solid black; width:20px;"></td>
        <td  style="border:solid black; width:20px;"></td>
        <td  style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td colspan="3" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td colspan="3" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="5" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
    <tr style="width:100%;height:30px;">
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td colspan="2" style="border:solid black; width:20px;"></td>
        <td colspan="3" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr style="width:100%;height:30px;">
    <tr style="width:100%;height:30px;">
        <td colspan="7" style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
        <td style="border:solid black; width:20px;"></td>
    </tr>
</table>

如何使用 colspan 和 rowspans 构建此 table？

How to build this table by using colspan and rowspans?

html

javascript

css

css-tables