问个比较纠结的问题,为什么现在BBS程序的列表和内页都还那么喜欢用table?是用div效率很低么?或者是用table就算丢了css一样能勉强看看起码不会乱。

2011-11-18 09:41:28 +08:00
 SolidZORO
3923 次点击
所在节点    问与答
14 条回复
xueyou98
2011-11-18 10:05:46 +08:00
主题列表,所谓列表,为什么不用表,而要用块?
sigone
2011-11-18 10:08:55 +08:00
方便前端的操作吧.
zythum
2011-11-18 10:10:16 +08:00
其实个人是不喜欢用table的、除了真的做个表。
chloerei
2011-11-18 10:13:34 +08:00
因为这真的是个表。首先它是一行一个数据,然后每行要分成几个列对齐,每个列的含义都是一致的:头像,内容,时间戳。不用表而用div就像现成的书架不用,要用很多小盒子一样。
honk
2011-11-18 10:18:35 +08:00
本來就是表啊,符合语义
SolidZORO
2011-11-18 10:24:54 +08:00
@chloerei 嗯。这个是没错,的确是符合他原有的本意,我也不是非得任何地方都要用div那种人,就是发现table用起来太吃力了。 除了主体用table,里面其实也一样要堆积很多div的。不过就丢样式这点,table还是很有优势的。
xspio
2011-11-18 10:26:00 +08:00
我还真做过实验,论坛的情况是表的速度确实比层快,你可以自己测试下
SolidZORO
2011-11-18 10:32:24 +08:00
@xspio 嗯 这个之前就猜到了,现在有人做了测试,就更加明显了。 其实div用得多,用得不正常是会有变慢现象的特别是position这种,多起来会卡。 但是这得用比较旧的电脑才能感觉到。table则不会。

估计1万个div的使用效率,可以支持10万个table td。
MarshallChen
2011-11-18 10:39:50 +08:00
其实这个问题 参看Chrome那个新的应用商店 :P
ytzong
2011-11-18 10:54:14 +08:00
@xspio 求实验细节
@SolidZORO position 会更快
Hyperion
2011-11-18 11:37:18 +08:00
table在天朝基本就代表"省时省力"... 而且帖子列表就是展示数据, 也符合table的语义, 结构也稳定...
SolidZORO
2011-11-18 11:46:37 +08:00
@ytzong 你可以width一个800px的div,然后里面position一个出去变成810; 拷贝代码100次。 你就能看到性能差异了。当然,得用老机器,和不那么现代的浏览器。比如IE6 7。
keakon
2011-11-18 11:48:27 +08:00
列表是list,不是table…

HTML标签应该只有语义上的表达功能,样式只应该由CSS定义。不要说我学术,这是W3C说的:Tables must not be used as layout aids.
http://www.w3.org/wiki/HTML/Elements/table

如果table仅是用于排版,那么它就会限制样式的灵活性。
考虑京东首页的商品展示,每行显示3个商品,这用表格实现是很容易的。
但如果要针对不同的窗口大小,动态改变每行的列数,那么用table就惨了。

在论坛中,主题是多列多行的排列,一般会有标题、作者、日期等表头,在使用盲人语音阅读器时,每行都会读成标题xxx,作者xxx,日期xxx,这在语义上是完全正确的。
其实就我的理解,是否有/可加表头是table最重要的特征。从这个意义上来说,我们填的报名表、登记表等各种表并不是表格(table),而是表单(form),用table去实现,在语义上是错误的,而且样式完全定死了。

顺带一提,V2EX的table是在li里面,这完全就只能用于排版,没有任何语义功能。
假设想把头像放在最右边,或是将作者和时间放在最下面的话,就只能改HTML了,CSS没法做到。

最后,印象中table里的所有资源加载完才能下载其他部分,所以如果某个单元格里的图像太大,就会一直等它下完才能显示剩余部分。而且一般不会在一个列表/表中放超过100行数据,所以它们的渲染速度应该都在毫秒级,这点性能差异应该是不用担心的。
SolidZORO
2011-11-18 11:54:34 +08:00
@keakon 这个分析有点靠谱了。不过有twitter员工告诉我CSS的效率其实还是能靠“感觉”出来的,虽然很快,这可能是有些地方的机器还比较落后造成这样的担心。我用CSS也发现有某些性能问题会拖慢浏览器滚动速度。

不过我想通了,还是遵循吧。毕竟你说到了盲人。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/21668

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX