HTML表格能否使用非整数colspan？无div实现跨1.5列布局

核心结论 #

HTML的colspan属性仅支持正整数值，不允许使用浮点型（如1.5），这是HTML规范明确规定的。

无div实现布局的方法 #

要实现第一行2列、第二行3列，且第一行每列视觉上对应第二行1.5列的布局，可通过拆分表格的最小列单元来满足需求：

• 利用2和3的最小公倍数6作为表格的基础列数，将"1.5列"转化为整数跨度：第一行每列占3个基础单元，第二行每列占2个基础单元（3/2=1.5，正好匹配需求）。
• 为第一行单元格设置colspan="3"，第二行单元格设置colspan="2"，保证总列数一致。

代码示例 #

<!-- 带列宽控制的版本 -->
<table border="1" width="100%">
  <colgroup>
    <col width="16.666%">
    <col width="16.666%">
    <col width="16.666%">
    <col width="16.666%">
    <col width="16.666%">
    <col width="16.666%">
  </colgroup>
  <tr>
    <td colspan="3">第一行第1列（对应第二行1.5列）</td>
    <td colspan="3">第一行第2列（对应第二行1.5列）</td>
  </tr>
  <tr>
    <td colspan="2">第二行第1列</td>
    <td colspan="2">第二行第2列</td>
    <td colspan="2">第二行第3列</td>
  </tr>
</table>

也可以省略<colgroup>，让表格自动分配宽度：

<table border="1" width="100%">
  <tr>
    <td colspan="3">第一行第1列</td>
    <td colspan="3">第一行第2列</td>
  </tr>
  <tr>
    <td colspan="2">第二行第1列</td>
    <td colspan="2">第二行第2列</td>
    <td colspan="2">第二行第3列</td>
  </tr>
</table>

这样的实现完全基于表格元素，未使用div，且符合HTML规范，能达到你需要的视觉效果。

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