表格元素
一、表格元素常用标签
表格是一个复合元素，由一组标签构成，常用标签如下
| 序号 | 标签 | 用途 |
|---|---|---|
| 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>
效果如下