62,050
社区成员
发帖
与我相关
我的任务
分享div+css和table布局的讨论，欢迎拍砖！
其实从本身来讲，这两种布局没有差异，原因很简单，DIV是一种元素容器，table也是一种元素容器，两者能有什么差别呢，真有差别的话也只是table多了个<tr>和<td>。
但DIV可以加CSS，table一样可以加CSS。
那么，为什么现在人们如此鼓吹div+css，一味排斥传统的table布局呢，我觉得，无非是两种种情况。
1: 设计师用table布局就过于依赖table，而不用css,但这只能说作为设计人员的问题，不能说是table布局的错！
2: 人们追逐潮流，一味虚荣、比较的心态！
下面我就针对第2个问题，来探讨下div+css和table布局的优劣。
首先，说速度。
这是一味鼓吹div+css的人最善于比较的。难道table布局速度真的就慢？
当然不是，我们知道，我们打开一个网址，实际上是去一个远程服务器上取得一个文件，那么在带宽有限的情况，决定速度的唯一问题就是获取文件的大小，文件越大，传输时间越长！
一旦文件下载完成到本地，浏览器打开网页都是一瞬间的，以现在电脑CPU的处理速度，可以说再复杂的表格嵌套，那么有10层，也是在一瞬间打开。再者而且难道div就没有嵌套了吗？可以毫不怀疑的说,用table有多少嵌套,div也要有多少嵌套。只不过还是上面所说的table多了一个<tr>和<td>，
看似页面文件字节是大了些。但是不要忘了纯粹的div要大量的css去修饰，css也是要占用字节的。
就拿一个简单的例子说，目前的垂直居中对于所有的浏览器来说，table的td的垂直居中都是通用的。显示上不会有任何差别。但是如果用DIV就累的要死，ie6+ie7+ff都不相同。想法设法弄好几个DIV才能去实现通用。
那么，在此我不禁想table如此简单的居中，为什么非要用div去呢，这有人又会说了，为了数据和显示分离呗！
OK，下面，说这个数据和显示分离！
首先，我说明我的观点，简单的网页，数据和显示可以分离，但复杂的网页，像门户类的，那么琐碎，那么精细！根本无法分离！
但需要更换美工页面，可以肯定的说，需要花费的力气不会比table+css少，绝不会像传说种那样随便动动css就可以了。
下面我举一个例子来说明。
就像通常用的圆角矩形，有人说div+css我就可以首先，好，你是怎么实现的，无非也就是弄4个块状布局元素放在4角，然后用css去修饰嘛，你只不过是用文本去作了一个圆角，但，你的数据和显示还是相互黏贴在一起，这实现了数据和显示的分离了吗？这和表格用4个角作背景图片有什么差别呢？
完全跟table是一个思路！！！只是实现方式的差别！
而且这种方式并不万能的，稍微复杂一点的圆角怎么弄，我想要带阴影，而且要外带发光的圆角，有办法吗？没有，还是要用table的方式去实现。
而如果你要想真正的实现 数据和显示 完全的分离，你大可以把这 一整个圆角矩形，用做一个css类的背景图片(这样做的代码又违背了节省带宽的初衷)。然后把这个类应用到div上，这才叫真正的分离，但这和用到table,也或者是段落P标记上有什么差别呢，还是说，只不过是table多了一个tr,td，但是还是说，那么垂直居中的问题就能累死你！
所以，真正的数据和显示分离。是要把一切的显示效果都做成背静图片，才能完全分类。但对于门户网站这样琐碎的、页面和显示耦合性如此紧密的页面，估计很难！
真正优化的方式应该div+table+css，而不是一个table都不用！
但DIV可以加CSS，table一样可以加CSS。
那么，为什么现在人们如此鼓吹div+css，一味排斥传统的table布局呢，我觉得，无非是两种种情况。
1: 设计师用table布局就过于依赖table，而不用css,但这只能说作为设计人员的问题，不能说是table布局的错！
2: 人们追逐潮流，一味虚荣、比较的心态！
下面我就针对第2个问题，来探讨下div+css和table布局的优劣。
首先，说速度。
这是一味鼓吹div+css的人最善于比较的。难道table布局速度真的就慢？
当然不是，我们知道，我们打开一个网址，实际上是去一个远程服务器上取得一个文件，那么在带宽有限的情况，决定速度的唯一问题就是获取文件的大小，文件越大，传输时间越长！
一旦文件下载完成到本地，浏览器打开网页都是一瞬间的，以现在电脑CPU的处理速度，可以说再复杂的表格嵌套，那么有10层，也是在一瞬间打开。再者而且难道div就没有嵌套了吗？可以毫不怀疑的说,用table有多少嵌套,div也要有多少嵌套。只不过还是上面所说的table多了一个<tr>和<td>，
看似页面文件字节是大了些。但是不要忘了纯粹的div要大量的css去修饰，css也是要占用字节的。
就拿一个简单的例子说，目前的垂直居中对于所有的浏览器来说，table的td的垂直居中都是通用的。显示上不会有任何差别。但是如果用DIV就累的要死，ie6+ie7+ff都不相同。想法设法弄好几个DIV才能去实现通用。
那么，在此我不禁想table如此简单的居中，为什么非要用div去呢，这有人又会说了，为了数据和显示分离呗！
OK，下面，说这个数据和显示分离！
首先，我说明我的观点，简单的网页，数据和显示可以分离，但复杂的网页，像门户类的，那么琐碎，那么精细！根本无法分离！
但需要更换美工页面，可以肯定的说，需要花费的力气不会比table+css少，绝不会像传说种那样随便动动css就可以了。
下面我举一个例子来说明。
就像通常用的圆角矩形，有人说div+css我就可以首先，好，你是怎么实现的，无非也就是弄4个块状布局元素放在4角，然后用css去修饰嘛，你只不过是用文本去作了一个圆角，但，你的数据和显示还是相互黏贴在一起，这实现了数据和显示的分离了吗？这和表格用4个角作背景图片有什么差别呢？
完全跟table是一个思路！！！只是实现方式的差别！
而且这种方式并不万能的，稍微复杂一点的圆角怎么弄，我想要带阴影，而且要外带发光的圆角，有办法吗？没有，还是要用table的方式去实现。
而如果你要想真正的实现 数据和显示 完全的分离，你大可以把这 一整个圆角矩形，用做一个css类的背景图片(这样做的代码又违背了节省带宽的初衷)。然后把这个类应用到div上，这才叫真正的分离，但这和用到table,也或者是段落P标记上有什么差别呢，还是说，只不过是table多了一个tr,td，但是还是说，那么垂直居中的问题就能累死你！
所以，真正的数据和显示分离。是要把一切的显示效果都做成背静图片，才能完全分类。但对于门户网站这样琐碎的、页面和显示耦合性如此紧密的页面，估计很难！
真正优化的方式应该div+table+css，而不是一个table都不用！
...全文
请发表友善的回复…
发表回复
luomianhe 2012-09-12
- 打赏
- 举报
div+css
lanse1314520 2012-09-11
- 打赏
- 举报
写的还可以
Scottz 2012-08-27
- 打赏
- 举报
听说DIV+CSS相比table布局来说SEO方面有很大的优势，
搜索引擎优先收录DIV+CSS
搜索引擎优先收录DIV+CSS
liujiatangjing 2012-08-17
- 打赏
- 举报
学习了，不过XHTML+CSS才是合适的吧，一旦页面复杂起来，单纯的div+css或者table都不好用了
ydspace1 2012-08-12
- 打赏
- 举报
http://www.chinahbo.org/
以前做的,用table的,也没感觉有什么不妥,做的时候赶时间,用table省的每个浏览器去调试了
以前做的,用table的,也没感觉有什么不妥,做的时候赶时间,用table省的每个浏览器去调试了
loveclk 2012-08-03
- 打赏
- 举报
div+css是很灵活的
yaganblw 2012-08-02
- 打赏
- 举报
真正优化的方式应该div+table+css，而不是一个table都不用！
myeof 2012-07-24
- 打赏
- 举报
说到底就是数据与结构的分离啊
只是数据与结构的分离的优点不是LZ想的那样而已。
比如，我要把原来既定好的侧栏从左边移动到右边，如果用table，全部都要修改过，但是如果是css，只要改变几个代码就能灵活做出改变。
再者一张已经规划好的版本需要重新布局，如果是用table，那么你就全部需要重新修改。如果是css那么你只要修改css就够了。
再比如，QQ空间、各种博客的换肤功能，或者拖拽功能，你只要根据用户选择改变不同的CSS模板就可以了，而整体的内容就不需要变化了。
只是数据与结构的分离的优点不是LZ想的那样而已。
比如，我要把原来既定好的侧栏从左边移动到右边，如果用table，全部都要修改过，但是如果是css，只要改变几个代码就能灵活做出改变。
再者一张已经规划好的版本需要重新布局，如果是用table，那么你就全部需要重新修改。如果是css那么你只要修改css就够了。
再比如，QQ空间、各种博客的换肤功能，或者拖拽功能，你只要根据用户选择改变不同的CSS模板就可以了，而整体的内容就不需要变化了。
bihua520 2012-07-21
- 打赏
- 举报
我比较同意楼主的观点。
不能太迷信DIV,有些效果确实table实现更方便。(就比如垂直居中的那个效果),而且在对老的浏览器对table布局可能明显要必DIV好。
至于数据页面分离应该是 HTML+Css ,所以既可以是div+css，照样也可以是table+css。
从实用角度来说，应该是结合实际情况，该用DIV+CSS就用Div+Css,该用table+css就用table+Css，应该是哪个方便就用哪个，而不是为了用哪个所以用哪个。
个人总结，一般对自适应要求比较低，而且数据堆叠的厉害的解构，可以采用div+css或者li+css嵌套，例如无限极树形控件(treeview),菜单控件(menuview),这样渲染速度要明显高于table+CSS嵌套。 但是如果包含内容比较复杂，要求要求整体页面在未知情况下可控，能够让子元件（注意，不是子文本）能自动垂直或水平居中，最好用Table来实现，这样虽然会牺牲点性能，但是可靠性兼容性高。
另外，不要太迷信所谓的概率，多了解概率后的本质，其实在CSS模式下，任何元素的呈现方面都没有本质的区别。而且性能的优化压力也不能全压在div+css上，可能业务和程序逻辑上的优化更有效得多。
不能太迷信DIV,有些效果确实table实现更方便。(就比如垂直居中的那个效果),而且在对老的浏览器对table布局可能明显要必DIV好。
至于数据页面分离应该是 HTML+Css ,所以既可以是div+css，照样也可以是table+css。
从实用角度来说，应该是结合实际情况，该用DIV+CSS就用Div+Css,该用table+css就用table+Css，应该是哪个方便就用哪个，而不是为了用哪个所以用哪个。
个人总结，一般对自适应要求比较低，而且数据堆叠的厉害的解构，可以采用div+css或者li+css嵌套，例如无限极树形控件(treeview),菜单控件(menuview),这样渲染速度要明显高于table+CSS嵌套。 但是如果包含内容比较复杂，要求要求整体页面在未知情况下可控，能够让子元件（注意，不是子文本）能自动垂直或水平居中，最好用Table来实现，这样虽然会牺牲点性能，但是可靠性兼容性高。
另外，不要太迷信所谓的概率，多了解概率后的本质，其实在CSS模式下，任何元素的呈现方面都没有本质的区别。而且性能的优化压力也不能全压在div+css上，可能业务和程序逻辑上的优化更有效得多。
yusheng622 2012-06-14
- 打赏
- 举报
搀和着用！
wdxgdiy 2012-06-07
- 打赏
- 举报
各有各的有点 页面载入速度基本忽略不计
q2104574 2012-06-05
- 打赏
- 举报
。。我一开始也都用table 后来听别人说，，div+css。。我用table 感觉很方便，，，用div 要用css美化成table 。。。
zyg0 2012-05-21
- 打赏
- 举报
没仔细看 对于一个系统来说 用div+table+css完全可以满足要求 而且界面基本不变 这个可以的
但是对于网站 div+css 无table 在网站改版中的作用大家应该都知道 因此 div+css的网站表现最灵活 但是有table了 显示就不那么灵活了。
但是对于网站 div+css 无table 在网站改版中的作用大家应该都知道 因此 div+css的网站表现最灵活 但是有table了 显示就不那么灵活了。
万载馨辰 2012-05-18
- 打赏
- 举报
天呐··古董贴···
manbufenglin 2012-02-06
- 打赏
- 举报
真正优化的方式应该div+table+css，而不是一个table都不用！
zhang_2007 2011-12-29
- 打赏
- 举报
[Quote=引用 89 楼 owenxin26 的回复:]
别的不说，就比如像YouTube那样的网站，每个模块都能根据用户需求自己调整位置，你用table做得出来吗？
这里不是网页设计板块所以肯能没什么专业点的设计师来反驳你的观点，但是我只知道table能做到的，div肯定能做到，div能做到的，table不一定做得到。
[/Quote]
你在ie里弄个min-height 属性呗
别的不说，就比如像YouTube那样的网站，每个模块都能根据用户需求自己调整位置，你用table做得出来吗？
这里不是网页设计板块所以肯能没什么专业点的设计师来反驳你的观点，但是我只知道table能做到的，div肯定能做到，div能做到的，table不一定做得到。
[/Quote]
你在ie里弄个min-height 属性呗
hoshimo91 2011-12-10
- 打赏
- 举报
初学者的感受，觉得div+css+table 一起用很不错啊，一些简单的设计，div+css有时候反而不如table+css方便。
毕竟方法是活的，人更是活的嘛
毕竟方法是活的，人更是活的嘛
wangzhong418522 2011-11-08
- 打赏
- 举报
我div+css不是特别精通，所以現在基本都是用div+css+table 的布局，但是table有時候確實會出現一些不必要的問題，建議大家使用div+css! 我的登錄頁面一般都用table顯示，但是總是在IE7中出現行間距，所以還是顯示數據的時候使用table比較穩妥，也可以解決一點排版布局的時間！
個人的一點小建議！
個人的一點小建議！
星小野 2011-09-22
- 打赏
- 举报
顶起,实践才是王道.[Quote=引用 43 楼 dream_hunter_ 的回复:]
我觉得各位高手可以动手做两个实例么，一个TABLE+CSS一个DIV+CSS，看并说明哪个效果好。这么讲有啥用呢，用TABLE的还是用TABLE，用DIV的还是用DIV。用事实说话，才能引导潮流哦。
[/Quote]
我觉得各位高手可以动手做两个实例么，一个TABLE+CSS一个DIV+CSS，看并说明哪个效果好。这么讲有啥用呢，用TABLE的还是用TABLE，用DIV的还是用DIV。用事实说话，才能引导潮流哦。
[/Quote]
zijinyuxiao 2011-09-22
- 打赏
- 举报
顶一个，烦恼中
加载更多回复（276）
