【问题标题】:What real problems does using tables instead of divs present to the end user?使用表格而不是 div 会给最终用户带来哪些真正的问题?
【发布时间】:2009-12-12 20:55:11
【问题描述】:

忘记与开发人员相关的事情,例如代码可维护性和关于语义的宗教战争等等,我的问题是:使用表格会给用户带来哪些现实世界的问题?是否存在无法正确理解表格布局的设备?它会降低页面在搜索引擎上的相关性吗?

当然,我说的是一个合理的布局,其中表格用于纯 CSS/div 中需要 hack 的东西(显然也用于表格数据)——而不是像一百个嵌套的东西甚至可以使用表来代替 ul/li。

【问题讨论】:

    标签: html css layout accessibility


    【解决方案1】:

    视障人士的用户代理(又称浏览器)可能会使用网页的口头描述。

    按表格布局时,页面内容的描述变成了表格的描述,不太可能帮助理解。

    【讨论】:

    • 这些设备是否描述了页面的结构或内容?因为对于 div,基本上没有结构(这就是 div 的重点),而对于内容,<td> 中的 title 属性不足以描述其内容?
    • 我认为文本转语音会根据表格的行和列来描述表格的内容,我认为这对于视障用户来说会是一个令人困惑的额外细节级别。有视力的用户不会知道底层表。
    • 我见过的大多数解析器的 html -> 纯文本功能似乎可以很好地呈现非嵌套表格内容。使用多嵌套表会让人感到困惑,但 OP 说的是简单表。
    【解决方案2】:

    表格是如此古老的技术,以至于它们可以在我所知道的每台设备和每一个程序中可靠地呈现。

    我不鼓励使用表格进行布局,除非真的非常有必要(在 少数 种情况下),但我不相信在某些方面使用表格做得好的布局确实如此自动对渲染产生负面影响。不过,请随意证明我错了。

    当使用表格而不是语义正确的元素时,文本到语音程序可能会出现问题,例如在有序/无序列表中。但我相信任何文字转语音或其他无障碍软件都有这方面的规定,否则将无法在当今的互联网上使用。

    在某些情况下,需要智能调整网页大小的浏览器(例如移动浏览器)在使用表格时比在使用其他布局元素时遇到更多问题。但这在很大程度上取决于个人的布局和情况。

    【讨论】:

    • 重新调整大小:这可能是一种美德,也可能是一种烦恼。使用表格布局的一个优点是您的内容块不会在页面大小调整时换行。你可能想要,也可能不想要这个。
    • @Richard:但这也是您可以通过 CSS 控制的行为,而且这样做更加灵活。
    【解决方案3】:

    这是一个很好的演示文稿,很好地总结了表格的问题:http://www.hotdesign.com/seybold/06problems.html

    【讨论】:

    • 该页面中唯一有趣的一点是#5,但这只是一个没有细节的声明。 #2 是有问题的,但我想这是一个实际的问题,无论多么小。
    【解决方案4】:

    我对它的主要最终用户论点是面向未来的和页面大小(与加载时间有关,与用户体验有关)。如果您在语义上设计页面并使用最小标记方法,那么没有基于表格的布局的页面大小几乎总是小于使用基于表格的布局的页面。

    对于该页面的每个请求,网络上的比特数更多,这(如前所述)意味着更长的加载时间,等等。min-html + 外部 CSS 表,但是,对于大多数生产站点来说,加载时间明显更快(请参阅 Yahoo 的 YSLOW 指南),因为 CSS 表和页面之间通常存在一对多的关系,这意味着您正在利用浏览器的缓存功能(以及潜在的其他中间设备缓存)。

    面向未来的评论与设计更改有关。与在大多数常见的基于表格的设计中相比,使用最小标记页面从 CSS 实现大规模视觉布局重新设计要容易得多。有关示例,请参见 csszengarden.com。

    显然,在这两种情况下都是 YMMV。如果您真的很少使用表(例如,一页上的一个表,该表中的一行,该行中的三个 TD,每列一个),那么您可能不必担心这些事情。也就是说,我,最好学习 CSS 技术,或者付钱给了解它们的人。设计很快就会变得比你想象的要复杂很多次,并且使用表格作为快速修复很快就会变成一个滑坡。同样,所有人都说 IME; YMMV。

    【讨论】:

    • 正如我所说,我不考虑一个干净、编写良好的基于​​ div 的布局与一堆乱七八糟的嵌套表。如果你尽可能少地使用表格,只针对 div 不擅长的领域(即网格),那么几个字节真的会产生影响吗?
    • @kemp。正如我所说,字节只是图片的一部分,该因素的重要性将随着网站的使用而增加。在我看来,更大的影响是对网站后期更改的影响。此外,正如我所说,这是一种滑坡方法,在您的开发周期中也不能很好地扩展。使用 CSS 制作基于网格的布局并不难(参见 960 Grid (960.gs) 和 Blueprint CSS (www.blueprintcss.org) 示例)
    猜你喜欢
    • 2011-03-12
    • 1970-01-01
    • 1970-01-01
    • 2010-12-13
    • 1970-01-01
    • 2018-07-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多