浅谈网页设计中的表格线.docVIP

浅谈网页设计中的表格线 明光市职业高级中学 曹克柱 从事网页设计、网页教学的人员没有对表格不重视的，尤其是表格线。笔者从事网页设计教学多年，对表格的认识从无到有，从“傻傻的”（是不是应该用“傻瓜式”来形容更好一些？）双线表格，到简单的粗线表格，再到各种精巧的细线表格，花费了大量的时间，对表格的研究至今也只能算是略窥门径，在这里拿出来与广大网页设计爱好者（当然更多的是与广大网页设计初学者）分享。 记得第一次使用表格时，使用的是表格默认的参数，做出来是这样的表格： 当时觉得挺好看的，还双线呢！在Word中就没见过，后来上网看别人做的网站，竟没有一个网站上的表格用双线的，直到后来欣赏过无数的网站后，才觉得当时的表格真的有种“傻傻的”感觉。 其实表格的功能是强大的，深入研究后，才发现原来表格可以这么做！ 简单粗线表格 其实只要在表格属性面板中将“间距”设为0，即可： 但是这种表格线也是不常用的。 由“间距”设为0，才想到原来网页中的表格与WORD中确实不一样（当然表面看是的，本质上是一样的），表格中的线都是双线的，上面的粗线只不过是两条表格线合并成一条而已。 那么在网页设计中表格的宽度与高度的计算就要考虑双线的问题了，对于设计粗略表格（如手工拖动）一般不考虑，一旦设计精确控制表格就要考虑了，否则，并排放置的两个表格，一个比另一个高了2、3个点，就很难看了。 细线表格 网上流行的表格一般是细线的，比较好看，本人研究多年，只发现了以下几种： 使用“Style”参数： 效果如下： 这也是当前比较流行的一种。 利用“间距”作为表格线： 原理：表格线宽设为0，“间距”设为1（当然如果想制作线宽任意的表格线，可设置其他值），表格背景颜色设为蓝色（注意：这就是表格线的颜色），单元格背景颜色设为白色（这个将显示为表格背景颜色）。参数如下： 这里为了节省版面，用的是代码视图，用设计视图也是很容易做到的。 将双线的其中一条设为背景色（如白色）： 设计与效果图如下：（菜单调用：修改|编辑标签） 仔细观察，后设计的细线表格还是与先前的有点区别的，读者自己去发现吧。不过这个“浏览器特定的”好像是与IE有关，在别的浏览器如火狐上就有问题了，笔者试了一下，发现连表格线的颜色都变了： 而且还是双线表格！ 外粗内细的表格 这好像是WORD、EXCEL中典型的表格，但在这里就不太好设计了。笔者只做了一个外3（外框3像素）内2的表格： 其实表格的外框线只有一条可以设置宽度的，内线只能为1。读者可以去试一下，你只能设置外框超粗的表格，如下： 如果想做内框也超粗的表格，好像只能用“细线表格”的第二种方法，利用“间距”，当然内、外框只能一样粗细了。 另外，由于表格双线的影响，网页设计软件Dreamweaver8.0（下面简称DW8，笔者由于教学关系，没有使用高版本）在计算表格高度时，是有问题的（应该说是错误的），如一个宽400像素，高400像素的3行3列表格，利用DW8自动计算表格宽高时，宽度正常，高度就错了，笔者研究后发现整个表格只计了表格上下外框线（各计1）而内框线全部忽略了。 我想这应该是DW8以前版本的一个BUG吧，笔者在使用了DW CS3后发现，表格自动计算高度一项取消了，我想是不是ADOBE公司也没办法解决这个问题！（读者不要有什么想法，笔者不是说ADOBE技术不行，这里应该涉及细线表格的问题而不好计算，就是那“Style”，由于CSS的出现，对于表格高度的计算影响不小。） 关于表格线的内容，其实还有很多，比如立体表格的问题（双线颜色），隐藏表格线的问题（“框架”与“规则” ）等等，由于篇幅有限这里仅谈这几点。 以上内容为笔者边教学边摸索中得来，可能有不当之处，希望各位同行能够给予批评指正！更盼能相互交流：mgzgckz@163.com 。 2011年6月14日