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

《《表格和表单》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《表格和表单》PPT课件.ppt（43页珍藏版）》请在三一办公上搜索。

1、1,表格和表单,2,用 HTML 代码创建表格创建表单 使用框架,目 标,3,表格,行,列,列标题,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,4,使用表格 姓名 性别 分数 Robert M 80.,创建表格,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,5,学员档案信息 姓名 性别 分数 Robert M 80.,表格的标题,表示表格标题 IEOnly,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,6,学员档案信息 姓名 性别 分数

2、 Robert M 80.,表格在页面中的对齐/布局,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,7,表格内文字的对齐/布局,#=left,center,right例子：FoodDrinkSweet A B C,8,表格内文字的对齐/布局,#=top,middle,bottom,baseline FoodDrink SweetOther A B C D,9,合并单元格(跨列),创建表格 第一学期第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88.,COLSPAN=“n”属性表示跨多少列,10,合并单元格(跨行),创建表格 螺母 螺栓 锤子 第一季度一

3、月250010001240 二月300025004000.,ROWSPAN=“n”属性表示跨多少行,11,代码阅读,我的表格 1 2 3 4 5,12,课堂练习:请编写HTML代码,13,学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18,表格的背景色和尺寸设置,表格的尺寸：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。表格的背景色 行的背景色 列的背景色,14,表格边框色彩的亮度控制,IEOnly 例子：FoodDrinkSweetABC,15,表格中的空单元格,row 1,cell 1row 1,cell 2row

4、2,cell 1,16,表格中的空单元格,为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。row 1,cell 1row 1,cell 2row 2,cell 1,17,表格的边框,This table has no borders:100200300And this table has no borders:100200300,18,Cellpadding属性,cellpadding属性在表格内容和边框之间留出更多空白With cellpadding:FirstRowSecondRow,19,Cellspacing属性,cellspacing属性来增加单元格间距Wit

5、h cellspacing:FirstRowSecondRow,20,应用Cellpadding和Cellspacing,下面是一个结合cellpadding、cellspacing和bgcolor的例子 第一行第一列 第一行第二列 第一行第三列 第二行第一列 第二行第二列 第二行第三列,21,表格的frame属性,IEOnlyframe属性来控制表格周围的边框Frame例子,22,表 单,表单是一个能够包含表单元素的区域。表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。表单是用元素内定义的。,23,METHOD=“post或get”,表单,AC

6、TION,METHOD,指定提交后由服务器上哪个处理程序处理,指定向服务器提交的方法:一般为post或get方法,post方法比较安全,ACTION=“URL”,24,表单输入元素-1,文本框、按钮、单选按钮、复选框等都是输入元素。,25,表单属性,26,BUTTON（按钮）,27,TEXT（文本框）,身份证号,在多数浏览器中，文本框的宽度默认是20个字符,密 码：,请填写您的工作经历,28,单选按钮和复选框,性别：男性女性,你喜欢以下哪些明星：酒井法子 郑秀文 周杰伦,29,HTML输入元素-5,2004 年欧锦赛预测“最佳球员”RonaldoBeckhamZidane预测大赛亚军巴西法国阿

7、根廷预测谁将成为 2004 年欧锦赛冠军？,30,下拉菜单,谁是 2002 年世界杯冠军？西班牙法国巴西德国,列表选项,31,下拉菜单,香蕉 苹果 桔子 桃子,32,下拉菜单,注意，是用 Ctrl 键配合鼠标实现多选。香蕉 苹果 桔子 桃子,33,隐藏表单的元素,例子：Here is a hidden element.,34,图片按钮,通常用以取代Submit及Reset两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便允许采用自已制作的按键。例如：type=Image 输入方式为 Image。name=submit 所要代表的按键，可以是 submit,reset,或其它。ali

8、gn=BOTTOM 可选值：top,middle,bottom,left,right,texttop,baseline,absmiddle。src=new017.gif 按键图片来源，若此图片文件不与该 html 文件在同一目录下，请加上相对或绝对路径。,35,练 习,36,例子,This form sends an e-mail to W3Schools.Name:Mail:Comment:yourcomment,37,框架,广告栏顶部框架(top.htm),商品详细介绍右侧框架(main.htm),商品导航左侧框架(left.htm),38,为何使用框架,在另一个固定部分显示导航部分,在页面的一个固定部分显示徽标或静态信息,在此处显示主要内容。站点中只有此部分是变化的。,39,框架,.不允许各窗口改变大小 缺省设置是允许各窗口改变大小的。纵向排列多个窗口：横向排列多个窗口：,40,框架,纵横排列多个窗口：,41,框架,各窗口间相互操作(Frame Target)窗口标识(Frame Name)新窗口 本窗口 父窗口 整个浏览器窗口,42,浮动窗口(Floating Frame),IEOnly Here is a Floating FrameLoad ALoad BLoad C,43,使用框架和表格修改个人主页,