网页中表格ppt课件

1、第第3 3章章 网页中的表格网页中的表格oemdgsl-skf 189288oemdgsl-skf 189288表格在网页中的运用非常广泛，它是表格在网页中的运用非常广泛，它是网页中的重要元素。表格在网页中有网页中的重要元素。表格在网页中有两种功能，一种功能是在网页中用表两种功能，一种功能是在网页中用表格组织数据，以明晰的二维列表方式格组织数据，以明晰的二维列表方式显示网页中的数据，方便查询和阅读。显示网页中的数据，方便查询和阅读。另一种功能是用表格规划网页，平常另一种功能是用表格规划网页，平常在网上阅读时看到的陈列整齐的页面，在网上阅读时看到的陈列整齐的页面，很多都是利用表格进展规划的。本章

2、很多都是利用表格进展规划的。本章引见表格在网页中的运用，主要内容引见表格在网页中的运用，主要内容包括：包括：表格标签表格标签创建表格的根本操作创建表格的根本操作导入表格数据和排序导入表格数据和排序用表格规划网页用表格规划网页利用表格设计特殊页面规划利用表格设计特殊页面规划3.1 表格标签表格标签 表格是网页设计中的重要元素，定义表格表格是网页设计中的重要元素，定义表格的的HTML标签比较复杂，因此掌握根本表格标标签比较复杂，因此掌握根本表格标签的原理和运用方法非常必要。本节先引见签的原理和运用方法非常必要。本节先引见一下表格标签，以利于对表格的了解。一下表格标签，以利于对表格的了解。3.1.1

3、 认识网页中的表格认识网页中的表格3.1.2 课堂实例课堂实例在代码视图创建一个简单表格在代码视图创建一个简单表格3.1.3 课堂实例课堂实例设置表格属性设置表格属性3.1.1 认识网页中的表格认识网页中的表格行：表格中的程度间隔。行：表格中的程度间隔。列：表格中的垂直间隔。列：表格中的垂直间隔。单元格：表格中一行与一列相交所产生的区域，单元格中单元格：表格中一行与一列相交所产生的区域，单元格中可以插入文字、图像、动画等网页元素。可以插入文字、图像、动画等网页元素。单元格行列在HTML文档中，一个表格主要由3种标签组成，分别是、，它们分别对应表格、行、列。包含在内部，而包含在内部。例如，下面是

4、一个2行2列的表格代码： 第1行第1列 第1行第2列 第2行第1列 第2行第2列 表格以标签开场，以标签终了；第1个开场到终了，代表第1行，依次类推；每一个标签中的第1个开场到终了，代表第1列，第2个开场到终了，代表第2列，依次类推。续续3.1.2 课堂实例课堂实例在代码视图创建一个简单表格在代码视图创建一个简单表格下面利用下面利用Dreamweaver的的“HTML工具栏，在代码视工具栏，在代码视图中创建一个简单表格的图中创建一个简单表格的HTML代码。代码。1切换工具栏切换工具栏2制造制造2行行2列的表格列的表格3输入数据输入数据3.1.3 课堂实例课堂实例设置表格属性设置表格属性在前面的

5、实例中，引见了表格的根本构造，下面将进一在前面的实例中，引见了表格的根本构造，下面将进一步引见如何设置这些标签的属性，控制表格的外观。步引见如何设置这些标签的属性，控制表格的外观。1合并单元格合并单元格2设置表格边框宽度属性设置表格边框宽度属性3设置边框颜色设置边框颜色3.2 创建表格的根本操作创建表格的根本操作 前面引见了经过前面引见了经过HTML代码制代码制造表格和设置表格属性的方法。下造表格和设置表格属性的方法。下面将引见运用面将引见运用Dreamweaver提供的提供的可视化工具制造表格。可视化工具制造表格。3.2.1 插入表格插入表格3.2.2 表格的编辑表格的编辑3.2.3 格式化

6、表格格式化表格3.2.4 导入表格数据和排序导入表格数据和排序3.2.1 插入表格插入表格1插入表格的方法插入表格的方法2【表格】对话框详解【表格】对话框详解1表格宽度。表格宽度。2边框粗细。边框粗细。3单元格边距。单元格边距。4单元格间距。单元格间距。5页眉。页眉。6辅助功能。辅助功能。3.2.2 表格的编辑表格的编辑 在页面中将表格创建好以后，很多时候需求对表格在页面中将表格创建好以后，很多时候需求对表格进展进一步的编辑才干使之更符合页面效果的要求。进展进一步的编辑才干使之更符合页面效果的要求。1选择单元格选择单元格2调整行和列的宽度、高度调整行和列的宽度、高度3插入行和列插入行和列4拆分

7、和合并单元格拆分和合并单元格5表格的嵌套表格的嵌套3.2.3 格式化表格格式化表格Dreamweaver内置了格式化的表格库，只需选中表内置了格式化的表格库，只需选中表格，选择【命令】格，选择【命令】|【格式化表格】命令就可以弹出如【格式化表格】命令就可以弹出如下图的下图的“格式化表格对话框，可以设置各个参数来格式化表格对话框，可以设置各个参数来格式化表格。格式化表格。3.2.4 导入表格数据和排序导入表格数据和排序Dreamweaver可以把利用制表符、逗号、分号、引可以把利用制表符、逗号、分号、引号或者其他分隔符进展格式化的文本，导入到网页文号或者其他分隔符进展格式化的文本，导入到网页文档

8、中成为表格，对于需求在网页中放置大量格式化数档中成为表格，对于需求在网页中放置大量格式化数据的情况提供了更加快捷、方便的方法。另外，据的情况提供了更加快捷、方便的方法。另外，Dreamweaver还提供了对表格排序的功能，这也使还提供了对表格排序的功能，这也使网页中数据的管理更加高效。网页中数据的管理更加高效。1导入表格数据导入表格数据2表格排序表格排序3.4 课堂实例课堂实例用表格规划网页用表格规划网页1插入表格并设置页面属性2规划Banner和导航条3规划图像列表4规划详细内容本章习题本章习题上机练习上机练习练习练习1 创建一个学生管理表创建一个学生管理表 在网页中制造一个学生管理表，效果

9、如图在网页中制造一个学生管理表，效果如图3-75所示。先插入一个所示。先插入一个7行行4列的表格，设置表格宽度列的表格，设置表格宽度和高度，然后合并单元格，输入相应的文本即可。和高度，然后合并单元格，输入相应的文本即可。图3-75 学生管理表 练习练习2 制造圆角细线表格制造圆角细线表格 制造一个圆角细线表格，效果如下图。先插入一个制造一个圆角细线表格，效果如下图。先插入一个1行行1列列的表格，然后用事先制造好的图片的表格，然后用事先制造好的图片roundCorner.gif作表作表格背景，然后将表格拆分为格背景，然后将表格拆分为2行，设置第行，设置第1行的高度为行的高度为25像素。像素。 从这个练习可以知道，很多时候假设想在网页中制造比较特殊的表格效果，需求借助外部图片。事先将需求的网页效果画出来，然后在表格中作为背景或者直接插入。练习练习3 用表格规划主页用表格规划主页 制造一个用表格规划网站主页的实例，效果如下图。在本制造一个用表格规划网站主页的实例，效果如下图。在本例中，采取了多种插入、修正表格的方法进展页面