如何构建第一列含合并单元格、第二列含2个单元格的HTML表格

你可以通过HTML表格的rowspan属性实现该效果，对应第二列拆分多行即可，完整实现代码如下：

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <!-- 第一列单元格设置跨行合并，rowspan数值对应要合并的行数 -->
    <td rowspan="2">分组1</td>
    <td>分组1-项1</td>
  </tr>
  <tr>
    <!-- 第一列位置被上面的单元格占用，无需重复写 -->
    <td>分组1-项2</td>
  </tr>
  <tr>
    <td rowspan="2">分组2</td>
    <td>分组2-项1</td>
  </tr>
  <tr>
    <td>分组2-项2</td>
  </tr>
</table>

代码说明 #

• rowspan属性用来指定单元格纵向跨越的行数，你如果需要第一列合并N行，就把属性值设为N，对应的后面N-1行的第一列位置不需要写单元格
• 代码里的border控制表格边框粗细，cellpadding控制单元格内边距，cellspacing控制单元格之间的间距，你可以根据自己的需求调整数值

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