深入探究HTML表格和CSS的优点

tznktg · 发表于 2007-10-10 08:56:41

近来，针对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:11

将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表格吗？请在本文的讨论区分享您的想法。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

深入探究HTML表格和CSS的优点

相关帖子

浏览过的版块