如何创建包含不同跨列单元格的HTML table表格

你想要实现的表格效果对应示意图：

问题原因 #

你当前的代码主要存在两个问题：

1. 没有明确3列的布局规则，前两行仅写了1个<td>，浏览器无法正确识别列数，导致colspan属性不生效
2. 缺少跨行属性rowspan，无法实现前两行首单元格合并的效果

正确实现代码 #

<table border="1" style="border-collapse: collapse; width: 300px;">
    <tbody>
        <tr>
            <!-- 首单元格跨2行 -->
            <td rowspan="2">a1</td>
            <td>b1</td>
            <td>c1</td>
        </tr>
        <tr>
            <!-- 首列已被上方跨行单元格占用，无需重复写 -->
            <td>b2</td>
            <td>c2</td>
        </tr>
        <tr>
            <!-- 首单元格跨2列 -->
            <td colspan="2">1</td>
            <td>a2</td>
        </tr>
    </tbody>
</table>

实现逻辑说明 #

• 首先确定表格总列数为3，每一行的单元格占列数总和必须等于3，浏览器才能正确渲染合并效果：
  • 第一行：1个跨行单元格（占1列）+ 2个普通单元格 = 3列
  • 第二行：跳过被跨行占用的首列 + 2个普通单元格，加跨行占的1列总为3列
  • 第三行：1个跨2列单元格 + 1个普通单元格 = 3列
• 代码中的border="1"和border-collapse: collapse是为了让边框更清晰，你可以根据实际需求调整样式。

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