什么是DIV+CSS,DIV与TABLE的属性与区别

DIV+CSS是指使用 DIV代替表格布局,然后利用CSS单独来控制各种布局元素的显示样式 ，而DIV只不过是一种能用来"布局"的元素,Table以及我们经常用到的层都可以用来布局页面,WEB2.0 并不是说不使用table，而是提倡用DIV来实现页面整体"布局"然后什么元素合适就用什么元素，布局不等同于整个页面全部使用DIV。Web标准的目的其实只是创建一个统一的,用于WEB表现层的技术标准,,以便通过不同浏览器,或网络终端设备向用户展示信息。


既然是新的技术标准,我们就应该看看这个新标准是否有值得我们学习的地方,最重要的是是否能让我们更方便,更科学合理的,为我们的网站提供实质性的帮助,提高做站的目的不在于是否能通过所谓的W3C标准! 对自己有用的东西,我们才考虑去利用! 


Table 简单的说就是" 表格",我们可以方便的将它划分为N个单元格,甚至每个单元也可以继续划分, 是一种比较灵活,操作也相对简单的元素,因为表格的这种特有属性,尤其在列表方面,几乎就是Table的强项,我们可以非常方便的将内容整齐的排列.再加上tr td ,完全能满足一般网页布局的需求,这里请大家先注意一点:Table也是Web2.0元素.全部使用Table布局,只要语法,样式.属性书写符合规范,照样能通过W3C标准检测.但是我们也应该清楚的知道一点,表格最优秀的地方其实还是"列表"，所以Table在相当长的一段时间都被网页设计,制作者所钟爱, 一个简单的页面用Table来布局其实是一个比较合适的方法,(还有一个原因可能是因为早期的网站主要是以个人主页之类的形式出现,全站也就那么几个简单页面,空间100M已经是相当富裕了，然而我们看看现在: 空间似乎在以G为单位转变,而且相当一部分个人站长早开始起用服务器!那么一个哪怕是小站的页面也开始以千、万,开始计算,这时候似乎就可以发现Table布局已经开始出现不足! 


虽然表格乃至单元格的背景,边框,全部可以定义特定样式,通过DW等网页编辑软件的 属性栏就可以随意定义,但是不要忘记了一点,那就是相当一部分样式代码全部是包含在网页代码当中, 再加上我们为了制作出特定效果的风格,经常需要将表格层层镶套,然后按照需要划分出N个单元,最后呈现在浏览者面前的也是一个相当完美的页面,但是当你需要修改页面的时候就会非常遗憾的发现这些页面的代码相当复杂,而且杂乱,HTML 加上N多 tr td 再加上我们定义的样式代码，的确是一件脑袋大的事情，而且并不是修改完一页就完成的, 如果考虑到整体风格,我们可能需要逐一修改N多页面(当然了,用CSS控制样式也会比较方便)，只不过与DIV相比,表格的优势也只是体现列表性质的地方布局嘛.我们还是看看下面的DIV(元素)。


DIV，我只能说他是一个容器,一个比Table更简单的元素. 代码形式也就<div>.... </div> 不像Table一样随意划分为几行几列,N个单元格,单独一个DIV在页面其实是一个没有什么多大意义的块状元素而已，所以如果说它有什么优秀的地方,就是它够简洁,代码量少，div也只用于页面整体布局, 因为当你插入一个DIV以后它甚至连边框,背景,都无法显示 ,完全依赖 CSS 来实现 , 至于我们需要划分出几列,显示内容,加上美化图片..... 也是依赖 比如 ul ol li h1 <P> ....之类的元素来实现 ,这就是为什么用DIV布局的原因: 因为它比table更简洁,更适合,甚至也只适合布局: 然后充分发挥其他网页元素的特有属性来实现我们想达到的效果, 换句话说,这就叫发挥每一种元素最优秀的特性, 然后把它用到最适合它用的地方,包括table , 然后再发挥CSS能将内容与样式分离控制的优势来实现一个 ,代码简洁,便于维护,改版,利于收录,搜索,解析的,科学,合理的优秀页面。在web2.0.W3C这些概念,标准，它不过就是一个比表格更合适布局的元素而已。 


Web标准是一个比较复杂,也比较深奥的东西,但是它核心的内容也就那么几点,如果说CSS1.0还不能从实质上使内容与表现分离,那么WEB2.0已经完全有能力实现这一目的: 一个网站有几十,几百,甚至几万甚至几十万页面. 传统的布局方法,样式与代码往往全部包含在页面当中,如果我们改版的话,可以想象需要多少时间? 那是一件比较复杂,烦琐的事情,而且由于样式独立,分散, 我们需要找到自己想修改的地方逐一修正.(注意了.这是在没有使用CSS的情况下,如果你用DW 之类的网页编辑软件,那么你已经不知不觉的开始应用了Web2.0技术) .如果我们把全站的样式表文件全部放到一个独立文件夹,然后与页面链接,会不会更方便维护,更便于修改.同时也减少了我们的整站数据量? 而且一个没有任何样式代码(应该是只有少量代码在页面存在)的页面对于搜索引擎来说是不是更便于收录,抓取? 也更便于浏览器解析?至少提高了我们的页面质量,减少了我们宝贵的维护时间,节省了宝贵的空间资源.而且能大幅度提高浏览器的解析速度 。


Table和DIV一样其实都是Web2.0元素,也都是一种容器, 就其实结构来说,表格布局是 <table> <td><tr>.....<tr><td><table>而DIV的结构更为简洁 <div>...<div>,Table能让我们方便的拆分无数个单元格,而且能方便的列出规则,不规则的标题,内容,版块, 但是遗憾的是最后呈现给我们的是一个相当复杂的页面，而DIV加上WEB2.0提倡的 UL(无序列表元素) OL(有序列表元素) ,以及文本,标题元素 h1 h2.... <P> 再加上 CSS2.0 .几乎完全取代了 <td> <tr> 这些单元格 代码清晰,简洁 .而且页面没有样式代码(class)除外 
<div id="..."> 
<ul id="..."> 
<li>....</li> 
<li>....</li> 
<li>....</li> 
<li>....</li> 
<li>....</li> 
</ul> 
</div> 
如果使用Table那么大家应该知道至少需要划分N个单元格, 如果需要插入img之类就更多,再加上样式代码.... 非常的不简洁,维护起来,表格需要在页面修改,而使用DIV+CSS只需要修改style.css样式文件就可以了,不需要逐页修改.牵一发而动全身..... 所以div+css给网页布局更加方便，也是未来网页设计的趋势。


上海网站建设－天也网络