第 3 课 12 / 16 | 编码:L03-16
代码推演

合并后为什么多出一列?

<table border="1">
  <caption>实验室安排</caption>
  <thead>
    <tr><th scope="col">日期</th><th scope="col">时段</th><th scope="col">任务</th></tr>
  </thead>
  <tbody>
    <tr><th scope="rowgroup" rowspan="2">周三</th><td>上午</td><td>HTML</td></tr>
    <tr><td>周三</td><td>下午</td><td>CSS</td></tr>
  </tbody>
</table>

提问:按网格位置画出三行的占位关系。第三行为什么多出一个单元格?只改一处修复,并说明 rowspan 已占据哪个位置。

查看参考解析

第三行的第一列已被上方 rowspan="2" 占据,再写“周三”会向右增加一格。删除第三行的 <td>周三</td>。border="1" 仅用于此处观察网格,正式样式交给 CSS;更复杂表头需进一步明确关联。