如何创建HTML不规则表格？现有代码运行效果不符求排查解决

核心问题 #

你的代码问题出在浏览器对跨行单元格的自动列分配逻辑和预期不符：HTML表格在渲染时，会按从左到右的顺序给每行的<td>分配列位置，遇到被rowspan占用的列才会向后顺延，你现有代码中部分行的单元格没有明确对应列位置，导致最终渲染的表格结构错位。
另外你代码中存在拼写错误：Batany应为植物学的正确拼写Botany，原代码设置的固定高度height="100px"也不合理，容易导致单元格内容被挤压变形。

修正后可正常渲染的完整代码 #

<html>
    <head>
        <title>Test 2</title>
    </head>
    <body>
        <table border="1" width="500px">
            <tr>
                <td>Zoology</td>
                <td rowspan="3">Welcome</td>
                <td>Maths</td>
            </tr>
            <tr>
                <td>Botany</td>
                <td rowspan="3">Physics</td>
            </tr>
            <tr>
                <td rowspan="2">Entomology</td>
            </tr>
            <tr>
                <td rowspan="2">Heading</td>
            </tr>
            <tr>
                <td>Toxicology</td>
                <td>Computer</td>
            </tr>
        </table>
    </body>
</html>

不规则表格编写注意事项 #

• 提前确定表格总列数，每一行的有效单元格数量（含跨行/跨列占用的位置）要和总列数匹配
• 复杂结构可以先画好格子标注每个单元格的跨行/跨列数值，再对应写代码，避免跨度计算错误

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