![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：表格很简单, 但合并是个难点, 最好先在纸上画一画
Collection
Collection
表格是一个复合元素，由一组标签构成，常用标签如下
| 序号 | 标签 | 用途 |
|---|---|---|
| 1 | <table></table> |
用来包裹整个表格 |
| 2 | <caption></caption> |
表格标题 |
| 3 | <thead></thead> |
用来包裹表头 |
| 4 | <tr></tr> |
用来创建一行 |
| 5 | <th></th> |
用来创建表头中的单元格，居中加粗显示 |
| 6 | <tbody></tbody> |
用来包裹表格主体，可以有多个 |
| 7 | <td></td> |
用来创建普通单元格 |
需要合并下面几行相关单元格
<td rowspan="需要合并单元格的个数"></td>,并将下面几行对应的单元格删除。需要合并右边几列相关单元格
<td colspan="需要合并单元格的个数"></td>,并将本行中对应的单元格删除。代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="container"><tableclass="timetable"border="1"width="600"cellspacing="0"cellpadding="5"><caption style="font-size: 2rem">课程表</caption><thead><tr><th colspan="2"></th><!-- <th></th> --><th>星期1</th><th>星期2</th><th>星期3</th><th>星期4</th><th>星期5</th></tr></thead><tbody><tr><td rowspan="4">上午</td><td>1</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><!-- <td>上午</td> --><td>2</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><!-- <td>上午</td> --><td>3</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><!-- <td>上午</td> --><td>4</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><td colspan="7" align="center">午休</td></tr><tr><td rowspan="3">下午</td><td>1</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><!-- <td>下午</td> --><td>2</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><!-- <td>下午</td> --><td>3</td><td>班级活动</td><td colspan="4">各班级自行开展</td><!-- <td>课程</td><td>课程</td><td>课程</td> --></tr></tbody></table><p class="page" s><a href="">首页</a><a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">尾页</a></p></div></body></html>
效果如下