来源：http://www.enet.com.cn/article/2010/0106/A20100106596840.shtml

使用Table布局页面为什么是不明智的？

大家看到标题，不要误解认为在页面中不能使用Table，而是可以使用Table，但是尽量不要用Table去布局页面，为什么这么说呢，因为使用Table布局页面会使页面失去灵活性，怎么个灵活法呢，比如今天你好不容易做出来的页面，第二天老板说我不喜欢登录模块放到右边，还是放到左边，通知板块放到右侧去，页面风格最好一个月换一种，如果遇到这种老板，提出这种要求，并且你的页面是用Table布局的，那么你会崩溃的，工作量那是大大滴~，如果不相信的话，你们自己可以找个页面，用Table布局出来，然后变换板块和风格，你就会体会到Table布局的不灵活性，这是为什么呢，因为Table的诞生是为存储数据用的，功能和Execel差不多，不是用来布局用的，只不过后来大家发现用Table可以把想放的页面元素，比如图片，放到任何自己想放的地方，且做出来的页面可以兼容多种浏览器，于是Table就承担起了布局页面的重担，这一做就是好几年… …直到Web2.0时代的到来，Table才从布局页面的工作中逐渐解脱，专心的去存储数据^_^

既然Table是为存储数据诞生的，那谁的诞生是为了页面布局呢？

答案就是:DIV，DIV就是为布局页面而诞生的，只不过一直不被人认同，原因就是DIV去布局页面需要CSS的配合，使用比较繁琐，还不如Table拖拖拽拽页面就布局OK了，感觉还不如Table方便，从而DIV被人们放置在一个无人问津的昏暗角落里，暗暗的等待着伯乐的出现，直到2003年美国加州Scott Design公司参加了在旧金山举办的有关网页排版和设计的一个研讨会上的演讲，使DIV看到了阳光，走出了阴霾… …

说了那么多，我们对比一下Table布局页面和DIV布局页面的优缺点

使用表格进行页面布局会带来很多问题：

* 把格式数据混入你的内容中。这使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息,带宽并非免费。

* 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。

* 这还使我们保持整个站点的视觉的一致性极难，花费也极高。

* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。

而使用CSS进行网页布局，它会：

* 使你的页面载入得更快

* 降低你的流量费用

* 让你在修改设计时更有效率而代价更低

* 帮助你的整个站点保持视觉的一致性

* 让你的站点可以更好地被搜索引擎找到

* 使你的站点对浏览者和浏览器更具亲和力

* 在世界上越来越多人采用 Web 标准时，它还能 提高你的职场竞争实力 (事实上也就是降低失业的风险)。

网上有一篇文章，转过来，文章着重介绍DIV三点优势,也许看完文章后，就像社区元老heflyaway说的感觉作者比较迷恋Table，每篇文章都不可避免的带有个人色彩，而转出来的目的，其实就是想给大家降降DIV+CSS的温度，免得“走火入魔”，视DIV+CSS是为万能的，如果想学好CSS布局页面，就要从多个方面看它，好了，不多说了，下面是作者对CSS布局页面的三点优势及理解：

1、内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。

2、改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。

3、搜索引擎更友好，排名更容易靠前。

第一点、内容和形式分离

网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。

这个是DIV+CSS技术最显著的特点，也是CSS存在的根源。完全的颠覆现在传统（table）网页设计的技术。所有现在用table制作的内容，都可以用CSS来解决掉，而且解决的更完美，更强大。不需要大家再表格套表格，让生成的网页文件大小更精简，更小。table时代，一个页面表格达到10个以上是非常普遍的事情，但是现在用DIV+CSS，一个table都可以不用，就完全达到之前的效果，这就直接导致网页文件大小比使用table时减少50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快，而且用div+CSS时，不像以往使用table时，必须把全部table读取完了才显示页面内容，现在是可以读一个div就显示一个效果，大家打开网页不用等。好处真是明显而强大。

这个优点的确是显著的，凡是使用传统table建的网页，内容多的话，有时候达到30K左右都有可能，文件打了打开时，肯定就有0.0几秒的延迟。使用DIV+CSS，你前台打开看到的全是直接内容，CSS文件都是导入链接的，是另一个文件，根本和HTML文件大小没关系，这种生成的HTML文件，一个也就10K左右大小。

第二点，改版网站更简单容易了

不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。

DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站HTML页面，只需要重新写CSS，再用新CSS覆盖以前的CSS就可以实现改版了。方便吧。

第三点，搜索引擎更友好，确实能够对SEO起到一定的帮助。

通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。

综上所述，个人感觉DIV+CSS不能太迷信它的很好很强大，它作为制作网页，美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时费力，对于全国中小型网站长来说，真的不太适合。我个人觉得用table+DIV+CSS是最好的组合，也是最省时省力的办法。

还需要再说明一下，本节讲得是Table布局页面和CSS布局页面的问题，讨论的是“布局页面”上用谁更好，并不是说在CSS布局的页面内不能用Table，真正厉害的人物是DIV、Table、CSS用得恰到好处，他们三个各做各的事情，DIV布局页面，Table存储数据，CSS给页面穿衣服！

海岸山主页的灵感很随意，因为这本来就是一个很随意的网站，只要看了简洁生动。

————————————————————————————————————————————————

地址：http://www.haianshan.com

第一个元素是表格的caption，它基本上用做表格的标题。尽管这不是必须有的元素，但是尽可能使用caption总是好的。另一个有用的元素是表格的summary。summary属性可以应用于表格标签，用来描述表格的内容。与image的all文本相似，summary应该总结表格中的数据，编写得出色的summary可以减少用户阅读表格内容的需要。

行和列标题应该使用th标记而不是td，但是如果某些内容既是标题又是数据，那么它仍然应该使用td。表格标题可以设置值为rOW或col的scope属性，定义它们是行标题还是列标题。它们还可以设置值rowgroup或colgroup，表示它们与多行或多列相关。

<thead>
<tr>
<th id=”playlistP0sHead” scope=”col”>Playllst Position</th>
<th scope=”col”>Tzack Name</th>
<th scope=”col”>Aztist</th>
<th scope=”col”>Album</th>
<Itr>
</thead>

虽然tr元素使开发人员能够对整行应用样式，但是很难对整列应用样式。为了解决这个问题，W3C引入了colgroup和col元素。colgroup能够对使用col元素定义的一个或多个列进行分组。不幸的是，支持col和colgroup元素的样式的浏览器并不多。

<colgroup>
<col ld=”P1ayllstC01″/>
<col id=”trackCol”/>
<col id=”aztLstCol”/>
<col id=”albumCol”/>
</colgroup>

9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。
* 不赞成 – treehead treerow treecell { }
* 好一点，但还是不行(参照下一条) – treehead > treerow > treecell { }