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

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

课程

名称

《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.合并表格边框和单元格边框

表格的最外层会有一个边框，表格的每个单元格也会有单独的边框。因此，表格看起来会有两层边框。如果希望将边框重复的部分进行合并，就可以使用CSS的border-collapse属性实现，其语法形式如下所示。

border-collapse:属性值;

5.1.4CSS控制表格内容

表格由单元格及单元格中的文本内容组成。通过CSS样式可以对单元格的样式及单元格中的文本样式进行设置。

1.设置单元格的宽度

表格由多个单元格组成。使用CSS的table-layout属性可以实现对单元格宽度的设置。其语法形式如下所示。

table-layout:属性值;

2.设置单元格文本样式

单元格中的内容由于属于文本内容，所以可以通过CSS中控制文本的属性对其样式进行设置。如设置文本的对齐样式、文本的颜色、单元格背景等。

5.2表单

表单可以用接收客户端用户输入的信息，然后将信息提交给网站的后台程序，由后台程序对数据进行处理。例如，网站的用户登录框就是一个典型的表单。用户登录网站时，需要在登录框中填入账户和密码，当提交表单后，网站后台程序会将提交的信息与数据库中存放的信息比对，如果账户和密码正确，用户就可以登录网站，否则会提示有错误。

5.2.1创建表单

创建表单需要使用HTML中的form标签，其语法形式如下所示。

form

表单元素

/form

5.2.2input元素

input元素是表单中最重要的元素。根据其type属性的值可以设置不同类型的输入框，包括文本输入框、复选框等，其语法形式如下所示。

inputtype=输入框类型name=值value=值accept=值readonly=值

size=值maxlength=值disabled=值src=值/

5.2.3select元素

select元素用于创建单选或多选菜单，该元素需要配合option元素使用，其语法形式如下所示。

select

option选项1/option

option选项2/option

……

option选项n/option

/select

5.2.4textarea元素

textarea元素用于定义多行的文本输入控件，文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体，其语法形式如下所示。

textarea文本内容/textarea

5.2.5button元素

button元素可以实现一个按钮样式。button元素的内容包括可以接受的任何类型正文内