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

诊断:合并后为什么多出一列?

先找出冲突位置,再提出只修改一处的修复方法。

<table>
  <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>表格基础</td></tr>
    <tr><td>周二</td><td>下午</td><td>案例讨论</td></tr>
  </tbody>
</table>
<!-- 下方样式只用于显示网格,CSS将在后续课程学习。 -->
<style>
  table { border-collapse: collapse; font: 20px/1.5 sans-serif; }
  th, td { border: 1px solid #899bb3; padding: 8px 12px; }
  th { background: #edf4ff; }
</style>
展开参考分析

删除第二条数据行中重复的 <td>周二</td>。第一列已经被 rowspan="2" 占用;不要仅靠改变颜色或宽度掩盖结构问题。