在网站设计中，有两种情况会使用到TABLE：

一是页面布局，现在的网站都有布局。例如OSC的首页布局存在着最顶端的navigation,接下来的banner,和中间最大的screen三块。screen又包含了content和footer两个子块。content中又包含着各种内容模块。

二是数据展示表格。在网页上展示数据集合的时候，势必要用到表格。

然而，现在非常流行的DIV+CSS也可以展现TABLE所能够展现的样式。它们之间存在什么样的竞争关系，我们如何取舍呢？

首先总结一下各自的优缺点，然后再详细解释为什么。

1. 易用性，TABLE>DIV+CSS
2. 浏览器兼容性，TABLE>DIV+CSS
3. 绘制性能，TABLE<DIV+CSS
4. 可读性，TABLE<DIV+CSS
5. 维护性，TABLE<DIV+CSS
6. 扩展性，TABLE<DIV+CSS
7. 内容动态创建，TABLE在IE上无法做到。

TABLE在使用上是最简单的，所有的浏览器都支持TABLE，开发者可以简单的使用TABLE语法便可以做到布局或者表格。而DIV虽然也可以做到，但需要开发者编写大量的CSS与之匹配。浏览器绘制界面的最小单位是块状元素，TABLE作为一个复杂的块状元素，绘制效率要比DIV差。此外，由于TABLE的语法特点，使得它的可读性和扩展性都要比DIV要弱很多。当开发者想要更改网站的风格或者布局的时候，TABLE则需要改动大量的代码，而DIV则只需要调整CSS即可。但在各个浏览器的兼容性上，TABLE又有着优势，不需要额外代码，便可使TABLE在各个浏览器上展示，但DIV需要额外的CSS支持，因为各个浏览器对CSS的支持不同。

在当下各种AJAX和各种JS framework横行的互联网行业，网站内容的动态性越来越突出。用户操作不需要频繁的刷新页面，而是利用AJAX获取后台新内容，并更新局部的DOM TREE。这时候，TABLE就有缺点了。

首先，TABLE的性能比DIV要差，在TABLE中删除和添加元素，需要重新渲染TABLE。其次，TABLE在IE上无法使用JS对其DOM TREE进行改动。这种情况体现在，JS无法向TABLE中添加一个新的TR元素，也无法删除一个TR元素。在各个浏览器上运行以下代码，就可以体会到：

var str = ['<table>','<thead>','<tr>','<td>head</td>',  '</tr>','</thead>','<tbody>','<tr>','<td>body</td>',  '</tr>','</tbody>','</table>'
].join('');
document.body.innerHTML=str;
var list = document.getElementsByTagName('tr');
var htd = document.createElement('td');
htd.innerHTML='new head';
// insert a new td into head
list[0].appendChild(htd);
// remove the new head
list[0].removeChild(htd);var htr = document.createElement('tr');
htr.innerHTML="<td>new head row</td>";
// insert a new td into head
list[0].parentNode.appendChild(htr);
// remove the new head
list[0].parentNode.removeChild(htr);var btd = document.createElement('td');
btd.innerHTML='new body';
// insert a new td into body
list[1].appendChild(btd);
// remove the new body
list[1].removeChild(btd);var btr = document.createElement('tr');
btr.innerHTML="<td>new body row</td>";
// insert a new td into body
list[1].parentNode.appendChild(btr);
// remove the new body
list[1].parentNode.removeChild(btr);

从使用经验上来讲，一般简单清晰的布局使用DIV，复杂嵌套的布局使用TABLE。以OSC首页的布局。OSC的布局由3块组成，Nav，Banner和Screen，而Screen又由Content和Footer组成。这种简单清晰的布局，OSC使用了DIV来实现每一个块。但Content下面的内容分类众多，排版复杂，所以用了TABLE，也混用了DIV。在数据集合展示上，比较流行的是条目状展示。这时候一般使用TABLE或者UL。UL也是条状布局的一种常用选择。