HTML中的table和div – I_noname

转载自牛头大魔王专栏，突破千军万马

HTML中table和div的优缺点

由于html文件中table标签的浏览速度较慢，使用嵌套表格的方法来布局网页框架会减慢网页的浏览速度。因为表格中的内容是自适应的，为了进行自适应，需要计算出嵌套最深的节点才能满足自适应，所以在显示之前可能会有间隙。所以会有问题。

使用DIV方式布局网页框架的优点：可以通过CSS样式为框架设置强大的属性，任意定位网页的一部分，生成的页面浏览速度更快。CSS文件可以随意修改和更新；缺点：每个div容器都需要定义CSS样式来控制，制作过程比table方法复杂。现在的网页越来越倾向于使用DIV的方式来布局网页。

就代码的复杂度而言，table 和 div 都非常冗长。css网页可能比table网页小一点，但复杂度相差不大。网络访问 CSS 网页会稍微快一些，但整体用户体验感觉差别不大。在搜索引擎优化方面，我使用过cms数据采集。程序中使用的类库解析html网页，然后使用java dom将元素中的数据转换成xml并导入数据库。这个类似蜘蛛的程序爬取表格数据和div中的数据，效率是一样的。今天的大型搜索引擎不会因为div的趋势而弃表。我认为如果一个网页的结构很差，无论表格中的任何一个 div 都会被引擎丢弃。

但是，网上大部分人在table上花费了很多倍于div+css的开发时间，还有一个问题。网友表示需要写很多代码来适应不同的浏览器。我现在维护的这个公司网站也早有这个问题。其实问题是你是否熟悉div。如果你熟悉 div，应该不会比 table 慢多少。

“W3C规范说Table是用来传输数据的，但没有指出Table不能用于布局。搜索引擎对网页的索引和排序，显然不是用表格和CSS定位来衡量的，这也是为什么很多传统的表格都使用的原因。为什么做的网站在搜索结果中排名靠前，但是很多用CSS和web标准做的网页排名仍然很低。因为对于搜索引擎来说，诸如此类的因素网站结构、内容以及相关的网站链接永远是网站的因素，优化最重要的指标。

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

概括：

表优势：开发时间短（使用DW开发快）；纯表格浏览器不会有兼容性问题；内容可以自适应；可以在搜索引擎中排名靠前

table的缺点：如果布局发生变化，需要重新开发；如果表中有div ul，则可能存在浏览器兼容性问题；加载速度慢；表设置表，这将杀死维护者

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

div 和 table 的例子

div

  
  
      

          
          
          
            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;  
            }  
          
      
      
        
  
            
头部
  
            
内容菜单
  
            
内容主体
  
            
底部
  
        
  
      
  

桌子

  
  
      
          
          
      
      
        
  
            
  
                  
                
这是头部
  
            
  
            
  
                
  

                    
  
                        
ios
  
                        
android
  
                        
html
  
                    
  
                
  
                
主体
  
                
右
  
            
  
            
  
                
底部