1.2.2 表格为什么要没落(2)


1.2.2 表格为什么要没落(2)


下面我们尝试用表格布局和XHTML+CSS标准布局来实现它,亲身体验二者的异同,并进行合理的假设和推理。


实现上图布局效果,使用表格布局的代码如下:





<!--[三行三列表格布局,参考示例1-1.html]-->
<table width="778" height="514" border="0" align="
center" cellpadding="0" cellspacing="0">
<tr>
<td height="74" colspan="3" valign="top" bgcolor="#A94E38"></td>
</tr>
<tr>
<td width="160" height="400"  valign="top" bgcolor="#EEEEEE"></td>
<td valign="top"></td>
<td width="160" valign="top" bgcolor="#EEEEEE"></td>
</tr>
<tr>
<td height="50" colspan="3" valign="top" bgcolor="#7082C2"></td>
</tr>
</table>
使用XHTML+CSS布局的代码如下。其中XHTML框架代码:



<!--[三行三列CSS布局,参考示例1-2.html]-->
<div id="wrap">
<div id="header"></div>
<div id="main">
<div id="bar_l"></div>
<div id="content"></div>
<div id="bar_r"></div>
</div>
<div id="footer"></div>
</div>
CSS布局代码:



/*[三行三列CSS布局,参考示例1-2.html]*/
body {/* 定义网页窗口属性,清除页边距,定义居中显示*/
padding:0;
margin:0 auto;
text-align:center;
}
#wrap{/* 定义包含元素属性,固定宽度,定义居中显示*/
width:780px;
margin:0 auto;
}
#header{/* 定义页眉属性 */
width:100%;/* 与父元素同宽 */
height:74px; /* 定义固定高度 */
background:#A94E38; /* 定义背景色 */
color:#F0DFDB; /* 定义字体颜色 */
}
#main {/* 定义主体属性 */
width:100%;
height:400px;
}
#bar_l,#bar_r{/* 定义左右栏属性 */
width:160px;
height:100%;
float:left; /* 浮动显示,可以实现并列分布 */
background:#eee;
overflow:hidden; /* 隐藏超出区域的内容 */
}
#content{ /* 定义中间内容区域属性 */
width:460px;
height:100%;
float:left;
overflow:hidden;
background:#fff;
}
#footer{ /* 定义页脚属性 */
background:#7082C2;
width:100%;
height:50px;
clear:both; /* 清除左右浮动元素 */
}

简单比较,你感觉不到CSS布局的优势,甚至书写的代码比表格布局要多得多。当然这仅是一页框架代码。让我们做一个很现实的假设,如果你所在公司的网站正采用了这种布局,有一天老板让你把左侧通栏宽度改为120像素。OK,你将在传统表格布局的网站中打开所有的页面逐个进行修改,这个数目少则有几十页,多则上千页,劳动强度可想而知。而在CSS布局中只需简单修改一个样式属性就可以。这样一比,你是否有一点想法呢,如果你的网页是用切图实现的,老板这个很简单的想法会给你带来毁灭性打击,你可能需要重新画图、切图。天哪,一切都需从头再来。


这仅是一个假设,实际中的修改会比这更频繁、更多样。不光老板会三番五次的出难题、挑战你的耐性,甚至自己有时都会否定刚刚完成的设计。如果把网页互动和脚本再放入代码之中,此时,你还能感觉表格的神威吗。


当然,表格布局的存在有其必然性,我们不能因此否定表格的功劳。追溯网络发展的早期,HTML还是很贫乏的微型语言,它只是由很少几个元素来描述段落、超链接、列表、标题等。表格并没有被吸收进去,那时的HTML是一种纯结构化标记语言,用来描述网页文档不同的部分,至于这些部分如何显示,HTML很少关注。然而,网络世界的变化是飞速的,随着网站数量的增加,对产生新的网页效果的HTML标签也相应的增加了,网页设计者也就开始有了使用粗体、斜体文字的要求。出于种种压力,像<b>、<s>、<font>和<i>等这样的标签元素就不断的出现在网页代码中。







 
(点击查看大图)



标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2