web 第二章.ppt

第2章 表格、表单和框架 内 容 提 要 使用HTML，可以设计更复杂的网页元素，例如表格、表单以及框架等。 表格可以使网页上显示的文字更加整齐，有条理。表格还可以实现网页的布局。 表单是控件的容器，客户端提交给服务器端的信息通常放置在控件里，是设计网页必不可少的元素。 框架可以将网页内容有效地进行划分，使不同的区域显示不同的内容。 2.1 表格 一个完整的表格由一对table标签来定义。 每个表格均有若干个单元行（由一对tr标签定义）组成。 每个单元行由若干个单元格（由一对td标签定义）组成。 表格内的具体信息放置在单元格中。 单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。 table tr td单元格内容/td td单元格内容/td … /tr … /table table标签的常用属性如表所示。 从结构上来看，表格可以分成表头、主体和表尾三个部分，分别使用thead、tbody、tfoot标签来表示。 表头和表尾一张表格只能有一个，而一张表格可以有多个主体。 对于大型的表格来说，应该使tfoot出现在tbody的前面，这样浏览器在显示数据时，有利于加快表格的显示速度。另外，thead、tbody、tfoot标签内部都必须使用tr标签。 使用thead、tobody、tfoot对表格进行结构划分的好处是可以先显示tbody的内容，而不必等整个表格下载完成后才能显示。 无论thead、tbody、tfoot的顺序如何改变，thead的内容总是在表的最前面，tfoot的内容总是在表的最后面。 table1.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 title表格使用示例1-规则表格/title /head body table border=1 align=center caption学生信息表/caption thead tr th学号/th th姓名/th th性别/th /tr /thead tfoot tr td colspan=3 align=center这里是表尾/td /tr /tfoot tbody tr td0001/td td王明明/td td男/td /tr … /tbody /table /body /html table1.html的显示结果如图所示。 与表格相关的元素或标签如表所示。 对于不规则的单元格来说，有的单元格需要跨越多行或跨越多列，td以及th标签有colspan和rowspan两个属性。 colspan指当前单元格水平方向跨越的单元格数，值为一正整数，代表此单元格水平延伸的单元格数，或跨越的列数。 rowspan指的是当前单元格垂直方向跨越的单元格，值为一正整数，代表此单元格垂直延伸的单元格数，或跨行数。 table3.html: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 title表格使用示例3-不规则表格/title /head body table border=2 width=300 bordercolorlight=#FF9600 bordercolordark=#FF00EE cellpadding=0 cellspacing=0 tr td1/td td rowspan=3此单元格跨三行/td td2/td td3/td /tr tr td4/td td5/td td6/td /tr tr td7/td td colspan=2此单元格跨两列/td /tr /table /body /html table3.html的显示结果如图所示。 2.2 表单 表单是一个容器，用来收集客户端要提交到服务器端的信息。 客户端将信息填写在表单中的控件中。当单击表单中的提交按钮时，表单中包含的控件的信息就会被提交给表单的action属性所指定的处理程序。 表单的使用非常广泛，是网页上用于输入信息的区域，例如向文本框中输入文字，在选项框里进行选择等。 从表单的设计