为什么不在HTML中使用表格进行布局?

似乎普遍认为表格不应该用于HTML中的布局。

为什么?

我从来没有(或者很少说实话)看到这方面的好论据。 通常的答案是:

  • 将内容与布局分开很好
    但这是一个错误的论点; 陈词滥调。 我想这是真的,使用表格元素进行布局与表格数据无关。 所以呢? 我的老板关心吗? 我的用户关心吗?

    也许我或我的开发人员必须维护一个网页护理...是不是可以维护一个表? 我认为使用表格比使用div和CSS更容易。

    顺便说一下......为什么使用div或span来很好地区分布局和表格中的内容? 只有div才能获得良好的布局,通常需要大量的嵌套div。

  • 代码的可读性
    我认为这是另一回事。 大多数人理解HTML,很少理解CSS。

  • SEO不会使用表格更好
    为什么? 任何人都可以证明它是一些证据吗? 或者谷歌的声明表示,从SEO的角度来看,表格是不鼓励的?

  • 表格较慢。
    一个额外的tbody元素必须被插入。 这是现代网页浏览器的花生。 向我展示一些使用表格显着减慢页面的基准。

  • 如果没有桌子,布局检修更容易,请参阅css Zen Garden。
    大多数需要升级的网站也需要新的内容(HTML)。 新版本的网站只需要一个新的CSS文件的情况不太可能。 禅园是一个很好的网站,但有点理论。 更不用说它滥用CSS了。

  • 我真的很感兴趣的是使用divs + CSS而不是表格。


    我将逐个讨论你的论点,并试图展示他们的错误。

    将内容与布局分开是件好事但这是一个错误的论点; Cliché思维。

    这完全不是错误的,因为HTML是有意设计的。 滥用元素可能并不完全没有问题(毕竟,其他语言也发展了新的习语),但是可能的负面影响必须抵消。 另外,即使目前没有反对滥用<table>元素的论据,明天可能会有浏览器供应商对元素进行特殊处理的方式。 毕竟,他们知道“ <table>元素仅用于表格数据”,并且可能会利用这个事实来改进渲染引擎,在此过程中微妙地改变<table>的行为方式,从而打破以前被滥用的情况。

    所以呢? 我的老板关心吗? 我的用户关心吗?

    依靠。 你的老板是尖头的吗? 然后他可能不在乎。 如果她能胜任,那么她会照顾,因为用户会。

    也许我或我的开发人员必须维护一个网页护理...是不是可以维护一个表? 我认为使用表格比使用div和css更容易。

    大多数专业网站开发者似乎反对你[需要引证]。 这些表格实际上不易维护应该是显而易见的。 使用表格进行布局意味着改变公司布局实际上意味着改变每一页。 这可能非常昂贵。 另一方面,明智地使用与CSS结合的语义上有意义的HTML可能会限制对CSS和所用图片的这种更改。

    顺便说一下......为什么使用div或span来很好地区分布局和表格中的内容? 只有div才能获得良好的布局,通常需要大量的嵌套div。

    深嵌套<div>是一种反模式,就像表格布局一样。 好的网页设计师不需要其中的很多。 另一方面,即使是这样的深嵌式div也没有很多表格布局的问题。 事实上,他们甚至可以通过逻辑上将内容分成若干部分来为语义结构做出贡献。

    代码的可读性我认为这是相反的方式。 大多数人都懂HTML,很少理解CSS。 这很简单。

    “大多数人”并不重要。 专业人员很重 对于专业人员来说,表格布局会产生比HTML + CSS更多的问题。 这就像说我不应该使用GVim或Emacs,因为记事本对于大多数人来说更简单。 或者我不应该使用LaTeX,因为MS Word对于大多数人来说更简单。

    SEO不会使用表格更好

    我不知道这是否属实,不会以此为论点,但这是合乎逻辑的。 搜索引擎搜索相关数据。 尽管表格数据当然可能是相关的,但很少用户搜索。 用户搜索页面标题中使用的术语或类似的显着位置。 因此,将表格内容从过滤中排除是合乎逻辑的,因此可以大大减少处理时间(和成本!)。

    表格较慢。 一个额外的tbody元素必须被插入。 这是现代网页浏览器的花生。

    额外的元素与表格变慢无关。 另一方面,表格的布局算法更加困难,浏览器在开始布置内容之前通常需要等待整个表格加载。 此外,缓存布局将无法工作(CSS可以轻松缓存)。 所有这些都在之前提到过。

    向我展示一些使用表格显着减慢页面的基准。

    不幸的是,我没有任何基准数据。 我自己也会对此感兴趣,因为这个论点缺乏一定的科学严谨性是正确的。

    大多数需要升级的网站也需要新的内容(html)。 新版本的网站只需要一个新的css文件的情况不太可能。

    一点也不。 我已经在几个案例中对内容和设计进行了分离,从而简化了设计。 通常仍然需要更改一些HTML代码,但更改总是会受到更多限制。 另外,必须动态地进行设计变更。 考虑模板引擎,如WordPress博客系统使用的模板引擎。 表格布局会从字面上杀死这个系统。 我已经为商业软件开发过类似的案例。 能够在不更改HTML代码的情况下更改设计是业务需求之一。

    另一件事。 表格布局使网站的自动解析(屏幕抓取)变得更加困难。 这可能听起来微不足道,因为毕竟,谁做的? 我很惊讶自己。 如果有问题的服务不提供访问其数据的WebService替代方案,则屏幕抓取可以提供很多帮助。 我在生物信息学工作,这是一个可悲的现实。 现代网络技术和Web服务尚未达到大多数开发人员的角色,并且通常屏幕抓取是自动获取数据的唯一方法。 难怪许多生物学家仍然手动执行这些任务。 成千上万的数据集。


    这是我的程序员从一个simliar线程的答案

    语义学101

    首先看看这段代码,想想这里有什么问题......

    class car {
        int wheels = 4;
        string engine;
    }
    
    car mybike = new car();
    mybike.wheels = 2;
    mybike.engine = null;
    

    问题当然是,一辆自行车不是一辆汽车。 汽车班对于自行车实例来说是不合适的班级。 代码没有错误,但在语义上不正确。 它对程序员反映不佳。

    语义学102

    现在将其应用于文档标记。 如果您的文档需要显示表格数据,那么适当的标签应该是<table> 。 但是,如果将导航放置到表中,则会滥用<table>元素的预期用途。 在第二种情况下,您不会呈现表格数据 - 您(错)使用<table>元素来实现表示性目标。

    结论

    游客会注意到吗? 不,你的老板关心吗? 也许。 我们有时候会像程序员一样偷工减料吗? 当然。 但我们应该吗? 不。如果您使用语义标记,谁会受益? 你 - 和你的专业声誉。 现在去做正确的事情。


    明显的答案:请参阅CSS Zen Garden。 如果您告诉我,您可以轻松地使用基于表格的布局(请记住 - HTML不会更改),那么请务必使用表格进行布局。

    另外两个重要的事情是可访问性和SEO。

    他们都关心信息呈现的顺序。 如果基于表格的布局将其放置在页面上第二个嵌套表格的第二行的第三个单元格中,则无法在页面顶部轻松呈现导航。

    所以你的答案是可维护性,可访问性和SEO。

    不要懒惰。 即使他们有点难以学习,也要以正确和正确的方式做事。

    链接地址: http://www.djcxy.com/p/293.html

    上一篇: Why not use tables for layout in HTML?

    下一篇: What are valid values for the id attribute in HTML?