第3章-网页中的表格.ppt

网页表格的html语言table,tr,td属性border外表框cellpadding单元格内边框距离cellspacing内边框bordercolor边框颜色bgcolor背景颜色align每一行中内容水平位置ralign每一行中内容垂直位置隐藏分割线Rules=“rows”行分割线“cols”列分割线“none”全部隐藏隐藏部分边框tableframe=“vsides”左右边框“above”上边框“below”下边框*第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列的表格代码：tabletrtd第1行第1列/tdtd第1行第2列/td/trtrtd第2行第1列/tdtd第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