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

1,表格和表单,2,用 HTML 代码创建表格 创建表单 使用框架,目 标,3,表格,行,列,列标题,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,单元格,4, 使用表格 姓名 性别 分数 Robert M 80 . ,创建表格,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,5, 学员档案信息 姓名 性别 分数 Robert M 80 . ,表格的标题,表示表格标题 IEOnly,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,6, 学员档案信息 姓名 性别 分数 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,合并单元格(跨行), 创建表格 螺母 螺栓 锤子 第一季度 一月 2500 1000 1240 二月 3000 2500 4000 .,ROWSPAN=“n” 属性表示跨多少行,11,代码阅读, 我的表格 1 2 3 4 5 ,12,课堂练习:请编写HTML代码,13, 学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18 ,表格的背景色和尺寸设置,表格的尺寸： 表示一个长为200像素，宽为100像素的表格。 表示一个宽为窗口的20%，高为窗口的10%的表格。 表格的背景色 行的背景色 列的背景色 ,14,表格边框色彩的亮度控制,IEOnly 例子： FoodDrinkSweet ABC ,15,表格中的空单元格, row 1, cell 1 row 1, cell 2 row 2, cell 1 ,16,表格中的空单元格,为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。 row 1, cell 1 row 1, cell 2 row 2, cell 1 ,17,表格的边框, This table has no borders: 100 200 300 And this table has no borders: 100 200 300 ,18,Cellpadding属性,cellpadding属性在表格内容和边框之间留出更多空白 With cellpadding: First Row Second Row ,19,Cellspacing属性,cellspacing属性来增加单元格间距 With cellspacing: First Row Second Row ,20,应用Cellpadding和Cellspacing,下面是一个结合cellpadding、cellspacing和bgcolor的例子 第一行第一列 第一行第二列 第一行第三列 第二行第一列 第二行第二列 第二行第三列 ,21,表格的frame属性,IEOnly frame属性来控制表格周围的边框 Frame例子,22,表 单,表单是一个能够包含表单元素的区域。 表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。 表单是用元素内定义的。,23,METHOD =“post或get”,表单,ACTION,METHOD,指定提交后由服务器上哪个处理程序处理,指定向服务器提交的方法: 一般为post或get方法, post方法比较安全,ACTION = “URL”,24,表单输入元素-1,文本框、按钮、单选按钮、复选框等都是输入元素。 ,25,表单属性,26,BUTTON（按钮）,27,TEXT（文本框）,身份证号,在多数浏览器中，文本框的宽度默认是20个字符,密 码： ,请填写您的工作经历,28,单选按钮和复选框,性别：男性 女性,你喜欢以下哪些明星： 酒井法子 郑秀文 周杰伦,29,HTML输入元素-5, 2004 年欧锦赛 预测“最佳球员” Ronaldo Beckham Zidane 预测大赛亚军 巴西 法国 阿根廷 预测谁将成为 2004 年欧锦赛冠军？ ,30,下拉菜单,谁是 2002 年世界杯冠军？ 西班牙 法国 巴西 德国 ,列表选项,31,下拉菜单, 香蕉 苹果 桔子 桃子 ,32,下拉菜单, 注意，是用 Ctrl 键配合鼠标实现多选。 香蕉 苹果 桔子 桃子 ,33,隐藏表单的元素, 例子： Here is a hidden element. ,34,图片按钮,通常用以取代Submit及Reset两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便允许采用自已制作的按键。 例如： type =“Image“ 输入方式为 Image。 name =“submit“ 所要代表的按键，可以是 submit, reset, 或其它。 align =“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