如何编写HTML代码实现指定布局的跨行跨列表格效果

• 原生table的border属性书写不规范：代码里的border="1px"不符合HTML标准，该属性仅支持无单位整数（代表边框像素宽度），带px后缀的写法在旧浏览器中会被识别为无效值，导致边框宽度错乱、整体网格偏移。
• 缺少tbody标签包裹行结构：未按表格语义结构编写代码时，浏览器自动解析的跨行单元格占位逻辑容易出现偏差，最终造成C单元格位置左移、H单元格跨列错位。
• 隐式占位的兼容性问题：依赖浏览器自动跳过被跨行单元格占用的列位来放置C、H的写法，在部分低版本浏览器中会出现渲染错位，无法匹配目标布局。

<table width="730" border="1" cellspacing="0" cellpadding="3">
  <tbody>
    <tr align="center">
      <td rowspan="3">A</td>
      <td rowspan="2">B</td>
      <td rowspan="3">D</td>
      <td>E</td>
      <td>F</td>
      <td>G</td>
    </tr>
    <tr align="center">
      <td rowspan="2" colspan="3">H</td>
    </tr>
    <tr align="center">
      <td>C</td>
    </tr>
  </tbody>
</table>

修正后各单元格的跨域、位置完全对齐预期：

• 第一行：A（纵向跨3行）、B（纵向跨2行）、D（纵向跨3行）、E、F、G
• 第二行：上方跨域的A/B/D占位后，剩余3列由H（纵向跨2行）合并占据
• 第三行：A、D跨3行占位，H跨2行占据最后3列，仅B下方的空位放C，无错位

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