网页制作-第3章.ppt

第3章 表格、表单及框架 第 * 页 * 3.1 表格 3.2 表单 3.3 框架 3.1 表格 3.1.1 表格的基本结构 用表格显示信息条理清楚，使浏览者一目了然。表格在网页中还有协助布局的作用，可以把文字、图像、声音甚至视频，或者另一个表格，组织到表格的不同行列中，以制作整齐、清晰的页面。 HTML具有强大的建立、显示表格的功能。 HTML的表格由行和列组成， 每一行的一个列就是一个单元 格，如右图所示： 创建HTML表格需要使用下列标签： (1) table、/table —— 表格标签对，用于定义一个表格； (2) tr、/tr —— 行标签对，用于定义一个行，只能嵌套在表格标签对中 (3) td、/td —— 单元格标签对，用于定义一个单元格，只能嵌套在 行标签对中。td、/td中放单元格内容，即要显示的数据。 3.1.1 表格的基本结构 【例3-1】创建一个简单表格，放一组学生信息。 htmlheadtitle简单表格示例/title/head body table !-- 定义一个表 -- tr !-- 定义一行表格(第1行) -- td学号/td !-- 第1行的第1列 -- td姓名/td td性别/td !-- 第1行的第3列 -- /tr tr !-- 定义第2行 -- ttdtd王明/tdtd男/td /tr tr !-- 定义第3行 -- ttdtd张鸿/tdtd女/td /tr /table !-- 表格结束 -- /body/html 常见的表格上面往往有个标题，第一行(表头)也常常用突出的字体(如黑体、粗体等)等来显示，以突显其内容。这些在HTML表格中可以利用表格下面两个标签来实现： caption/caption —— 标题标签对，用于定义一个表格标题，它只能放在table标签对中，并在tr之前。caption的align、valign属性用于设置标题的对齐方式，取值同td，默认在表的上方中间。 th/th —— 要突出某个单元格内容，只要将希望突显内容的单元格标签对td、/td改用表头单元格标签对th、/th即可，甚至只需要将td改为th就可以了。 3.1.2 表格的常用属性 table的常用属性 left、center、right 设置表格在网页中的位置(左,中,右） align 像素值 设置表格的格子中内容与边框间的空隙 cellpadding 像素值 设置表格中格子间的空隙 cellspacing 像素值或占窗口的百分比 设置表格的高度 height 像素值或占窗口的百分比 设置表格的宽度 width 同页面背景图片设置 设置背景图片 background 颜色值，默认值为白色 设置背景颜色 bgcolor 颜色值，默认值为黑色 设置边框的颜色 bordercolor 像素值，默认值为1 设置边框的宽度 border 属性值 用途 属性 2. 行、单元格的常用属性 同页面背景图片设置 设置单元格背景图片 background 颜色值，默认值为黑色 设置单元格边框的颜色 bordercolor top、middle(默认)、bottom 单元格中内容的垂直对齐方式 valign left(默认)、center、right 单元格中内容的水平对齐方式 align 颜色值，默认值为白色 设置行或单元格背景颜色 bgcolor 像素值或百分比 设置行或单元格的高度 height 像素值或百分比 设置行或单元格的宽度 width 属性值 用途 属性 【例3-2】table属性设置示例 body !-- 表格1 -- table border=10 width=90% cellspacing=10 caption学生表/caption !-- 定义表