无CSS环境下HTML表格colspan与rowspan未正常生效问题

你的问题出在表格的列数一致性和布局稳定性上——虽然你正确设置了rowspan和colspan，但浏览器在没有明确列结构定义的情况下，可能会自动调整表格布局，导致合并效果失效。下面是完全不需要CSS的纯HTML解决方案：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Table HTML</title>
</head>
<body>
    <table border="1" cellpadding="10">
        <!-- 用<col>元素定义4列的固定宽度，强制表格保持稳定结构 -->
        <col width="100">
        <col width="100">
        <col width="100">
        <col width="100">
        <tr>
            <th rowspan="2" colspan="2">A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <!-- 前两列被A的rowspan="2"占据，只需填充后两列的单元格 -->
            <td>D</td>
            <td>E</td>
        </tr>
        <tr>
            <td colspan="2">F</td>
            <td colspan="2">G</td>
        </tr>
    </table>
</body>
</html>

关键调整说明： #

• 用<col>固定列结构：<col>是纯HTML原生元素，不需要CSS就能定义列宽，这能强制浏览器维持表格的列数稳定性，避免合并单元格时布局错乱。
• 用HTML属性替代CSS样式：通过border="1"给表格添加边框，cellpadding="10"设置单元格内边距，完全符合你不能使用CSS的要求。
• 保证行内列数匹配：第一行合并后总列数为4，第二行因A跨两行只需填充后2列，第三行两个单元格各跨2列总列数也为4，这样每一行的合并后列数都和表格总列数一致，浏览器就能正确渲染合并效果。

这样调整后，A单元格会正常跨2行2列，F和G也能正确占据各自的两列空间，完全满足你的需求。

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