使用html表格和CSS进行混合网页设计

发布时间：2011-07-14 22:30:19作者：知识屋

　最近一篇关于桢(Frames)的文章让我开始考虑网页设计的当前状态。不久前公布了许多的网页标准。使用CSS以及XHTML开发网页程序的优点正日益得到人们的称颂，但仍有许多的开发者团体更依赖于使用HTML表格来控制页面的输出。让我们来考虑一下使用HTML表格和使用CSS方法的各自优点。

　　老方法未必不好

　　当我刚开始进行网页设计时，我吃惊于HTML表格的强大和弹性。它们可以被无穷嵌套以达到预期的设计效果，而原先空白表格无法在浏览器中正确显示的问题则可以通过空白GIF图片予以修正。但是HTML和表格背后的意义并不在于外观。

　　HTML表格用于设计呈现表格式的数据。所以，如果你希望数据看起来像在Excel中那样，那么使用表格就是最佳答案。除了毫不费力的应付这些数据，早年的网页开发者们迅速发现了表格还是控制网页输出与外观的绝佳办法。

　　将一个网页设计切割成不同的表格是很简单的事情，但是要手工编码完成同样的输出可就有些麻烦。另外，网页设计中无数嵌套的表格在需要改变时就成了令人头痛的梦魇，好在类似Frontpage这样的可视化设计工具还可以助你一臂之力。要展示基于表格的输出，有个好方法就是使用一个示例。

　　表格设计可以提供我们期望的设计结果,但是最终的HTML代码就有点不好理解了。使用表格的一个有利方面是众多浏览器全都支持，包括类似IE 5.0这样的古老浏览器。这一点和基于CSS的设计明显不同，但是CSS有一些不同的优点。

　　突破新的应用

　　几年之前，当CSS刚刚成型之时，网页标准就开始推行了。它的建立基于HTML被设计用于处理网页内容的事实。这意味着，它不是设计用于处理数据的。CSS继承了这个设计原理，允许你很容易的将设计(HTML)和外观(CSS)区分开来。

　　首先，CSS是用于处理文本的外观，比如颜色和字体，不过逐渐成长为支持各种外观因素。除了简化文本外观以及颜色外，CSS还提供了布局功能。基于CSS的输出设计有个问题就是浏览器的支持。浏览器的支持正在慢慢达到期望值，但是古老的浏览器永远也不可能支持。在支持有限的情况下，又有多种不同的工作区和修改版本。

　　让我们来看个使用CSS开发的HTML示例，和使用HTML表格的做个对比。在列表B中的HTML源代码，其浏览外观和使用DIV标记定义页面主要区域(题头，菜单，内容和页脚)的效果完全相同。另外，菜单区使用了一个未排序的列表。CSS被包含在HTML的“head”部分中。它定义了不同的DIV标记的外观规则。这包含了色彩和空白。

　　使用CSS输出的最终结果是设计更简单，因为内容将由HTML来控制(没有了表格，HTML源代码阅读起来也简单多了)，而外观则简单的交由CSS来控制。因为对CSS的支持各个浏览器有些差异，所以你必须努力不懈的进行测试，并部署许多的CSS修改以适应已知的浏览器差异。至于这些修改(以及如何在老式浏览器中工作)，则不在本文的讨论范围之内了。

　　其他设计方法

　　HTML表格和CSS并不是控制网页输出的唯一方法。你也可以使用Macromedia Flash来提供一个动态接口。不过，你总该另外提供一个HTML/CSS的通道，以服务那些浏览器不支持 FLASH的用户，以及那些不注意FLASH接口的用户。

　　是否该采用混合之道?

　　我最近已经参与了多个项目，采用混合HTML表格和CSS的设计方法。这使得适应当今为数众多的浏览器成为一件容易的事情。我也参与了一个特别的项目，使用纯粹的CSS设计，但这是一个企业内部网程序，由客户浏览器进行控制，所以设计起来比较容易。

　　在眼下的这种网页情况下，我推荐混合的设计模式，CSS可用于控制一个页面中的绝大多数外观(字体，大小，颜色，等等)，而表格则可以辅助输出布局——特别在CSS的输出布局功能没有得到广泛支持时。

本文来源：电脑技术吧[http://www.zhishiwu.com]

（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）