表格在网页中的灵活运用

王占成

摘 要： 网页设计中，页面布局是不可缺少的，表格就是常用规划网页布局，进行页面元素排版常用的工具之一。熟练掌握和合理运用表格在网页制作中的使用方法，能够制作出有吸引力的精美网页。

关键词： 网页制作 网页布局 表格 嵌套 表格布局

一、网页设计中表格的作用与地位

表格是网页设计者制作网页不可缺少的元素，它以简捷明了和高效的方式将图片、文本、数据和表单等元素有序地显示在页面上，使不规则的内容有了条理性，使网页的布局更加美观。

从而让我们可以设计出更漂亮的页面，使用表格排版布局的页面在不同平台、不同分辨率的浏览器里都能保持原有布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。

二、灵活运用表格的方法

1.圆角表格的制作

为了美化网页，经常需要在表格的四角加上圆角，避免直接使用直角表格而显得过于呆板，从而使网页的整体效果更加美观。给大家介绍一个最常用也是最通用的方法，能很好地适应各种浏览器和不同分辨率。

（1）利用Photoshop等制图软件绘制的圆角矩形，再用“矩形选框工具”选取左上角的圆角部分，复制选框内区域到剪切板内。

（2）此时不要取消选区，直接新建一副画布，Photoshop会根据剪切板内选区大小自动设置新建画布的大小。将复制内容粘贴到当前画布内，另存为网页WEB格式。

（3）重复步骤（2），分别用“水平翻转”和“垂直翻转”工具，依次保存所需其他3个方向的圆角图片。

（4）打开Dreamweaver制作软，插入一个“1”行“3”列的表格，设置其单元格的间距、边距和边框属性值都为“0”。在第一列插入图片1.gif，第三列插入图片2.gif，设置单元格的高度和宽度与图片一致。设置第二列的背景颜色与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并切换到代码视图，删除这行中的字符“ ；”，当插入内容高度小于当前高度则会撑大表格。用同样的方法制作下半部分的圆角表格。

（5）在步骤（4）插入的两个表格中间再插入一个“1”行“3”列的表格，单元格的间距、边距和边框属性值都为“0”，表格的宽度与上2个表格同宽。设置第1列和第3列背景颜色为与圆角图片同色，宽度为“1”像素，并切换到代码视图，删除第1、3列中的字符“ ；”。此时，圆角表格就做好了，接下来在第2列中输入显示的文字信息即可，也可以适当设置一些文字显示效果。

2.表格的嵌套

在网页布局中合理运用嵌套表格也是一种实用的方法，嵌套表格是为了达到特殊的效果而在表格中再插入一个表格。

网页的排版有时会很复杂，在外部需要一个总表格控制总体布局，而内部排版的细节如果也通过总表格实现，就容易引起行高列宽的冲突，给表格的制作带来困难。

所以在使用表格布局页面的时候应该总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入总表格的相应位置中，各司其职，互不冲突。但是表格的嵌套层次尽量要少，嵌套越复杂、嵌套层次越多的表格加载速度越慢。举一个小例子给大家视觉上的冲击。

例：利用嵌套表格制作图4页面排版效果

（1）插入一个“1”行“1”列的表格一，宽度“200”像素，高度“100%”，边框为“0”，单元格间距为“5”，单元格边距为5像素。表格背景颜色为：“#98FEEA”。

（2）将光标放置再表格一内，设置单元格的背景颜色为：“#CCECFF”。

（3）在表格一内插入表格二，“4”行“1”列，宽度“100%”，高度“100%”，边框为“0”，单元格边距为“0”，单元格间距为“2”像素。

（4）在表格二的各个单元格中依次插入4个导航按钮图片。

3.利用表格制作分割线的方法

在进行网页版面设计时，有时会用到分割线，很多人会用图片实现，但是使用图片会过于繁琐。那么使用表格就能够很好地解决。首先在Dreamweaver的设计视图中插入一个“1”行“1”列的表格，然后切换到源代码视窗进行修改。表格宽度设置“100%”，设置其cellspacing、cellspadding和Border属性值都为“0”；height设置“1”像素。bgcolor设置为：红色；具体代码如下：

 ；

在上述代码中删除“ ；”，我们制作的其实就是一个高为“1”像素的表格，表格内无其他任何内容，如果需要换颜色则只需改变表格的背景颜色的值即可。同理，使用该方法也可以实现在页面内显示竖线或竖的分割线，只需要将表格的宽度设为“1”像素，高度根据所需竖线长度而定。

4.控制表格边框显示和隐藏的方法

用表格显示内容时，经常会做一些特殊处理或将表格显示样式调整修饰后显示。那么表格属性中自带2个属性就可以轻松实现控制表格边框的显示和隐藏。从而实现表格的特殊格式化，起到美化网页外观效果。主要使用下面两个属性。

（1）控制表格的上下左右边框的显示与隐藏的属性为：Frame。具体参数如下：

不显示表格的边框：Frame=“void”

显示表格的左右边框：Frame=“vsides”

显示表格的上下边框：Frame=“hsides”

显示表格的左边框：Frame=“his”

显示表格的右边框：Frame=“rhs”

显示表格的上边框：Frame=“above”

显示表格的下边框：Frame=“below”

当Frame属性不设置的时候，默认显示表格的上下左右边框。

（2）控制表格内部边框显示与隐藏的属性为：Rules。具体参数如下：

不显示内部边框：Rules=”None”

只显示列边框：Rules=”cols”

只显示行边框：Rules=”rows”

只显示介于行、列间的边框：Rules=”Groups”

显示所有内部边框：Rules=”All”

当Rules属性不设置的时候，默认显示表格的所有内部边框。

5.表格的布局排版原则

在网页制作时，一般采用从整体到局部、从上到下和从左到右的顺序进行表格的布局及网页内容的添加。

从网页下载速度来讲，浏览器只有将整个表格的结构都分析清楚后，才会将表格中的信息显示在屏幕上，所以如果不是特殊需求，则尽量不使用过大的表格，更不要过多地使用表格嵌套。网页制作初学者们一般都会犯这样的错误，用一个大的表格排版布局整张网页。如果页面内图像、视频等元素较多，则会明显降低页面访问及显示速度，网页的访问者往往会失去等待的耐心而放弃浏览这个网页。

三、结语

通过以上使用表格的方法，我们更深刻地认识到使用表格进行网页的布局设计时除了熟悉表格的基本设置方法以外，还应该学会表格运用上的一些技巧，只有将这些设计技巧合理地运用到网页设计中，才能更好地发挥表格的作用，达到内容与形式的完美结合，增强网站、网页的吸引力，制作出布局合理、页面美观、赏心悦目、有吸引力的网页。

参考文献：

[1]葛艳玲.网页制作基础教程（Dreamweaver CS3）[M].电子工业出版社，2010.

[2]许昭霞，段欣.网页制作（第2版）[M].电子工业出版社，2009.