如何在HTML表格中使用多个rowspan实现指定单元格跨行合并布局

• 列数不匹配：表头<thead>明确定义了4列，但你在<tbody>的单个行标签里塞入了12个<td>，直接导致表格列结构错乱
• 缺少对应的行标签：rowspan属性的作用是让单个单元格跨越多行展示，前提是你要先定义出对应数量的<tr>行标签，把所有单元格都放在同一个<tr>里的话，rowspan完全无法发挥作用

<table border="1">
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>
    <tbody>
        <!-- 第1行 -->
        <tr>
            <td rowspan="5">Title 1 example</td>
            <td rowspan="3">Title 2 example 1</td>
            <td rowspan="2">Title 3 example 1</td>
            <td>Title 4 example 1</td>
        </tr>
        <!-- 第2行 -->
        <tr>
            <td>Title 4 example 2</td>
        </tr>
        <!-- 第3行 -->
        <tr>
            <td>Title 3 example 2</td>
            <td>Title 4 example 3</td>
        </tr>
        <!-- 第4行 -->
        <tr>
            <td rowspan="2">Title 2 example 2</td>
            <td>Title 3 example 3</td>
            <td>Title 4 example 4</td>
        </tr>
        <!-- 第5行 -->
        <tr>
            <td>Title 3 example 4</td>
            <td>Title 4 example 5</td>
        </tr>
    </tbody>
</table>

代码逻辑和你预期的合并规则完全对应：第一列跨全部5行，第二列分上下两块分别跨3行、2行，第三列按层级拆分合并规则，第四列每行独立展示。

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