网页设计 第4章 表格、表单与框架.ppt

第 4 章 表格、表单与框架 本章知识技能要点： 掌握表格标签table,th,tr,td的使用方法以及其各类属性的设置 掌握表格中单元格合并的设计方法 掌握利用表格进行页面整体布局的方法 掌握创建表单页面的基本方法 掌握input标签中type属性的各种取值所表示的含义 掌握单选按钮、多选按钮和下拉列表控件的设置方法 掌握框架页面制作的基本方法 掌握frameset标签和frame标签中各个属性的取值以及所表示的含义 掌握多框架之间互相操作的实现方法 掌握浮动框架的制作方法 4.1 表格的应用 表格在网页设计中的应用非常广泛,可以方便灵活排版,很多动态大型网站也都是借助表格排版,这是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然。 在HTML文档中，表格是通过table,th,tr,td标签来完成的，如表4-1所示。在一个最基本的表格中，必须包含一组table标签，一组标签tr和一组td标签或th。 4.1 表格的应用 4.1 表格的应用 4.1.1 定义表格标签table/table table/table标签用来创建一个表格。其中常用的属性见表4-2。 4.1 表格的应用 4.1.2 tr/tr、th/th和td/td标签 tr/tr标签用来创建表格中的每一行。此标签只能放在table/table标签之间使用，而在此标签之间加入文本将是无用的； th和td都是插入单元格的标签，这两个标签必须嵌套在tr标签内，是成对出现的。th用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该表头单元格内的标题内容，其中的文字以粗体居中显示。td标签用于定义表格单元格中的具体内容。 4.1 表格的应用 table/table、tr/tr和td/td标签对的关系如下所示： 例4-1： HTML headtitle一个简单的（2行3列）表格/title/head bodycenter table border=1 tr ???th表头项1/td ???th表头项2/td ???th表头项3/td /tr tr ???td单元格内容1/td ???td单元格内容2/td ???td单元格内容3/td /tr tr ???td单元格内容4/td ???td单元格内容5/td ???td单元格内容6/td /tr /table /center/body/HTML 4.1 表格的应用 tr、th和td标签的大多数属性都是一样的。属性设定如表4-3所示。 4.1 表格的应用 例4-2 HTML headtitle无标题文档/title/head body table border=10 bordercolor=#996803 align=center bgcolor=#ddffdd width=500 height=150 bordercolorlight=#8899cc bordercolordark=#660000 cellspacing=2 cellpadding=8 tr valign=middle bgcolor=#00ffff bordercolor=#ff00ff bordercolorlight=blue bordercolordark=#ff0000 th计算机系/td th自动化系/td th电子信息系/td /tr tr tdc#程序设计/td td自控原理/td td数字信号处理/td /tr tr td网络安全/td td计算机接口技术/td td电子系统设计/td /tr /table /body /HTML 4.1 表格的应用 4.1 表格的应用 4.1.3 多行多列单元格的合并 要创建多行、多列单元格合并的单元格，只需在th或td中加入rowspan或colspan属性以及它们的设定值（默认值为1），它们的取值表明了表格中要合并的行或列的数目。 合并多列的语法： th colspan=#　td colspan=# colspan的设定值表示合并的列数，例如colspan=2则示这一格的宽度为两个列的宽度。 合并多行的语法： th rowspan=#　td rowspan=# rowspan所要表示的意义是指合并的行数，例如rowspan=2就表示这一格的高度为两个行的高度。 4.1 表格的应用 例4-3： HTML headtitle多行多列单元格的合并/title/head body center table border=3 width=80% align