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

colspan:让一个单元格跨越多列

colspan="2" 表示总共占两列,不是“原有一列再增加两列”。

<table>
  <caption>教学地点(示意)</caption>
  <thead>
    <tr><th scope="col">时间</th><th scope="col">A组</th><th scope="col">B组</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">上午</th><td colspan="2">共同参加导论课</td></tr>
    <tr><th scope="row">下午</th><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>

第一条数据行有2个单元格元素,但占据3个列位置:1 + 2 = 3。