Web前端开发实例与实战第5 章 表格和表单.pdfVIP

编写日期：授课日期：任课教师：

课程《Web前端开发实例与授课授课

名称实战》专业班级

授课授课

周次节次第5章3学时

章表格和表单学时

1.了解表格。

知识2.了解表单。

3.了解datalist元素。

教学

1.能够创建基础表格。

目标

能力2.能够合并表格边框和单元格边框。

3.能够使用CSS修饰表单元素。

素质激发学生的学习兴趣和参与度，培养责任感。

教学

使用CSS的属性对表格的外观进行修饰

重点

教学

使用optgroup标签为选项分组

难点

教学

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

方法

教学多媒体、课件

用具

第5章表格和表单

5.1表格

表格多用于数据的罗列和展示，通过表格可以让数据看起来更加直观。表格的使用也

十分广泛，如价目表、出勤表、员工信息表等。在HTML中提供专门的标签用于制作表格，

教学在CSS中也提供了专有的属性控制表格的样式。

内容5.1.1创建基础表格

在HTML中表格包括表头、行及列等信息。表格的结构性标签为table标签，在

table标签中还需要使用tr标签、td标签等对表格的列及行的实现。

5.1.2表格的其他标签

除了基础的表格标签，HTML还提供了一些其他标签实现为表格添加表头、拆分表格、

为表格的列分组等功能。

1.表格标题

使用caption标签可以给表格添加标题，该标签需要放置中table元素中，其语法

形式如下所示。

table

caption表格的名字/caption

…

/table

2.拆分表格

拆分表格是指使用thead、tfoot和tbody标签将表格拆分为头部、页脚和主体

三部分。这3个标签的作用如下所示。

（1）thead标签用于定义表格的头部，在该标签内必须包含tr标签。

（2）tfoot标签用于定义表格的页脚，一般用于统计数据。例如，一个表格中的总

人数、总工资数。

（3）tbody标签用于定义表格的主体部分。

5.1.3CSS修饰表格

1.修饰表格的边框

修饰表格的边框主要使用到CSS的border属性，其语法形式如下所示。

border:border-widthborder-styleborder-color;

2.合并表格边框和单元格边框

表格的最外层会有一个边框，表格的每个单元格也会有单独的边框。因此，表格看起

来会有两层边框。如果希望将边框重复的部分进行合并，就可以使