Web前端技术 · 第 3 课预测 · 验证 · 解释
代码实验

跨行之后还剩几个位置

rowspan 跨到下一行时,下一行相应的位置已经被占用。空 td 也会占据位置,不会因为没有文字就被忽略。

先判断

先不运行:这段节目表第二条数据行中的“下午”和“唱腔体验”分别落在第几列?

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>黄梅戏体验安排</title>
  <style>
    th, td { border: 1px solid; padding: 8px; }
  </style>
</head>
<body>
  <table>
    <tr><th>日期</th><th>时段</th><th>内容</th></tr>
    <tr>
      <td rowspan="2">周三</td><td>上午</td><td>服饰体验</td>
    </tr>
    <tr>
      <td></td><td>下午</td><td>唱腔体验</td>
    </tr>
  </table>
</body>
</html>

再改一个条件

展开答案与分析

C。第二条数据行的第一列被上行 rowspan="2" 的“周三”占据。空 td 从第二列开始放置,所以后面的“下午”“唱腔体验”被推到第三、第四列。每行写几个单元格,取决于已有跨行占位,不是固定等于表头数量。

观察位置:沿着“时段”“内容”的表头向下看,检查数据是否对齐。