html - 如何将这 2 个单元合并为一个？

Question

我正在尝试将单元格 G 和 H 合并为一个，让我们看看下表的代码:

    <table border="1">
        <thead>
            <tr>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="5">A</td>
                <td colspan="3">B</td>
            </tr>
            <tr>
                <td colspan="2">C</td>
                <td rowspan="4">D</td>
            </tr>
            <tr>
                <td rowspan="3">E</td>
                <td>F</td>
            </tr>
            <tr>
                <td>G</td>
            </tr>
            <tr>
                <td>H</td>
            </tr>
        </tbody>
    </table>

我该怎么办？我尝试执行 G 但它不起作用。

我想要的是:

有没有办法只使用 HTML 来制作我想要的表格？

Answer 1

<table border="1">
        <thead>
            <tr>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
                <th>Header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="5" height="100">A</td>
                <td colspan="3" height="20">B</td>
            </tr>
            <tr>
                <td colspan="2" height="20">C</td>
                <td rowspan="4" colspan="1" height="80">D</td>
            </tr>
            <tr>
                <td rowspan="3" height="60">E</td>
                <td height="20">F</td>
            </tr>
            <tr>
              <td height="40">G</td>
          </tr>      
        </tbody>
    </table>

嗨，吉恩。我不认为你可以用纯 HTML 来做到这一点，因为你使用 5 行跨度并且只有 4 行。但是，您可以使用简单的 CSS 对其进行样式设置，例如我添加了代码片段