《网页设计-表格、表单及框架》由会员分享，可在线阅读，更多相关《网页设计-表格、表单及框架（37页珍藏版）》请在金锄头文库上搜索。
1、第3章 表格、表单及框架,3.1 表格 3.2 表单3.3 框架,3.1 表格,3.1.1 表格的基本结构,用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格的不同行列中，以制作整齐、清晰的页面。 HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成，每一行的一个列就是一个单元格，如右图所示：,创建HTML表格需要使用下列标签：(1) 、 表格标签对，用于定义一个表格；(2) 、 行标签对，用于定义一个行，只能嵌套在表格标签对中(3) 、 单元格标签对，用于定义一个单元格，只能嵌套在 行标签对中。
2、、中放单元格内容，即要显示的数据。,3.1.1 表格的基本结构,【例3-1】创建一个简单表格，放一组学生信息。,简单表格示例 学号 姓名 性别 08003301王明男 08003302张鸿女 ,常见的表格上面往往有个标题，第一行(表头)也常常用突出的字体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中可以利用表格下面两个标签来实现： 标题标签对，用于定义一个表格标题，它只能放在标签对中，并在之前。的align、valign属性用于设置标题的对齐方式，取值同，默认在表的上方中间。 要突出某个单元格内容，只要将希望突显内容的单元格标签对、改用表头单元格标签对、即可，甚至只需要将改为就
3、可以了。,3.1.2 表格的常用属性,的常用属性,2. 行、单元格的常用属性,【例3-2】属性设置示例, 学生表 学号 姓名 性别 08003301王明男 08003302张鸿女 学号 姓名 性别 08003301王明男 08003302张鸿女 ,【例3-3】设置行及单元格的对齐方式示例, 行、单元格的对齐方式 表头行单元2 表头行单元3 表头行单元4 第1行水平右对齐 水平右对齐 水平右对齐 水平中对齐 第2行水平左对齐 水平左对齐 水平左对齐 水平右对齐 第3行高80 垂直底对齐 垂直顶对齐 垂直中对齐 ,3.1.3 合并单元格,日常使用的表格中，常有些格子需要跨多行或多列，例如下面的学生
4、表。,实际上，跨多列的格子就是将一行的多个格子合并到一起，也就是该格子占多列。类似地，跨多行的格子就是将一列的多个格子合并到一起，也即该格子占多行。于是，在HTML中，就是使用指定单元格占多行或多列来创建跨多行或多列的单元格，即合并单元格。 、 标签都有指定单元格占的行数或列数的属性：colspn属性 设置单元格占的列数，默认值是1。 例：，指定单元格占3列。 rowspan属性 设置单元格占的行数，默认值是1。 例：，指定单元格占2行。,【例3-4】创建前面所示的学生表表格, 学生表 基本信息 成绩 班级 学号 姓名 课程 分数 计算机 一班 08003301 王明 计算机基础 92 080
5、03302 张鸿 85 网络一班 08003331 李晓娟 网络编程 73 08003332 刘刚 90 ,3.1.4 利用表格布局网页示例,使用表格设计网页格局，布局比较规则、容易，也使网页看上去更加整齐。表格布局中，不同的对象放在各自的单元格中，可以对它们进行不同的处理，而不用担心不同对象之间的影响。,【例3-5】利用表格布局创建如图所示网页,1.根据网页中元素设计表格网页中有以下6个元素： 网页标题“网页编程学习网站”； 带学位帽人图片，文件是“a1.gif”； 装饰条图片，文件是“a2.gif”； 竹子图片，文件是“a3.gif”； 文字“如今”； 文字超链接“点击进入” (为简化,并不真链接)。 根据6个元素的布局，划分出网格如图3-8所示。虽然网页中只有6个元素，但有些元素需要占多个单元格，总共需要4行。,根据6个元素的布局，划分出网格如右图所示。,再根据各个元素所占位置，合并相关格子得到 6 个元素的单元格，如右图。,由上面分析可知，表格结构应该如下：, ,
