有哪些可验证的原因可以将display:table- *添加到CSS规范中?

时间:2015-08-04 10:13:44

标签: html css

我知道现在我们可以在CSS中使用var myString = "graph_data =[16.665,0,16.665,19.23,35.79,16.665,31.71,16.665,0,16.665,0,16.665,16.665,41.615]"; var startInd = myString.indexOf('['); var endInd = myString.indexOf(']')+1; //+1 to include the ] var myIntArr = JSON.parse(myString.substring(startInd, endInd)); console.log(myIntArr) // [16.665,0,16.665,19.23,35.79,...] (例如Holy Grail layout)更容易实现一些布局,但是决定将这些显示选项添加到其中的原因是什么? CSS standard,鉴于 HTML 中基于表格的布局众所周知的历史仇恨。

任何对讨论,邮件列表条目,规范等的引用都会很棒!

我没有找到使用选项的理由,或者对标准组织的动机有任何意见/猜测。相反,为什么以及由谁决定将其包括在内?标准有优点。

感谢。

3 个答案:

答案 0 :(得分:3)

问题不是基于表格的布局不好,而是表格被用于布局。这种方法很难弄清楚哪些是实际表格(即表格数据),哪些是仅用于布局的表格。

向CSS添加table- *意味着我们可以将基于布局的table- *移动到CSS并仅保留HTML中的语义表(即实际的表格数据)

以下是我在W3邮件档案中可以找到的最早的参考资料 - https://lists.w3.org/Archives/Public/www-style/1998Aug/0091.html。 (" display:table"替代TABLE for layout

有一个旧线程的引用,你可以一直跟踪它,但上面提供了足够的上下文。摘录

  

有很多页面都有内容块   使用HTML表格进行视觉目的。这种结构是   应该在HTML 4.0中弃用,但实际上很难   找出相应的CSS构造,特别是如果   基于表格的布局与精确的宽度无关   细胞

     

然而,在CSS2规范中   http://www.w3.org/TR/REC-CSS2/visuren.html#value-inst-table,   以下列出了'显示'的可能值。属性:

     

table,inline-table,table-row-group,table-column,
  table-column-group,table-header-group,table-footer-group,table-row,   table-cell和table-caption

答案 1 :(得分:1)

  

...鉴于HTML中基于表格的布局众所周知的历史仇恨。

正是这样。 HTML table元素在语义上仅用于保存表格数据;页面布局,表单,列表等几乎总是不是表格数据。

HTML401规范声明:

  

表格不应仅仅用作布局文档内容的方法,因为在呈现给非可视媒体时可能会出现问题。此外,当与图形一起使用时,这些表可能会强制用户水平滚动以查看在具有更大显示的系统上设计的表。为了最大限度地减少这些问题,作者应该使用样式表来控制布局而不是表格

     

- Tables - HTML401 Specification

CSS table-*显示不打算仅用于表格数据。它被设计为以与HTML table元素类似的方式创建布局,否则将使用行和列。 CSS风格的表格根本不必包含表格数据,因为它并不重要 - 它纯粹是视觉效果。

HTML方法在语义上无效。 CSS方法是。

作为注释:HTML5规范允许table元素用于布局,但仅在指定role=presentation时才允许:

  

不应将表用作布局辅助工具。从历史上看,许多Web作者都使用HTML格式的表格作为控制页面布局的方法难以从这些文档中提取表格数据。特别是,诸如屏幕阅读器之类的可访问性工具的用户可能发现使用用于布局的表来导航页面非常困难。如果要将表格用于布局,则必须使用属性role =" presentation"用户代理正确地将表格表示为辅助技术,并将作者的意图正确地传达给希望从文档中提取表格数据的工具。

     

- The Table Element - HTML5 Specification

答案 2 :(得分:1)

首先,出于纯粹的实际原因:CSS需要一种方式来描述如何布局<table>元素。如果没有table-*显示规则,浏览器必须特殊情况下这些元素的布局。

  

众所周知的对基于表格的布局的历史仇恨

使用布局表有两个问题。

  1. 语义不正确。当您不使用<table>元素但使用display: table时,这不是问题。您可以拥有类似于表的布局,而不需要表格式语义。
  2. 渲染速度。当您没有使用过大的表格或使用table-layout: fixed时,这不是问题。
  3. 所以CSS解决了这两个问题。