《网页设计与制作（活页式）》 课件 项目6 表格和表单.pptx

网页设计与制作项目六表格和表单N

知识目标掌握创建表格的标签掌握表格的CSS样式掌握创建表单的标签掌握表单的CSS样式

6.1.1表格标签任务6.1表格实例1创建表格

6.1.1表格标签任务6.1表格通过实例1的代码，可以看出创建表格的基本标签有以下4种。（1）table标签：用于定义一个表格。（2）tr标签：用于定义表格的一行，该标签必须包含在table标签中，表格的行数与tr标签数量对应。

6.1.1表格标签任务6.1表格（3）th标签：用于定义表头的单元格，该标签必须包含在tr标签中，表头行的单元格数量与th标签数量对应。该单元格中的文字自动设为粗体，居中对齐显示。（4）td标签：用于定义表格的普通单元格，该标签必须包含在tr标签中，一行的单元格数量与td标签数量对应。该单元格中的文字自动设为左对齐显示。

6.1.1表格标签任务6.1表格在实例1的代码中，table标签中用到了border属性，其作用是给表格添加边框，如果去掉该属性，则表格默认情况下无边框。默认情况下，表格的宽度和高度靠其自身的内容来支撑。如果要进一步设置表格的外观样式，可以通过设置表格的相关属性来实现。

6.1.2table标签的属性任务6.1表格table标签的常用属性

6.1.2table标签的属性任务6.1表格实例2使用table标签的属性

6.1.3tr标签的属性任务6.1表格tr标签的常用属性

6.1.3tr标签的属性任务6.1表格实例3使用tr标签

6.1.4th和td标签的属性任务6.1表格在表格制作过程中，有时需要对某一个单元格进行控制，就需要对单元格th和td标签设置相关属性。th和td标签的常用属性

6.1.4th和td标签的属性任务6.1表格实例4使用th和td标签

6.1.5使用CSS设置表格样式任务6.1表格实例5使用CSS设置表格样式

6.1.5使用CSS设置表格样式任务6.1表格实例5使用CSS设置表格样式

任务1.3〓网页制作工具任务6.2〓表格综合案例——制作教材征订表实例6制作教材征订表

任务1.3〓网页制作工具任务6.2〓表格综合案例——制作教材征订表实例6制作教材征订表

任务1.3〓网页制作工具任务6.3表单6.3.1认识表单表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理和响应，完成浏览者和网站服务器之间的交互。

任务1.3〓网页制作工具任务6.3表单6.3.2表单标签表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域输入信息。可以使用form标签在网页中创建表单。form标签是成对出现的，在开始标签form和结束标签/form之间的部分就是一个表单。表单的基本语法及格式如下：formname=表单名称action=URL地址method=提交方式…/form

任务1.3〓网页制作工具任务6.3表单6.3.2表单标签form标签的常用属性

任务1.3〓网页制作工具任务6.3表单6.3.3表单的控件标签1.input/标签input/标签用于定义文本框、单选按钮、复选框、提交按钮、重置按钮等，其基本语法格式如下：inputtype=“控件类型”/input/标签为单标签，type属性是基本的属性，其取值有多种，用于指定不同的控件类型。除type属性外，input/标签还可以定义很多其他的属性

任务1.3〓网页制作工具任务6.3表单6.3.3表单的控件标签input/标签的常用属性

任务1.3〓网页制作工具任务6.3表单6.3.3表单的控件标签2.textarea标签当定义input标签的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制，需要使用textarea标签，其基本语法格式如下：textareacols=每行中的字符数rows=显示的行数文本内容/textarea在上面的语法格式中，cols和rows为textarea标签的必需属性，其中cols用于定义多行文本输入框每行中的字符数，rows用于定义多行文本输入框显示的行数，它们的取值均为正整数。

任务1.3〓网页制作工具任务6.3表单6.3.3表单的控件标签3.select标签select标签提供下拉列表选项，供用户进行选择。下拉列表选项通过select标签和option标签来定义，其基本语法格式如下：selectoption选项1/optionoption选项2/optionoption选项3/option.../selectoption标签用于定义下拉菜单中的具体选项，每对select标签中至少应包含一对option标签。

任务1.