Div与Table，我们应正确对待

   近日，在着手做界面原型的设计，其中在div与table的选择上，我是换来又换去，于是对二者进行了一下比较。

 

   我的观点是两者没有好与坏的区别，而是各有所长。

   在这个极度推崇div+css的时代，人们对于table有了一些偏，就我个人而言，我觉得两者是各有优点。

 

  从用途上来说，div用于布局，table用于显示数据。

  当然div不仅仅用于布局，也可以用来显示数据，而table也同样可以用于布局和显示数据；这么说是因为div在布局方面应用要好一些，而table在显示表格数据方面比较好一些。

 

  为什么div的布局比table布局要好？

  div是一个轻量级的web标签，所以它代码精简，加上和css样式的结合，div布局更加美观和多样化；反之，table要死板很多，因为它本身就自带了很多格式，而我们布局不需要这些格式，于是就有些强加于人的嫌疑（强加了一些代码和格式，导致代码臃肿），而且我们也知道，table的确没有div美观。

 

  既然table有这么多缺点，那它是怎么在显示表格数据上体现优势的呢？

  说这个问题之前，我想先说一句，我认为大家对于table有一个误解，大家都知道table打开网站的速度不如div快，但是这是针对一些显示简单的数据而言，比如单纯的这是显示几个字，这是table的<tr><td>就显得很多余，造成代码冗余，于是打开网页的速度自然变慢了。

 

   但是在显示表格数据时，table则正好体现出了它的优势，这时这些<tr><td>不再多余，而是必须，然而正是因为table已经为我们提供了一些基本样式的封装，所以我们也省了不少力气。

  

   再回头来说如果用div显示表格数据的情况，用div显示成表格形式，你也需要写一些类似于<tr><td>的标签，而且还要为其添加样式，这些工作就已经使得整体的代码跟table的代码量不相上下（所以两者的速度此时不相上下），但是相比来说，使用table的工作量会更少。

 

  我做了一个简单的测试，同样加载1W条数据（div和table都没有使用样式），测试页面加载时间（在IE9下测试），使用table结果是1.6s左右，不加样式div的结果是1.3s左右，添加样式后，即将div的样式做成表格的效果，则div的加载时间是1.6s左右。（ps：测试代码可见附件）

 

  但是我们知道div有它独特的好处，样式的可重用，美观这个是需要table来借鉴的，所以我比较支持两者一起使用，在table中添加div，将两者的优点都发挥出来，达到双赢。 

 

  当然，除了上面的两点，div和table还有它们各自其他的优缺点，下面我们来看一下这二者都有什么优缺点：

div：

优点:

  1.轻量级、代码精简，div是一个轻量级的web标签（它自身所带的只有换行格式），所以它的代码精简。

  2.可重复利用样式，比如一个网页中需要用到2-3个Div，用户只需在css里定义一个样式就可同时对这几个div同时添加样式。

  3.打开网页速度快，因为代码精简，所以服务器读取代码时间短，相比较table而言要快一些。

 

缺点（div也不是万能的哈）：

  1.可观性差，用户在编辑的时候并不能立即看到编辑效果，需要预览才可看到效果。

  2.可读性差，网站代码几乎全是div /div"而且在代码页面看不到此样式。必须要进css样式才可看到定义样式。

  3.操作繁琐，相对于初入门的用户，对代码不是很了解的人来说，操作起来很是麻烦。

  4.兼容性差，原因是CSS（样式表）并不是所有浏览器的所有版本都支持的很好，比如在IE和FireFox下显示不一致等，这也是有些时候我们使用table来进行定位的原因。

 

table:

优点：

  1.可观性好，当用户插入一个Table的时候就可以立即看到效果。

  2.简单方便，适合初入门的用户操作，用表格不需要过多了解代码，只需插入表格，然后设置长宽，对齐方式，表格属性等等。

  3.可读性好，稍懂些html语言的都可以看的懂，无非就是"table /table、td /td、tr /tr"等等。

 

缺点：

  1.代码冗余，"table tr td /td /tr /table"这是构成一个表格的最基本元素（此为一行一列的表格）。

  2.打开网页速度慢，由于代码太多，所以导致网站打开速慢。

  3.样式死板，虽然table也可以使用css样式，但是它总是先要穿上一层自己的盔甲，显得格外的死板沉重。

 

附件下载地址：http://download.csdn.net/detail/zhaodandan19910306/4256095