【表格在网页中的灵活运用】 怎么做表格

表格在网页中的灵活运用

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. 摘 要：
网页设计中，页面布局是不可缺少的，表格 就是常用规划网页布局，进行页面元素排版常用的工具之一。

熟练掌握和合理运用表格在网页制作中的使用方法，能够制 作出有吸引力的精美网页。

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

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

二、灵活运用表格的方法 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 设置为：红色；
具体代码如下：