V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
bl
V2EX  ›  前端开发

发现 v2ex.com 网站很多地方使用了 table 进行布局,使用 table 布局的优势在哪里?除了很容易排版

  •  
  •   bl · 2020-08-29 22:45:26 +08:00 · 4662 次点击
    这是一个创建于 1571 天前的主题,其中的信息可能已经有所发展或是发生改变。
    28 条回复    2020-08-31 10:38:33 +08:00
    weiqk
        1
    weiqk  
       2020-08-29 22:50:28 +08:00 via Android   ❤️ 4
    如果你从 frontpage 时代过来你肯定能理解,table 布局是成本最低的技术,可惜资本总是在淘汰成本低的技术
    Szhi
        2
    Szhi  
       2020-08-29 23:16:24 +08:00
    能用就行啦
    webshe11
        3
    webshe11  
       2020-08-29 23:47:13 +08:00
    后端表示,用 table 就不用研究 CSS 黑魔法啦
    somalia
        4
    somalia  
       2020-08-29 23:56:24 +08:00
    简单,兼容好。
    lmqdlr
        5
    lmqdlr  
       2020-08-30 00:00:21 +08:00 via Android
    @weiqk 真张口就来。
    多写写布局就知道了,table 现在在非表格和列等宽情况下不使用 table 的主要原因就是成本太高。
    weiqk
        6
    weiqk  
       2020-08-30 00:08:16 +08:00 via Android
    @lmqdlr 第一,呵呵,第二,我从未主张过只用表格布局,第三,呵呵
    hakono
        7
    hakono  
       2020-08-30 00:17:03 +08:00
    这里的布局成本低应该是对后端这种不熟悉 css 来讲的吧

    作为一个后端,偶尔要写点页面,对后端来说 css 是真尼玛一门玄学。要么怎么改都没有任何效果,要么有效果了却根本和想要的不一样,不是位置跑到不知道什么地方了就是永远调整不到想要尺寸 etc...
    这时候一个 table 是真的让人简单到落泪
    Felldeadbird
        8
    Felldeadbird  
       2020-08-30 00:21:31 +08:00 via iPhone
    兼容性好呀。什么浏览器都支持。缺点就是 数据 在前端交互会有点繁琐。
    towser
        9
    towser  
       2020-08-30 00:42:53 +08:00
    优势就是简单容易。

    不过记得十几年前用 table 布局时,IE6 需要等 <table> 加载完才能一次性显示整个表格,而 <div> 渲染一个区块就显示一个。
    noqwerty
        10
    noqwerty  
       2020-08-30 00:56:20 +08:00 via Android
    应该是历史原因吧,作为只写过一点前端页面的外行感觉 flex+grid 更香
    dremy
        11
    dremy  
       2020-08-30 01:16:22 +08:00 via iPhone
    div+css 毕竟算是十年前网页开发的“前沿”技术,现在图书馆里还有大把这样的书籍
    wdhwg001
        12
    wdhwg001  
       2020-08-30 01:25:16 +08:00 via iPhone
    table 布局是经受了严格的,IE 代领的,不兼容就淘汰的考验的,在所有人们可能使用的非命令行浏览器内都有正确的显示效果。
    抛开洁癖来看,它其实非常适合几乎没有动效的页面。
    CODEWEA
        13
    CODEWEA  
       2020-08-30 01:44:30 +08:00
    优势就是 table 自带的布局效果,你用 css div 来实现同等效果成本要高很多
    imn1
        14
    imn1  
       2020-08-30 02:42:23 +08:00
    既然提到历史,说一些楼上不知道的事

    页面用 1000+个 div,ie4 会崩掉,但一个 table 里面 1000+ tr 不会,只是加载慢
    当然还有浏览器渲染能力和内存等等多方面原因

    其次,多列定宽,一列变宽的情况,div+css1 很头疼,总是不能“所见即所得”,但 table 就很轻松
    以前还有大量文章,专门讲解如何实现左中右(中间不定宽)的 div 布局教程,可见当年做这事不容易
    现在不会做这个的前端该二话不说马上炒掉吧
    Livid
        15
    Livid  
    MOD
       2020-08-30 02:49:14 +08:00
    一些十年前的代码里,确实用的是 table 。

    最近几年做的新功能里,没有再继续这么干。比如:

    https://www.v2ex.com/settings/privacy
    Perry
        16
    Perry  
       2020-08-30 06:43:37 +08:00 via iPhone   ❤️ 1
    现在估计 flexbox 就能随便搞了也不需要有什么黑魔法
    wd
        17
    wd  
       2020-08-30 07:33:44 +08:00 via iPhone
    table 布局主要是方便,当年被 div 打败我记得是因为 ie 需要整个 table 数据都下载到才能开始渲染,而 div 可以一点一点来。
    suzic
        18
    suzic  
       2020-08-30 09:38:15 +08:00 via Android
    排版简单,交互要求不高的纯型展示网站使用 table 做起来效率高。兼容性高,很多 zf 网站都是 table
    ipwx
        19
    ipwx  
       2020-08-30 09:44:27 +08:00
    这种还用问?明显是历史遗留问题。哪个时代写的代码当然用哪个时代的技术。

    ( 15L 站长现身说法)
    Jirajine
        20
    Jirajine  
       2020-08-30 10:45:24 +08:00 via Android
    个人觉得手写布局无论是 table 还是 css 都是反人类的。单论布局本身而言,可视化的设计才是最自然的方式。虽然 flexbox 和 grid 确实香,但我更喜欢 Android 的 constraint layout 。
    Perry
        21
    Perry  
       2020-08-30 12:34:06 +08:00
    看了下 https://www.v2ex.com/settings/privacy 是 grid 写的
    murmur
        22
    murmur  
       2020-08-30 15:07:28 +08:00
    table 用好了也可以,table 的问题是如果预定宽度内的东西超出宽度得用 div 限制一下
    wangyzj
        23
    wangyzj  
       2020-08-30 16:57:06 +08:00
    一切要从 projectbabel 说起
    JmmBite
        24
    JmmBite  
       2020-08-30 17:15:09 +08:00
    一个字:懒
    herozzm
        25
    herozzm  
       2020-08-30 17:34:33 +08:00
    table 无需考虑多余的 css 等兼容问题,一般后端喜欢用,缺点就是少了 div 和 css 的优点
    zhangshine
        26
    zhangshine  
       2020-08-30 17:52:15 +08:00
    table -> flex
    DOLLOR
        27
    DOLLOR  
       2020-08-30 20:42:42 +08:00
    十几二十年前,table 布局+IE+拨号上网=噩梦,打开个网页往往要白屏很长时间,体验非常糟糕。
    那时候我就开始用 Opera 了,不用等整个 table 下载完成就能渲染页面,这点非常优秀。
    leekafai
        28
    leekafai  
       2020-08-31 10:38:33 +08:00
    初中还是高中计算机课,有一门什么什么什网页设计,就是用 table 做一个类似于迪士尼的静态页面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3290 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 11:41 · PVG 19:41 · LAX 03:41 · JFK 06:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.