第3章-表格、表单和框架.pptx

第三章表格、表单控件、框架

课程回顾上次课我们主要讲了：文字的排版图片的应用技巧超链接的应用技巧2

本章节授课目标数据表格的使用规范掌握表单及表单控件的使用表单控件的事件驱动框架在网页中的应用3

第一节表格

数据表格table标签被用来定义HTML表格一个标准的数据表格应该包括表头组、表身组和表尾组。5注：如果要使用thead、tfoot以及tbody元素，就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了

数据表格标准的数据表格结构如下图所示：6表格table 表头组thead/thead 表尾组tfoot/tfoot 表身组tbody tr td/td /tr /tbody/tabletr代表一行td代表一列，一个单元格

数据表格完整数据表格例子

数据表格但是在一般情况下，表格的表头组、表尾组都可以不编写，甚至连tbody/tbody都不需要编写，简化后的表格结构如下：8表格table 表行tr 单元格td/td /tr/table

数据表格简化后的数据表格例子

元素特点table：定义一个表格。每一个表格只有一对table和/table，一张页面中可以有多个表格tr：定义表格的行，一个表格可以有多行，所以tr对于一个表格来说不是唯一的td：定义表格的一个单元格。每行可以有不同数量的单元格，在td和/td之间是单元格的具体内容th：定义表头，多在表格第一tr内使用，取代td的位置10注：上述的4个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格

属性width：规定表格的宽度align：规定表格相对周围元素的对齐方式bgcolor：规定表格的背景颜色border：规定表格边框的宽度frame：规定外侧边框的哪个部分是可见的rules：规定内侧边框的哪个部分是可见的summary：规定表格的摘要cellpadding：规定单元边沿与其内容之间的空白cellspacing：规定单元格之间的空白11

Cellspacingcellspacing：单元格间距通常情况，我们为了不让单元格之间显得太拥挤，通过table的cellspacing属性让单元格产生一定间隔12技巧：当我们需要单元格具有边框时，用td的边框会造成相邻两边框叠加，并且在td内没有内容时，该单元格不会显示。那么我们通常采用cellspacing让单元格之间产生1px的间距，通过table的背景让单元格边框出现tablestyle=background:#000;cellspacing=1trthstyle=background:#FFF月份/ththstyle=background:#FFF工资/th/trtrtdstyle=background:#FFF8月/tdtdstyle=background:#FFF100￥/td/tr/table

td与table一样，td的属性基本都已被css所取代，只有两个是会被我们经常用到的：colspan：可跨的列数rowspan：可跨的行数13tdcolspan=“2”/tdtdrowspan=“2”/td

表格的嵌套通常我们只需要灵活的使用td的跨行和跨列特性，就能完成比较复杂的表结构但是如果数据表的结构过于复杂，无法通过td来划分实现，那么我们就可以用表格的嵌套来实现在td/td之间再插入一个表格，可以实现表格嵌套14tdtabletrtd/td/trtrtd/td/tr/table/td

练习表格练习15

小结有问题吗？16

第二节表单

表单能做什么表单：form/form,是HTML的一个重要部分，提供一个入口，主要用于采集和提交用户输入的信息，把数据提交给后台程序处理表单由很多表单子元素组成，即表单控件，作用是提供不同类型的容器，记录浏览者输入的数据。一个页面中可以有多个表单，但要保证一个表单只能提交一次数据。表单最常见应用：用户登陆界面、用户注册界面、用户添加留言界面、网页问卷调查等。18

表单的属性action：action作为表单的提交对象，是必须设定路径值的，该值可以是绝对路径，也可以是相对路径，它代表了从表单中采集到的数据，将被提交到哪里处理method：规定如何发送数据（以什么方式提交）method有两种方法：get和post。其中post为最常用的方法get方法通过URL传数据给程序，数据容量小并且内容暴露