【问题标题】:Why are HTML tables frowned upon? [closed]为什么 HTML 表格不受欢迎? [关闭]
【发布时间】:2011-06-15 22:13:38
【问题描述】:

仅仅是因为有些人认为他们更难阅读吗?我发现通过绘制网格比使用浮动 div 更容易向某人解释布局。如果他们正在学习编写浮动 div 代码,那么他们必须处理设置宽度并使用 CSS clear。

(顺便说一句,我自己不使用表格)

【问题讨论】:

标签: html xhtml html-table


【解决方案1】:

它们违反了表的语义。表格应该用于表格数据。他们也很重视标记。此外,它们会将您的网站锁定在一个特定网格的结构中。

【讨论】:

    【解决方案2】:

    表格用于存储表格数据。内容不是表格数据。

    【讨论】:

      【解决方案3】:

      这主要是关注点分离的问题 - 你的 HTML 应该标记你的内容,而不是决定 UI 的外观和布局,这是 CSS 的关注点。

      应为表格数据保留表格。

      【讨论】:

        【解决方案4】:

        主要是炒作。表格是一种可接受的方式,而且通常更合乎逻辑地将视图分成多个部分。然而 CSS 更具动态性,如果你使用表格,你经常会被它们困住,特别是因为表格通常放置在“数据”之间,而 css 是在外部定义的。此外,更改用 css 制作的“类似表格”的布局比更改表格制作的布局更容易。

        在互联网上有几个关于这个问题的好资源:

        http://www.decloak.com/dev/csstables/css_tables_01.aspx

        http://iamelgringo.blogspot.com/2009/02/tables-vs-css-css-trolls-begone.html

        如您所见,这通常也是语义问题。从语义上讲,表格不适合布局,(但它确实很方便,而且这种区别更适合纯粹主义者)。

        【讨论】:

        • 就是这样,这不是更合乎逻辑,使用 CSS 进行布局和使用表格来处理 TABULAR 数据更合乎逻辑。可以,但不推荐,因为以上任何一个答案
        • 啊,我的意思是合乎逻辑的:作为一个人,表格是结构化数据的一种合乎逻辑的方式。在您的脑海中很容易看到。虽然在您的脑海中很难看到浮动 div(有时甚至在浏览器实现或用户调整屏幕大小时也会有所不同)。 (这就是为什么我提高了 Oded 的评论,他在钱上是对的。但是对于布局的“表格”皱眉有时有它的用途,这就是为什么我列出了一些优点和缺点。我同意虽然通常最好使用 CSS .
        【解决方案5】:

        这是取自另一个网站,但仍然具有相关性:

        1. 表通常是更多字节的标记。 (下载时间更长,还有更多 主机的流量字节。)
        2. 表格通常会阻止增量渲染。 (需要更长的时间 让用户看到任何东西 页。)
        3. 表格可能需要您将单个逻辑图像分割成多个 那些。 (这使得重新设计总计 地狱,并且还增加了页面负载 时间[更多http请求和更多 总字节数]。)
        4. 表格会在某些浏览器上中断文本复制。 (这很烦人 用户。)
        5. 表格会阻止某些布局在其中工作(例如 height:100% 的子元素 )。 (它们限制了你可以 实际上在布局方面做到了。)
        6. 一旦您了解 CSS,基于表格的布局通常需要更多时间 实施。 (前期有点努力 学习 CSS 在 结束。)
        7. 表格在语义上是不正确的布局标记。 (他们 描述演示文稿,而不是 内容。)
        8. 对于那些使用屏幕阅读器的人来说,表格会让他们的生活陷入困境。 (你不仅 获得 CSS 的其他好处,你 也帮助 盲人/部分视力。这是一个 好东西。)
        9. 表格将您锁​​定在当前设计中,使重新设计更加困难 比语义 HTML + CSS。 (你见过吗 CSS 禅园?)

        酱: http://phrogz.net/css/WhyTablesAreBadForLayout.html

        【讨论】:

        • 如果它来自其他网站,那么你至少应该给他们一个链接......
        【解决方案6】:

        并非每个浏览器都以相同的方式显示它们...应该只用于表格数据,而不是内容

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2011-07-10
          • 1970-01-01
          • 2016-01-20
          • 2021-04-04
          • 1970-01-01
          • 2014-05-24
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多