站长论坛

标题: 深入探究HTML表格和CSS的优点 [打印本页]

作者: tznktg 时间: 2007-10-10 08:56
标题: 深入探究HTML表格和CSS的优点
近来，针对Web标准进行了很多宣传。Web开发应用软件（如CSS和XHTML）的优点大受赞赏。现在有很多程序开发员依赖HTML表格进行设计。本文我们将详细探究HTML表格和CSS方法的优点。
过去的WEB开发

刚开始涉足Web开发时，我就惊讶HTML表格的强大功能和灵活性。它们可被无穷嵌套以产生希望的结果，并且在浏览器上不显示空表单元。

HTML表格用于显示“扁平”数据。很显然，如果需要显示类似于Excel的数据，表格将是很好的选择。当HTML表格用于处理数据没有任何问题后，早期的Web设计者就很快将它应用到页面的设计和排版。

将页面设计成表格单元的过程很容易，但是进行手工处理的时候则需要谨慎对待。另外，Web页面中很多表格进行嵌套时，处理很麻烦，此时可以使用可视化工具，如FrontPage。下面给出了一个基于表格进行设计的例子。

例A给出的例子创建了标题、页脚、简单的菜单和内容板块。将一个大表格嵌入到整个页面，整个页面上包含很多用于单个标题、页脚、菜单和内容区域的小表格。页面的每个区域的背景颜色根据目的性而不同。

<html><head>
<title>TechRepublic.com - Table layout</title>
</head><body>
<table border="0" cellpadding="0" cellspacing="0">
<tr height="20" bgcolor="black">
<td>
<table border="0" cellpadding="0" cellspacing="0" width="500">
<tr height="50" bgcolor="red">
<td>Header</td>
</tr></table></td></tr><tr>
<table border="0" cellpadding="0" cellspacing="0" width="500">
<trbgcolor="silver">
<td>Menu Item 1</td>
<td>Menu Item 2</td>
<td>Menu Item 3</td>
</tr></table></tr><tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="500">
<tr height="450" bgcolor="yellow">
<td>Content</td></tr></table></td></tr><tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="500">
<tr height="50" bgcolor="green">
<td>Footer</td>
</tr></table></td></tr></table></body></html>表格设计完成并达到预期的结果，但是HTML页面显得有些含糊。使用表格的一个好处则是浏览器兼容性很好，包括很古老的浏览器如Internet Explorer 5.0也能显示。这不是基于CSS设计的例子，但是CSS具有其他优势。

CSS与HTML的出现

几年前，当CSS开始出现的时候，Web标准也紧跟出现。它建立在采用HTML处理Web页面内容，即意味着它不是仅仅用于数据显示。

起初，CSS用于操作颜色和字体等文本内容，但是后来逐渐支持所有东西。除了满足文本和颜色显示简单化以外，CSS也提供了设计特征。基于CSS设计网页的问题是浏览器支持的问题。现在的浏览器在逐步开始支持它，但是那些老浏览器则不支持。

作者: tznktg 时间: 2007-10-10 08:57
将CSS开发的HTML与HTML表格进行比较。例B的代码显示了使用DIV标签定义页面主要区域（标题、菜单、内容和页脚）。另外，菜单区域使用了无序列表。CSS包含在HTML头部分。它为不同的DIV标签指定显示规则。这些不同的DIV标签包括颜色和页边距。

<html><head>
<title>TechRepublic.com - CSS layout</title>
<style type="text/css">
#header {position:absolute;
margin: 0;
background: red;
width: 500;
height: 25;
}
#menu {position:absolute;
margin-top: 20;
background: silver;
width: 500;
height: 25;
}
#menu ul {
margin: 0;
list-style: none;
text-align: center;
}
#menu ulli {
display: inline;
padding: 0 00 23px;
}
#content {position:absolute;
margin-top: 45;
background: yellow;
width: 500;
height: 450;
}
#footer {position:absolute;
margin-top: 490;
width: 500;
background: green;
}
</style></head><body>
<div id="header">
header
</div>
<div id ="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
<div id="content">
body
</div>
<div id="footer">
footer
</div></body></html>CSS设计的优点是便于维护，因为其内容由HTML控制，并且其显示也易于维护。因为CSS对浏览器的支持有些不一致，所以需要不停地测试，使用CSS hacks可以调和不同的浏览器。

进行Web设计不仅仅只是HTML表格和CSS两种方式，如可以使用Macromedia Flash设计动态界面。但是，应该为浏览器不支持flash的用户或不关心flash界面的用户提供一个可选方案（HTML或CSS ）。

杂合方法

我现在采用HTML表格和CSS杂合的方法开发一些项目。杂合方法有利于不同浏览器之间进行调和。

在Web现阶段，我倾向于使用杂合方式进行Web 设计，此时CSS可用于控制页面大多数元素的显示（字体、大小、颜色等等）。而表格则能完成CSS不支持的内容。

您将采用什么方法进行Web页面设计呢？喜欢CSS和HTML表格吗？请在本文的讨论区分享您的想法。

欢迎光临站长论坛 (http://www.tzlink.com/bbs/)