HTML中的table和div

转载自牛头大魔王·力破千军和yang_zongjun的专栏

HTML中的table和div的优缺点

由于html文件中的table标签的浏览速度较慢，所以，使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢。因为table是中的内容是自适应的，为了自适应，它要计算嵌套最深的节点以满足自适应，所以有可能会有一断时间出现空白才显示。所以是会有问题的。
使用DIV的方法布局网页框架的优点：可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的css文件进行随意的修改和更新；缺点：每个div容器都需要定义css样式来控制，制作过程相比table方式要复杂。现在的网页越来越倾向于使用DIV的方法来布局网页了。

论代码的复杂程度来说，不管table还是div都是很冗长的。css的网页比table的网页体积也许要小一点，但是复杂程度相差不大。网络访问上css网页稍微会快点，但是总体的用户体验感觉差别不是很大。搜索引擎优化方面，我曾经用过cms数据采集，里面的程序用的HtmlParser类库解析html网页，然后将元素中的数据用java dom转化为xml导入到数据库。这个类似蜘蛛的程序在爬行的时候table数据和div中数据爬行起来效率是一样的，现在的大型搜索引擎不会因为div这种趋势而抛弃table我认为，如果一个网页架构的不好，不论table还是div都会被引擎所抛弃。
　但是网上的大部分人对于div+css的开发时间上是table的很多倍，而且还一个问题，网友说了，需要写很多代码用于适应不同浏览器，这个我现在维护的公司网站在早期也有这个问题。其实这个问题是是否熟悉div的问题，如果一个熟悉div的话应该不会比table慢太多。
　 "W3C规范中说Table是用来传数据的，但并没有指出Table不可以用来布局。搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

所以，以后不能随便采用大公司网站的布局，会出问题的。

汇总：

table优点：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题；内容可自适应；在搜索引擎排名能靠前

table缺点：如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table套table，会害死维护人员的

div优点：内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显

div和table的范例

div

<!DOCTYPE html>
<html>  <head>  <meta charset="utf-8">  <title>div布局</title>  <style type="text/css">  body{  margin: 0px;  }  #container{  width: 100%;  height: 950px;  background-color: gray;  }  #heading{  width: 100%;  height: 10%;  background-color: aqua;  }  #content_menu{  width: 30%;  height: 80%;  background-color: bisque;  float: left;  }  #content_body{  width: 70%;  height: 80%;  background-color: #7FFF00;  float: left;  }  div#footing{  width: 100%;  height: 10%;  background-color: red;  clear: both;  }  </style>  </head>  <body>  <div id="container">  <div id="heading">头部</div>  <div id="content_menu">内容菜单</div>  <div id="content_body" >内容主体</div>  <div id="footing">底部</div>  </div>  </body>
</html>

table

<!DOCTYPE html>
<html>  <head>  <meta charset="utf-8">  <title>table布居</title>  </head>  <body marginheight="0" marginwidth="0">  <table width="100%" height="950px" style="background-color: gray;">  <tr>  <!--colspan是合并单元格的意思-->  <td colspan="3" width="100%" height="10%" bgcolor="#00FFFF">这是头部</td>  </tr>  <tr>  <td width="20%" height="80%" bgcolor="#7FFF00">  <ol>  <li>ios</li>  <li>android</li>  <li>html</li>  </ol>  </td>  <td width="60%" height="80%" bgcolor="brown">主体</td>  <td width="20%" height="80%" bgcolor="red">右</td>  </tr>  <tr>  <td colspan="3" width="100%" height="10%" bgcolor="darkblue">底部</td>  </tr>  </table>  </body>
</html>

转载于:https://www.cnblogs.com/comefuture/p/8305991.html