Web前端技术 · 第3课 11 / 25 | 编码:L03-10b
HTML5中的表格

先画网格,再判断合并是否正确

不只数标签数量,还要数每个单元格占了几个位置。

三列表格:日期、时段、内容
日期 时段 内容
周二 上午 表格基础
下午 案例讨论

沿用上一页的 rowspan="2":“周二”这个单元格延伸到了下一行,因此两条数据行的第一列都由它占据。

第二行还缺什么?

日期已经有了,只缺“时段”和“内容”。所以第二个 tr 中依次写“下午”和“案例讨论”两个 td 即可。

思考:有同学认为“三列表格,每行都必须写三个单元格”,因此在第二行的“下午”前补上一个空的 <td></td>。这样能保持原来的三列结构吗?请说明这个空单元格会落在哪一列,“下午”和“案例讨论”又会移到哪里。

展开参考分析

结论:不能保持原来的三列结构,会多出第四列。

先看已有位置,再放本行单元格

  1. 第一列已由上一行的“周二”通过 rowspan="2" 占据,第二行不需要再写日期单元格。
  2. 新加的 <td></td> 虽然没有文字,仍要占一个位置,因此落在第二列,而不是覆盖第一列。
  3. 后面的单元格继续向右排列:“下午”落在第三列,“案例讨论”被推到新增的第四列。

正确写法:第二个 tr 中只写“下午”和“案例讨论”两个 td,它们分别对应第二列和第三列。

记住:空内容不等于不占位置;表格有三列,不等于每个 tr 都必须写三个单元格。