《表格与表单》PPT课件.ppt

第六章 表格与表单,表格的创建表单相关标记,表格样式的控制表单样式的控制,6.1 表格标记,6.1.1 创建表格在HTML网页中，要想创建表格，就需要使用表格相关的标记。创建表格的基本语法格式如下：,单元格内的文字.,6.1 表格标记,6.1.1 创建表格在上面的语法中包含三对HTML标记，分别为、，他们是创建表格的基本标记，缺一不可，下面对他们进行具体地解释。：用于定义一个表格。：用于定义表格中的一行，必须嵌套在标记中，在中包含几对，就有几行表格。：用于定义表格中的单元格，必须嵌套在标记中，一对中包含几对，就表示该行中有多少列（或多少个单元格）。,6.1 表格标记,6.1.1 创建表格,注意:学习表格的核心是学习标记，他就像一个容器，可以容纳所有的元素，中甚至可以嵌套表格。但是中只能嵌套，直接在标记中输入文字的做法是不被允许的。,6.1 表格标记,6.1.2 标记的属性,标记的属性如下表所示。,6.1 表格标记,6.1.2 标记的属性,1、border属性在标记中，border属性用于设置表格的边框，默认为0。代码如下：2、cellspacing属性cellspacing属性用于设置单元格与单元格边框之间的空白间距，默认为2px。代码如下：,6.1 表格标记,6.1.2 标记的属性,3、cellpadding属性cellpadding属性用于设置单元格内容与单元格边框之间的空白间距，默认为1px。代码如下：,注意:cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子模型的内外边距理解cellpadding与cellspacing的不同。,6.1 表格标记,6.1.2 标记的属性,4、width与height属性默认情况下，表格的宽度和高度靠其自身的内容来支撑。要想更改表格的尺寸，就需对其应用宽度属性width或高度属性height。,注意:当为表格标记同时设置width、height和cellpadding属性时，cellpadding的显示效果将不太容易观察，所以一般在未给表格设置宽高的情况下测试cellpadding属性。,6.1 表格标记,6.1.2 标记的属性,5、align属性align属性用于定义元素的水平对齐方式，其可选属性值为left、center、right。值得一提的是，当对标记应用align属性时，控制的为表格的水平对齐方式，单元格中的内容不受影响。6、bgcolor属性在标记中，bgcolor属性用于设置表格的背景颜色。7、background属性在标记中，background属性用于设置表格的背景图像。,6.1 表格标记,6.1.3 标记的属性,制作网页时，有时需要表格中的某一行特殊显示，这时就可以为行标记定义属性。,6.1 表格标记,6.1.3 标记的属性,值得一提的是，学习的属性时需要注意以下几点：标记无宽度属性width，其宽度取决于表格标记。可以对标记应用valign属性，用于设置一行内容的垂直对齐方式。虽然可以对标记应用background属性，但是在标记中此属性兼容问题严重。,6.1 表格标记,6.1.4 标记的属性,在网页制作过程中，有时仅仅需要对某一个单元格进行控制，这时就可以为单元格标记定义属性，其常用属性如下表所示。,6.1 表格标记,6.1.4 标记的属性,注意:1、在标记的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。2、当对某一个标记应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。3、当对某一个标记应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。,6.1 表格标记,6.1.5 标记及其属性,表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记替代相应的单元格标记即可。,6.1 表格标记,6.1.6 表格的结构,在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：用于定义表格的头部，必须位于标记中，一般包含网页的logo和导航等头部信息。：用于定义表格的页脚，位于标记中标记之后，一般包含网页底部的企业信息等。：用于定义表格的主体，位于标记中标记之后，一般包含网页中除头部和底部之外的其他内容。,6.2 CSS控制表格样式,6.2.1 CSS控制表格边框,而使用CSS边框样式属性border可以轻松地控制表格的边框。,注意:1、border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。2、当表格的border-collapse属性设置为collapse时，HTML中设置的cellspacing属性值无效。3、行标记无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。,6.2 CSS控制表格样式,6.2.2 CSS控制单元格边距,使用标记的属性美化表格时，可以通过cellpadding和cellspacing分别控制单元格内容与边框之间的距离以及相邻单元格边框之间的距离。,注意:行标记无内边距属性padding和外边距属性margin，本书不再做具体的演示，初学者可以自己测试加深理解。,6.2 CSS控制表格样式,6.2.3 CSS控制单元格的宽高,单元格的宽度和高度，有着和其他元素不同的特性，主要表现在单元格之间的互相影响上。对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者。,6.3 认识表单,在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成，如下图所示，即为一个简单的HTML表单界面及其构成。,6.3 认识表单,对于表单构成中的表单控件、提示信息和表单域，初学者可能比较难理解，对他们的具体解释如下：表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。,6.3 认识表单,在表单的3部分构成中，表单控件是表单的核心，常用的表单控件如下表所示。,6.4 创建表单,在HTML中，标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：在上面的语法中，与之间的表单控件是由用户自定义的，action、method和name为表单标记的常用属性。Action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。,各种表单控件,6.4 创建表单,methodmethod属性用于设置表单数据的提交方式，其取值为get或post。namename属性用于指定表单的名称，以区分同一个页面中的多个表单。,注意:标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在与之间添加相应的表单控件。,6.5 表单控件,6.5.1 input控件,input控件的基本语法格式如下：在上面的语法中，标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标记还可以定义很多其他的属性，其常用属性如下表所示。,6.5 表单控件,6.5.1 input控件,6.5 表单控件,6.5.2 textarea控件,如果需要输入大量的信息，就需要用到标记。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：,文本内容,6.5 表单控件,6.5.2 textarea控件,在上面的语法格式中，cols和rows为标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，他们的取值均为正整数。,注意:各浏览器对cols和rows属性的理解不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，更常用的方法是使用CSS的width和height属性来定义多行文本输入框的宽高。,6.5 表单控件,6.5.3 select控件,下图为一个下拉菜单，当点击下拉符号“”时，会出现一个选择列表。在HTML中，要想制作如下图所示的下拉菜单，就需要使用select控件。,6.5 表单控件,6.5.3 select控件,使用select控件定义下拉菜单的基本语法格式如下：在上面的语法中，标记用于在表单中添加一个下拉菜单，用于定义下拉菜单中的具体选项，每对中至少应包含一对。,选项1 选项2 选项3.,6.5 表单控件,6.5.3 select控件,值得一提的是，在HTML中，可以为和标记定义属性，以改变下拉菜单的外观显示效果，具体如下表所示。,6.6 CSS控制表单样式,使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。在使用CSS控制表单样式时，初学者还需要注意以下几个问题。由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。,input控件默认有边框效果，当使用标记定义各种按钮时，通常需要清除其边框。通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框。,6.7 阶段案例,效果图如下,本章介绍了HTML中两个重要的元素表格与表单，主要包括表格相关标记、表单相关标记、以及如何使用CSS控制表格与表单的样式。在本章的最后，通过表格进行布局，然后使用CSS对表格和表单进行修饰，制作出了一个常见的注册界面。通过本章的学习，读者应该能够掌握创建表格与表单的基本语法，了解表格布局，熟悉常用的表单控件，熟练地运用表格与表单组织页面元素。,