第3章 网页中表格.pptVIP

第3章 网页中的表格 表格在网页中的应用十分广泛，它是网页中的重要元素。表格在网页中有两种功能，一种功能是在网页中用表格组织数据，以清晰的二维列表方式显示网页中的数据，方便查询和浏览。另一种功能是用表格布局网页，平时在网上浏览时看到的排列整齐的页面，很多都是利用表格进行布局的。本章介绍表格在网页中的应用，主要内容包括： 表格标签 创建表格的基本操作 导入表格数据和排序 用表格布局网页 利用表格设计特殊页面布局 3.1 表格标签 表格是网页设计中的重要元素，定义表格的HTML标签比较复杂，因此掌握基本表格标签的原理和使用方法非常必要。本节先介绍一下表格标签，以利于对表格的理解。 3.1.1 认识网页中的表格 3.1.2 课堂实例――在代码视图创建一个简单表格 3.1.3 课堂实例――设置表格属性 3.1.1 认识网页中的表格 行：表格中的水平间隔。 列：表格中的垂直间隔。 单元格：表格中一行与一列相交所产生的区域，单元格中可以插入文字、图像、动画等网页元素。 单元格 行 列 在HTML文档中，一个表格主要由3种标签组成，分别是table/table、tr/tr、td/td，它们分别对应表格、行、列。tr包含在table内部，而td包含在tr内部。 例如，下面是一个2行2列的表格代码： table tr td第1行第1列/td td第1行第2列/td /tr tr td第2行第1列/td td第2行第2列/td /tr /table 表格以table标签开始，以/table标签结束；第1个tr开始到/tr结束，代表第1行，依次类推；每一个tr标签中的第1个td开始到./td结束，代表第1列，第2个td开始到./td结束，代表第2列，依次类推。 续 3.1.2 课堂实例――在代码视图创建一个简单表格 下面利用Dreamweaver的“HTML”工具栏，在代码视图中创建一个简单表格的HTML代码。 1．切换工具栏 2．制作2行2列的表格 3．输入数据 图1-20 在“属性”面板中设置标题 3.1.3 课堂实例――设置表格属性 在前面的实例中，介绍了表格的基本结构，下面将进一步介绍如何设置这些标签的属性，控制表格的外观。 1．合并单元格 2．设置表格边框宽度属性 3．设置边框颜色 3.2 创建表格的基本操作 前面介绍了通过HTML代码制作表格和设置表格属性的方法。下面将介绍使用Dreamweaver提供的可视化工具制作表格。 3.2.1 插入表格 3.2.2 表格的编辑 3.2.3 格式化表格 3.2.4 导入表格数据和排序 3.2.1 插入表格 1．插入表格的方法 2．【表格】对话框详解 （1）表格宽度。 （2）边框粗细。 （3）单元格边距。 （4）单元格间距。 （5）页眉。 （6）辅助功能。 3.2.2 表格的编辑 在页面中将表格创建好以后，很多时候需要对表格进行进一步的编辑才能使之更符合页面效果的要求。 1．选择单元格 2．调整行和列的宽度、高度 3．插入行和列 4．拆分和合并单元格 5．表格的嵌套 3.2.3 格式化表格 Dreamweaver内置了格式化的表格库，只要选中表格，选择【命令】|【格式化表格】命令就可以弹出如图所示的“格式化表格”对话框，可以设置各个参数来格式化表格。 3.2.4 导入表格数据和排序 Dreamweaver可以把利用制表符、逗号、分号、引号或者其他分隔符进行格式化的文本，导入到网页文档中成为表格，对于需要在网页中放置大量格式化数据的情况提供了更加快捷、方便的方法。另外，Dreamweaver还提供了对表格排序的功能，这也使网页中数据的管理更加高效。 1．导入表格数据 2．表格排序 3.4 课堂实例――用表格布局网页 1．插入表格并设置页面属性 2．布局Banner和导航条 3．布局图像列表 4．布局详细内容 本章习题 上机练习 练习1 创建一个学生管理表 在网页中制作一个学生管理表，效果如图3-75所示。先插入一个7行4列的表格，设置表格宽度和高度，然后合并单元格，输入相应的文本即可。 图3-75 学生管理表 练习2 制作圆角细线表格 制作一个圆角细线表格，效果如图所示。先插入一个1行1列的表格，然后用事先制作好的图片（roundCorner.gif）作表格背景，然后将表格拆分为2行，设置第1行的高度为25像素。 从这个练习可以知道，很多时候如果想在网页中制作比较特殊的表格效果，需要借助外部图片。事先将需要的网页效果画出来，然后在表格中作为背景或者直接插入。 练习3 用表格布局主页 制作一个用表格布局网站主页的实例，