第九讲 网页中的表格操作

在网页中插入表格可以使网页上的内容排列整齐,让浏览者对表格中表达的数据及其含义一目了然,更容易找到感兴趣的材料。不仅如此,表格还是设计网页的重要工具,熟练地、合理地使用表格对于制作网页非常重要。
  在网页中,表格的作用主要有两种:一是存放数据和显示信息,这是常见最基本的应用,也是Word中一直用到的;二是组织网页的内容,使网页更整洁美观。对于图文混排的网页,利用表格可以大大提高网页制作的效率。在隐藏表格框线后,浏览者几乎感受不到表格的存在。实际上FrontPage提供的各网页模板,就是用表格来组织的。
  本讲我们先学习如何在页面中插入表格,以及对表格进行简单的编辑处理。
一、表格的插入和修改
  FrontPage多种方法来创建各种样式的表格,这些方法和Word差不多。下面我们来仔细看看。
  1、使用常用工具栏的“插入表格”按钮
  您可以使用此工具快速创建一份简易表格:
  将光标移至您要插入表格的地方。在工具栏的“插入表格”处按下鼠标左键 ,会出现一个表格模型。然后按住左键向下向右拖动。拖曳鼠标“向右”可以增加表格的列,“向下”拖曳可以增加表格的行,直到您要的行数与列数(如10行×4列)显示出来(如下图)。然后释放鼠标即可产生一个默认格式的表格。

  在拖动鼠标时,若拖过头还可往回拖。
  2、使用“表格”菜单中的“插入表格”命令
  前面介绍的方法虽然简单快捷,但创建的表格是默认的格式,您还得根据需要来修改表格的属性。
  “表格”菜单中的“插入表格”命令可以让你更精确设置表格,比如设置表格的“对齐方式”,“边框粗细”等等。
  单击“表格”菜单,在“插入”子菜单中单击“表格”,出现“插入表格”对话框,在“插入表格”对话框上设定表格的行、列数等,然后单击“确定”完成表格创建。
  【例】为“常用网站”网页建立一个宽度为80%、居中的表格
  1)在FrontPage窗口中打开“网页练习”网站,并新建一个空白网页。
  2)为新建的空白网页输入标题“常用网站”,并设置好字体及段落格式。
  3)另起一行后,鼠标单击“表格”菜单,在“表格”菜单中选择“插入”选项,再在“插入”子菜单中单击“表格”;

  4)在出现的“插入表格”对话框中的“行数”后的栏位中输入5,在“列数”后的栏位中输入4,对齐方式改为“水平居中”,指定宽度为80%,边框粗细、单元格边距及间距分别为1、1及0:

  5)在网页中出现下图所示的表格,最后将网页保存为“cywz.htm”文件:

  【注意】在“插入表格”对话框中的各参数改变以后将会保存下来,使以后的默认格式变成这次设置的样式,包括用“插入表格”按钮创建的表格。
  3、手工绘制表格
  除了上面的两种创建表格的方法外,你也可以通过表格工具栏上的“画笔”(“手绘表格”)来绘制自己需要的表格。

  单击“表格”工具栏上的“铅笔”(“手绘表格”按钮),这时候鼠标指针会变成一只铅笔,将已变成笔形的鼠标移到表格的一个角端点,按住左键,斜方向拖动至其对角端,松开左键,表格的外框线即画成,然后再画各行线和各列线。您可以创建一个单元格大小不同、行列数变化的复杂表格。
  当您完成绘制表格后,请再单击“表格”工具栏上的“手绘表格”按钮,以使此按钮不再被选取。
  若要删除任何您不想要的线,请单击“表格”工具栏上的“橡皮”(“清除”按钮),按住鼠标并拖动通过不要的线段,当此线段变为红色时,再放开鼠标按钮即可。如果你需要分割表格,在需要分割的地方一端拖曳画笔到另一端并连接即可。
  所以“表格”工具栏上的这两个按钮还可以对已建立的表格进行修改。
  【例】下图演示了用“铅笔”画不规则表格的过程:
  1)单击“表格”工具栏上的“手绘表格”按钮,将已变成笔形的鼠标移到表格的一个角端点,按住左键,斜方向拖动至其对角端(下图1);
  2)松开左键,表格的外框线即画成。再将笔形鼠标移到表格的左边线上部,按住左键,沿水平方向拖动至表格的右边线(下图2),松开左键,行线即画成。
  3)依次再画一根列线(下图3)和一根列线(下图4)。松开左键,整个表格即画成(下图5)。

  若FrontPage窗口没有显示表格工具栏,只要右击工具栏或菜单栏的任何位置,在快捷菜单中选择“表格”即可显示表格工具栏。另外,单击“表格”菜单,选择“手绘表格”项,也会在窗口显示“表格工具栏”,并且“手绘表格”选项已经被自动选取了。
  4、由文本转换
  这项功能常用于将Word的表格加入网页,可以缩小网页的空间占用。我们将在第十六讲《优化网页》中再做介绍。
  表格建立后,就可以在表格中输入文字,输入方法和在Word中是一样的。当然,也可以在表格中插入图片。
二、表格的修改调整
  当表格创建好以后,由于在默认下均匀分布的规则的表格不一定能满足我们的要求。常常需要对表格进行修改调整。下面我们以在上表中图片一行的下面添加一个新行来说明添加新行、新列的方法。另外,列宽是平均分配的,
  1、改变列宽和整个表格宽度
  将鼠标指针移动到框线上,在鼠标指针变成双向箭头时,按下左键拖动,可改变列宽。若鼠标指在表格的右边线上推动可以改变整个表格的宽度。下面二图显示了将“常用网站”网页中的表格变成左窄右宽的前后情况:


鼠标指针变成双向箭头

列宽改变

  用同样方法也可改变表格的行高,但因行高会随着单元格里边的内容增加而自动变大,所以通常不需去改变行高。
  2、插入行与列
  插入行、列,最简单的方法是利用“表格”工具栏上的“插入行”或“插入列”按钮:
  先将光标移至需插入行(或列)下方(或右侧)的单元格中,然后单击“表格”工具栏上的“插入行”(或“插入列”)按钮就可以在该单元格上面(或右侧)插入一行(或一列)。
  我们经常需要在表格的最后添加几行,这就要利用“表格”菜单中的“插入行或列”命令,然后在“插入行或列”对话框上进行设置。
  【例】在“常用网站”网页中的表格最后添加五行:
  1)单击图片所在行,使光标出现在该行中。单击“表格”菜单,再单击“插入”子菜单中的“行或列”(下左图)。就会打开“插入行或列”对话框,如下右图所示。

  2)在“插入行或列”对话框中选中“行”(默认设置),然后选中“所选区域下方”(默认设置),在“行数”右端的栏位中输入5。
  3)单击“确定”按钮,在图片所在行的下面将插入一行,结果如下图所示。

  插入新列的操作与插入新行基本一样,但插入新列不会使表格宽度增加,大家可以试一试。
  3、删除行与列
  要删除行或列,必须首先选中需删除(可不连续)的行或列(可不连续),选择行与列最简单的方法是:
  将鼠标移至需选定行的最左端,当鼠标变成向右的粗黑箭头后单击(如下图),可选定一行;将鼠标移至需选定列的最上端,当鼠标变成向下的粗黑箭头后单击,可选定一列。出现粗黑箭头后按住左键往上下(或左右)拖,可选定连续多行(或列)。在选中一行(列)后,按住“Ctrl”键再单击其它行(列),可选中不连续的行(或列)。

  选中行(或列)后再单击“常用”工具栏上的“剪切”按钮或“表格”工具栏上的“删除单元格”按钮就可删除所选中的行(或列)。但按键盘上的“Delete(删除)”键只能删除表格中的内容,不能删除行或列。
  4、平均分布各列或各行
  在移动列(行)线后,表格的各列(行)分布不均匀,若要使它们恢复均匀分布。或除其中一列(行)外,其余各列(行)均匀分布。可在选定需要平均列宽或行高的列或行后,单击“表格”工具栏上的“平均分配行高”或“平均分配列宽”按钮,就可达到目的。
  5、合并单元格
  和Word一样,我们可以对表格中的单元格进行拆分和合并操作。通过这些操作,使一个规则的表格变成一个不规则的表格。
  只有同一行(列)中相邻的单元格才能合并。合并的具体步骤是:选中要合并的相邻的单元格,“表格”工具栏中的“合并单元格”按钮就变成实线,单击它,就可将选中的这些单元格合并为一个大单元格。
  单元格合并后,原先各单元格中文字、图片等将全部移入新单元格中。
  【例】若想建立下面那样一个表格,其具体步骤为:

 
     
    
    
    

  1)先用“表格”工具栏上的“插入表格”按钮拉出一个5×5的表格,并用鼠标在右边线上拖动,使表格的宽度符合要求:

     
     
     
     
     

  2)用鼠标在左边第一根列线上拖动,使第一列的宽度符合要求:

     
     
     
     
     

  3)用鼠标将第二到第五列全部拖黑(选中),单击“表格”工具栏上的“平均分配行高”按钮,使这四列的宽度一样:

     
     
     
     
     

  4)用鼠标将第一行全部拖黑(选中),单击“表格”工具栏上的“合并单元格”按钮,使第一行变成一个大单元格:

 
     
     
     
     

  5)用鼠标将第一列下面的四个单元格全部拖黑(如下图所示),单击“表格”工具栏上的“合并单元格”按钮,使这四个单元格变成一个大单元格,完成整个表格修改工作。

 
     
     
     
     

  6、拆分单元格
  可以将一个单元格拆分成多个单元格。拆分的具体步骤是:
  1)将光标放到需拆分单元格,单击“表格”工具栏中的“拆分单元格”按钮。
  2)在右图所示的“拆分单元格”对话框上,首先选定“拆分为行”或“拆分为列”,再输入“行数”或“列数”框中所需的数字,最后单击确定即可完成。
  单元格拆分后,其中的文字、图片等集中在第一单元格中,其它单元格空白。
三、表格的修饰和设置
  除了前面介绍的对表格的修改,我们还可以通过设置表格属性和单元格属性来修饰表格,包括对齐方式、边框粗细,框框线的颜色以及背景色等。
  1、表格属性
  鼠标移到表格处单击右键,在快捷菜单中选择“表格属性”,就可打开“表格属性”设置窗口:

  我们可以看到,在表格属性设置中一共有三个大项,布局、边框和背景:
  1)表格的布局
  在“布局”中的“对齐方式”是控制在页面中摆放表格的位置,你可以选择右对齐、左对齐、水平居中、两端对齐。默认是靠左对齐,但这要视表格大小来决定,在表格宽度占满100%时,此项不用设置。
  “浮动”是指定文本与某一格表格的环绕方式,就好像文本环绕图片一样。
  “指定宽度、高度”可以自由设置表格的宽度和高度。如果你没有指定高度的值,那么表格将根据表格中的对象自行调整。
  表示表格大小的单位有百分比和像素。一般来说,我们选择百分比作为表格大小的单位,因为它可以根据访问者显示器大小和浏览器窗口大小自行调整,灵活性较高。
  “单元格格边距”则是表明表格边距与该单元格中的正文之间的距离,默认为“1”,你可以按自己的需要设置数值。
  “单元格格间距”时指单元格与单元格之间的距离,默认为“2”,此数值可影响表格的线条格式,当将它设置为“0”时可使表格的线条从下左图那样的双线条变成下右图那样的单线条(边框颜色都是黑色)。

   
   
   
   
   
   

  2)表格的边框
  表格的边框的默认值为“1”。有时为了页面布局需要,我们会关闭表格的边框,也就是将边框值设为“0”。你在FrontPage中编辑网页时,关闭后的边框将以虚线显示,而浏览的时候,边框是不可见的。
  将边框值设为大于“1”时,表格内部的线条仍不变,但四周框线变粗,如下图所示:

   
   
   

  我们还可以设置边框的颜色、亮边框和暗边框的颜色(也就是向光面和背光面的颜色),从而增强表格的三维立体效果。当边框颜色、亮边框和暗边框的颜色都采用默认格式(“自动”),表格的的框线如下左图所示的浮雕效果;若亮边框和暗边框的颜色仍采用默认格式,但边框颜色设为黑色,则表格的的框线变成下中图那样的双线条;若将亮边框设为黄色,暗边框设为红色,表格的框线就呈下右图所示的三维立体效果。在这三个例子中“边框粗细”为“1”,“单元格间距”为“2”。

所有边框颜色为“自动”

边框颜色为黑色

亮边框为黄色,暗边框为红色

   
   
   
   
   
   
   
   
   

  若将边框颜色设为和网页背景色一样,也可消除表格框线。但这样做在FrontPage中也看不见框线,会给调整表格带来困难。
  3)表格背景的设置
  在默认状态(“自动”)下,表格的背景与网页的背景相同。在表格中设置背景可以将表格与网页的背景区分开,使表格的内容更突出。
  在这里不仅可以设置整个表格的背景颜色。而且还可以设置背景图片,首先单击“使用背景图片”前的复选框,然后单击“浏览”找到合适的背景图片,或直接在栏位中输入背景图片的路径和文件名(URL),就可以将图片设置为表格的背景。注意:当图像的尺寸大于表格的尺寸时,图像的多余部分将被截掉;当图像的尺寸小于表格的尺寸时,图像将在表格中被重复充填。
  2、单元格属性
  除了设置整个表格的属性外,还可以对某一个或相邻几个单元格的属性进行设置。
  鼠标使光标定在该单元格中或选中几个单元格,然后单击在“表格” 菜单中选择 “属性”中的“单元格”,就可打开“单元格属性”对话框。

 

  从该对话框可以看出,其中很多项目与“表格属性”对话框是相同的,如边框和背景。但大家要注意的是,如果你为某一单元格设置了属性,那么表格属性将在这个单元格里无效。比如,你设置了表格的背景色,但你又设置了某单元格的背景色,那么单元格背景色将覆盖表格的背景色。
  【例】用图片作为一个表格的背景,但第一行的背景设为黄色

     
     
     
     
     
     
     
     
     

  1)用常用工具栏的“插入表格”按钮在网页上拉出一个合适的表格;
  2)鼠标右击表格处,在退出的快捷菜单中选择“表格属性”,打开“表格属性”设置对话框;
  3)单击“使用背景图片”前的复选框,然后单击“浏览”,在与“选择背景图片”同时出现的“选择文件”对话框中找到合适的背景图片:

  4)单击“确定”后,回到“表格属性”设置对话框,在“使用背景图片”下面的空框中已经有了该图片文件的带路径文件名:

  5)选中第一行的全部单元格,右击后在弹出的快捷菜单中选择“单元格属性”。在“单元格属性”对话框中单击背景颜色框右边的下拉按钮,将背景颜色设为黄色。

  单元格属性设置虽然和表格属性设置大致相同,但有些地方是有区别的:
  1、水平对齐方式
  它确定单元格内文本或图片的水平对齐方式,可以选择右对齐、左对齐、水平居中、两端对齐,默认是左对齐。
  2、垂直对齐方式
  决定单元格内文本或者图片的垂直对齐方式。默认是居中对齐,当利用表格来设计网页时可设置成为“顶边对齐”。
  3、“行(列)跨距”
  是用来设置不同的单元格大小,一般来说我们表格中的单元格是一样大的。如果想得到不同的单元格大小,就需要在这里指定,但容易引起表格的混乱。
  下面再对单元格的尺寸问题加以说明:
  选中“指定宽度”复选框,可指定单元格的宽度。既可指定绝对值(选中“像素”单选框),也可指定与整个表格宽度的百分比(选中“百分比”单选框)。由于指定绝对值不容易控制整个表格的一致性,一般都采用百分比方式。如,选中“百分比”后,在左边的文本框中,键入50%(“%”可以省略),则该单元格所在列的宽度就设定为整个表格宽度的一半。
  “指定高度”:选中该复选框,即可设置整个表格的高度。

【练一练】
  建立一个“版主小档案”的新网页,插入一个表格,并根据自己的实际情况在表格中填入姓名、性别、年龄等相应的内容。根据您自己的喜好对网页和表格进行适当修饰后保存到本地站点中,并通过主页与它链接。

阅读更多
换一批

没有更多推荐了,返回首页