HTML5中的表格
rowspan:下一行已有位置被占用
跨行单元格覆盖了下一行的位置,后续行只补剩余的单元格。
<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></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;左侧“周二”已经由上一行覆盖。这里两条记录同属一个 tbody,日期表头使用 scope="rowgroup"。