第04讲网页表格的处理

通过本章学习，应该掌握以下内容：1.利用FrontPage2002创建表格的四种方法2.编辑表格的方法3.设置表格的属性的方法4.用表格设计页面布局5.利用HTML和Dreamweaver4.0创建表格的方法第4章网页表格的处理4.1利用FrontPage创建并编辑表格4.1.1创建表格表格以行和列的形式来组织信息，具有容量大、结构严谨和效果直观等多个优点，是网页中不可缺少的记录或总结工具，比如个人简历、产品信息、业务报表甚至家庭理财都能用到表格。FrontPage2002提供了强大的制表功能，使得在制作网页的过程中插入表格的操作显得简便、快捷。在FrontPage2002中，创建表格有以下4种方法。1．使用菜单命令创建表格如果用户希望准确地设置要创建的表格的行、列数，可以通过执行菜单命令创建所需的表格。使用这种方法，可以同时设置表格所有的属性，如行和列的数目、边框宽度等。①选择“表格”|“插入”|“表格”命令，打开图4.1所示的“插入表格”对话框；②输入行数、列数，设置表格的对齐方式、边框的粗细、单元格边距和间距，单击“确定”按钮，即可得到相应的表格。2．使用命令按钮创建表格在编辑网页时，使用“常用”工具栏中的“插入表格”按钮，可以快速地在网页中插入一个表格。插入表格时用户可以自由选择表格所包含的行数和列数.3．绘制表格利用前面两种方法可以建立“n乘m”单元数的表格，单元格大小会自动平均分配。如果需要的表格比较简单，则可以手动绘制表格。手动绘制表格的操作步骤如下：①选择“视图”|“工具栏”|“表格”命令，打开表格对话框；②单击“手绘表格”按钮，在编辑区按下鼠标左键并拖动，即可划出表格边框，再在边框内添加线条即可画出需要的表格。如果有画错的线条可以用表格中的“擦除”工具擦除。4．将文本转换成为表格如果有现成的文本，可以把文本转换成为表格。4.1.2表格的编辑1．修改表格应用菜单或命令按钮创建后的表格，有些是需要经过修改才能应用的。修改表格主要包括修改表格的大小、合并单元格、拆分单元格等操作。（1）修改表格大小在FrontPage2002中，修改表格的大小有以下两种方法。通过鼠标拖拽法可以粗略地调整表格的大小。通过“表格属性”对话框可以精确地调整表格的大小。（2）合并单元格在FrontPage2002中合并单元格的方法有以下三种：先选择要合并的单元格，然后执行“表格”|“合并单元格”命令即可。选择要合并的单元格，在选中的单元格中单击鼠标右键，从弹出的快捷菜单中选择“合并单元格”命令。选择要合并的单元格，单击“表格”工具栏上的“合并单元格”按钮。（3）拆分单元格拆分单元格与合并单元格是两个逆操作。拆分单元格就是将一个单元格拆分为多个单元格。在FrontPage2002中拆分单元格的方法有以下几种。将光标放在要拆分的单元格内，执行“表格”|“拆分单元格”命令，弹出“拆分单元格”对话框，如图4.9所示。在该对话框中选择“拆分为列”或“拆分为行”，单击“确定”按钮。将光标放在要拆分的单元格内，单击鼠标右键，从弹出的快捷菜单中选择“拆分单元格”命令。将光标放在要拆分的单元格内，单击“表格”工具栏上的“拆分单元格”按钮。2．在表格中添加文字和图片创建一个表格以后，就可以在表格中添加相应的内容了，在表格中添加的内容有文字与图片两种形式。（1）在表格中添加文字在创建好的表格内按要求输入文字，调整文字的字号、字体、对齐方式等。（2）在表格中插入图片①选中要插入图片的单元格，选择“插入”|“图片”|“来自文件”（根据需要选择图片的来源）命令，打开“图片”对话框；②在对话框中选择图片，选中图片文件之后，单击“插入”按钮，则图片及插入到相应的单元格里。调整图片大小及位置。3．删除表格（1）删除单元格在FrontPage2002中如果要删除某个单元格，可以通过以下方法：选择要删除的单元格，执行“表格”|“删除单元格”命令。选择要删除的单元格，并单击鼠标右键，从弹出的快捷菜单中选择“删除单元格”命令。（2）删除列或行在FrontPage2002中如果要删除某列或某行，可以采用以下方法：选择要删除的列或行，执行“表格”|“删除单元格”命令即可。选择要删除的列或行，并单击鼠标右键，从弹出的快捷菜单中选择“删除单元格”命令。（3）删除整个表格如果要删除某个表格，只需选中此表格中的所有单元格，然后单击右键并从弹出的快捷菜单中选择“删除单元格”命令即可。删除整个表格的操作方法如下：注意：如果在删除表格、单元格、行或列时，使用Delete键删除，则只删除该表格、单元格、行或列中的文本，而不是删除表格。4.1.3设置表格的属性将光标置于表格中，然后单击右键并从弹出的快捷菜单中选择“表格属性”命令，在打开的“表格属性”对话框中进行表格属性设置。1．表格的布局（1）表格的对齐方式FrontPage2002中提供了4种对齐方式：默认、左对齐、右对齐和居中。单击“表格属性”对话框中的“对齐方式”下拉列表框，可从中选择所需的对齐方式。（2）表格的浮动方式此功能有点像图片的环绕功能。创建一个表格后，表格的两侧是不能输入任何文字的。如果进行了浮动设置，就可以获得与图片环绕差不多的效果了。FrontPage2002中提供了3种浮动方式：默认、左对齐和右对齐。（3）单元格的边距与间距如果想设置表格线与表格内容间的距离或两单元格间的距离，可以通过单元格边距与单元格间距两个选项来设置。2．为表格添加背景为表格添加背景也要应用“表格属性”对话框。表格背景可分为两种形式：一种是为表格添加背景颜色，另一种是为表格添加背景图片。（1）为表格添加背景颜色选中表格或单元格后，单击“表格属性”对话框中的“颜色”选项右侧的向下箭头，从弹出的颜色面板中选择所需的背景颜色，则此颜色就会显示在表格的背景层中。（2）为表格添加背景图片选中表格或单元格后，启用“表格属性”或“单元格属性”对话框中的“使用背景图片”复选框，然后选择一个图片作为表格的背景，可为表格添加背景图片。3．为表格添加边框在FrontPage中如果想要改变表格的边框，可以采用以下方法：选择要设置边框的表格，执行“格式”|“边框和底纹”命令。在要设置边框的表格中单击鼠标右键，从弹出的快捷菜单中选择“表格属性”命令，打开“表格属性”对话框，在“边框”选项组中进行相关设置。4.1.4使用表格设计页面布局在网页设计中表格还有一个重要的作用，就是设计页面布局。一个空白网页布置起来比较困难，尤其是一些复杂的页面。这时可以利用表格将网页分成若干个单元格，每个单元格对应网页中的一个部分。然后，对每一部分分别进行设计和制作，这样就可以使复杂的网页设计简化，而且所设计的网页清晰、有条理性。另外，在很多网页上都有各种细线的布局效果，使得页面简洁明快、条理清楚。这些细线要么是用图像的方式生成，要么是利用表格的各种特性制作而成。使用表格实现这些细线可以使页面文件更小，下载更快，因此更为实用。细线效果大致可以分为两类，一类是表格框线，另一类是各种横竖分隔线。用表格布置页面时，首先要规划页面的布置，然后利用表格的平铺和嵌套，将网页中的各元素定位在各自的位置上。由于浏览器在下载网页时，先下载整个表格，然后再下载表格中的内容。所以在用表格布置页面时，不能将整个网页的内容都放在一个大表格中，以免影响网页的下在速度。4.2其他处理网页表格的方法4.2.1利用HTML处理网页表格1．表格的基本构成通常在HTML中创建一个普通的表格应包括以下标记符：（1）TABLETABLE标记符用于定义整个表格，表格内的所有内容都应该位于TABLE和／TABLE之间。（2）CAPTION如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在CAPTION和／CAPTION之间。（3）TRTR标记符用于定义表格的行，对于每一个表格行，都对应一个TR标记符。TR标记符的结束标记符可以省略。（4）TD和TH在表格行中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。TD与TH的功能和用法几乎完全相同（可以任意混合使用，但效果略有不同），唯一不同之处在于TD表示普通表格数据，而TH表示表格的行列标题数据（也就是通常所说的表头）。TD和TH的结束标记符都可以省略，并且可以不包括任何内容3．表格的编辑及属性设置（1）合并单元格在TD和TH标记内使用rowspan属性可以进行行合并，rowspan的取值表示垂直方向上合并的行数；使用colspan属性可以进行列合并，colspan的取值表示水平方向上的合并的列数。（2）边框与分隔线在TABLE标记内使用frame、rules和border属性可以设置表格的边框和单元格分隔线。（3）控制单元格空白在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，（4）表格的对齐表格的对齐包括页面对齐和内容对齐。①表格的页面对齐表格在页面中的对齐与其他页面内容一样，可以直接在TABLE标记符中使用align属性。另外，也可以用DIV标记符的align属性设置表格的对齐。②表格的内容对齐表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。设置水平对齐的方法是：在标记符TR、TH、TD内使用align属性，其常用的取值可以是：center、left、right、justify.设置表格数据在垂直方向的对齐应在TR、TD或TH标记符中使用valign属性，valign属性的常用取值包括：top、bottom、middle。（5）控制表格和单元格大小可以使用标记符的width和height属性设置表格和单元格大小。（6）设置表格和单元格的背景在TABLE、TR或TD标记符内使用bgcolor属性设置背景颜色；使用background属性设置背景图案。4.2.2利用Dreamweaver8.0处理网页表格1．创建表格（1）创建新表格利用Dreamweaver4.0创建新表格时，首先选中对象面板上“View”栏目下“StandardView”（标准视图）按钮，然后可以通过下列四种方式中的任意一种：①将对象面板调整到“Common”类上，单击“InsertTable”（插入表格）按钮。②通过主窗口的菜单“Insert”|“Table”命令。③使用快捷组合键“Ctrl+Alt+T”。④将对象面板调整到“Common”类上，拖动“InsertTable”按钮到主窗口的工作区中。（2）选择表格选择表格可分为选择整个表格和选择表格中的单元格。①如果要选择整个表格，则可进行如下的操作之一：将光标置于表格中的某个单元格中，选择“Modify”|“Table”|“SelectTable”命令。将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“SelectTable”命令。将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。单击表格的边线。②选择单个单元格的方法有以下几种：将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。将光标置于所要选择的单元格中，向右拖动鼠标。将光标置于所要选择的单元格中，选择“Edit”|“SelectAll”命令。按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。③选择多个单元格的方法有以下几种：按住Ctrl键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。如果要选择整列，将光标置于该列的上边缘，当光标变成图标时单击鼠标左键。④选择的全部单元格的方法有以下几种：将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。将光标置于第1行的左边缘，当光标变成图标时，向下拖动鼠标至最后一行。