V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
SolidZORO
V2EX  ›  问与答

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

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

    估计1万个div的使用效率,可以支持10万个table td。
    MarshallChen
        9
    MarshallChen  
       2011-11-18 10:39:50 +08:00
    其实这个问题 参看Chrome那个新的应用商店 :P
    ytzong
        10
    ytzong  
       2011-11-18 10:54:14 +08:00
    @xspio 求实验细节
    @SolidZORO position 会更快
    Hyperion
        11
    Hyperion  
       2011-11-18 11:37:18 +08:00
    table在天朝基本就代表"省时省力"... 而且帖子列表就是展示数据, 也符合table的语义, 结构也稳定...
    SolidZORO
        12
    SolidZORO  
    OP
       2011-11-18 11:46:37 +08:00
    @ytzong 你可以width一个800px的div,然后里面position一个出去变成810; 拷贝代码100次。 你就能看到性能差异了。当然,得用老机器,和不那么现代的浏览器。比如IE6 7。
    keakon
        13
    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
        14
    SolidZORO  
    OP
       2011-11-18 11:54:34 +08:00
    @keakon 这个分析有点靠谱了。不过有twitter员工告诉我CSS的效率其实还是能靠“感觉”出来的,虽然很快,这可能是有些地方的机器还比较落后造成这样的担心。我用CSS也发现有某些性能问题会拖慢浏览器滚动速度。

    不过我想通了,还是遵循吧。毕竟你说到了盲人。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1272 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:29 · PVG 07:29 · LAX 15:29 · JFK 18:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.