如何使用colspan与rowspan构建指定结构的HTML表格？

第一步：先确定基准网格行列数 #

先对照目标效果图，把所有合并单元格全部拆分回最小的独立单元格，统计表格的总行数和总列数，这是后续不会出现错位的核心基准。你可以在草稿上把每个合并单元格的跨列数、跨行数提前标注清楚。

第二步：按规则编写单元格属性 #

• 横向合并单元格使用colspan属性：属性值等于该单元格要占的列数，当前行内后续要删掉对应数量的<td>标签，保证当前行所有单元格的colspan值相加等于总列数
• 纵向合并单元格使用rowspan属性：属性值等于该单元格要占的行数，后续对应行数的同一列位置要删掉对应的<td>标签
• 建议先写无合并的完整表格结构，再逐个给需要合并的单元格加属性、删掉冗余的<td>，出错概率会低很多

第三步：快速排错技巧 #

如果出现单元格错位的情况：

1. 给<table>加border="1"属性，通过边框直观看到每个单元格的占位情况
2. 逐行核对：每一行所有单元格的colspan值相加，必须等于第一步统计的总列数
3. 逐列核对纵向合并：每个rowspan属性对应的下方空行数，必须和rowspan的属性值一致

基础示例代码 #

以下是同时包含跨行、跨列的表格参考实现：

<table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse;">
  <!-- 基准为3行3列的网格 -->
  <tr>
    <td rowspan="2">纵向跨2行</td>
    <td colspan="2">横向跨2列</td>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
    <td>普通单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

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