HTML表格中colspan与rowspan属性作用是否与命名含义相反？

这其实是个典型的认知误区：两个属性的实际效果和命名完全一致，根本没有相反，你觉得对不上，本质是对「跨列/跨行」的延伸方向理解错了。

两个属性的命名逻辑非常直白：

• 后缀span就是「横跨、占用」的意思
• 前缀col（列）、row（行）指的是单元格要占用的格子所属的维度，不是单元格延伸的方向

很多人在这里会犯常识性错误：默认觉得“跨列”是往垂直方向延伸、“跨行”是往水平方向延伸，实际上完全搞反了表格的排布逻辑：

• 列是沿垂直方向从上到下排布的，要横跨多个列，自然是沿水平方向左右延伸，最终效果是单元格横向拉宽，占据同一行里的多个列位置——这就是colspan（全称column span，即跨列）的实际作用，根本不是所谓的“跨行效果”
• 行是沿水平方向从左到右排布的，要横跨多个行，自然是沿垂直方向上下延伸，最终效果是单元格纵向拉高，占据同一列里的多个行位置——这就是rowspan（全称row span，即跨行）的实际作用，也根本不是所谓的“跨列效果”

你可以写两段最简单的代码直接验证效果：

<!-- colspan 效果验证 -->
<table border="1" cellpadding="8">
  <tr>
    <td colspan="2">设置了colspan=2的单元格</td>
  </tr>
  <tr>
    <td>普通单元格1</td>
    <td>普通单元格2</td>
  </tr>
</table>

运行后就能看到，设置了colspan="2"的单元格只会在第一行内占满两个列的宽度，完全不会延伸到第二行，和“跨列”的字面意思完全匹配。

再验证rowspan的效果：

<!-- rowspan 效果验证 -->
<table border="1" cellpadding="8">
  <tr>
    <td rowspan="2">设置了rowspan=2的单元格</td>
    <td>普通单元格1</td>
  </tr>
  <tr>
    <td>普通单元格2</td>
  </tr>
</table>

运行后会看到，设置了rowspan="2"的单元格只会在第一列内占满两个行的高度，完全不会延伸到第二列，和“跨行”的字面意思完全一致。

所谓“效果和命名相反”的错觉，本质是新手刚接触表格时，对行、列的排布方向产生了直觉偏差，和属性本身的设计没有任何关系。

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