Eric Meyer 在今天发表的“需求:布局系统”中说道
将一堆 div、列表项或其他元素变成表格角色框,并不比直接使用表格标记更好,甚至可以说更糟。 使用除 table 和 td 之外的元素名称创建布局表格,然后声称这不是用表格进行布局,这近乎于自欺欺人。
更不用说,这样做意味着您正在以高度依赖源代码顺序的方式进行布局,而这正是我们最初试图从表格布局中摆脱的东西。
阿门,兄弟。 我已经听够了关于这些 CSS 表格的内容。 这些“您所知道的关于 CSS 的一切都是错误的”东西对我来说简直是疯了。 之前我对它感到有些困惑,所以听到埃里克这么说真好。
是的,阿门! 我一直在等待“大师”之一对这个问题发表声明。 非常感谢你指出这一点,Chris。 我只是希望 css-“table”设计能够再次消失! 没有良好的语义,也没有渐进增强,因为 IE 6 及更早版本根本无法正常工作。
啊哈。 现在我感觉轻松多了。 我刚看完“你所知道的关于 CSS 的一切都是错误的”,然后感到恶心,因为我把钱浪费在一个聪明的营销策略上。
CSS 表格很花哨。 就像那本书一样。
我正在读这本书,我当时就想,真的吗,这就是网页的未来吗? 很高兴听到你们这么说。 很高兴从业界最好的专家那里听到这种说法。
我完全同意 Eric 的观点。 当我第一次听说它的时候,我认为这是一次巨大的倒退。 但是,随着它不断地被推销,我认为自己一定遗漏了什么显而易见的东西。
现在我意识到自己并没有遗漏什么。 用 div 本质上重新创建基于表格的布局是疯狂的。 我们已经努力摆脱这种思维方式……我不希望我们重新被吸进去。
我知道! 我在读那本书的时候,我当时就想……wtf? 非常棒的文章。
SitePoint 的书简直烂透了。
并不是所有的书都烂,我喜欢“Simply Javascript”。
对于像这本书所针对的完全新手来说,我不喜欢它。 开头很好,然后突然跳到了正则表达式。 我不喜欢它的流程。 与之相比,Jeremy Keith 的 Dom Scripting 读起来真是太棒了。 我刚开始读他的另一本书“Bulletproof Ajax”。
在我读完这本书之后,我会再试一下 Simply Javascript,也许现在我对 Javascript 有了更好的理解,就能理解它了。
至于 Sitepoint 的书,他们确实出版了一些很棒的书,但也出版了一些完全是废话的东西。
我也喜欢他们的 HTML 和 CSS 参考手册。
我绝对同意你的观点,在一定程度上。
CSS 表格……希望它会被跳过。
完全错误,Jason。 Sitepoint 出版了市场上最好的网页开发书籍。 它们易于阅读,并且解决了现实世界的问题和解决方案。 其他大多数出版商都过于技术化。 也许正在讨论的这本书不像其他书那么好,但这并不意味着所有书都烂。
我完全同意。 特别是作为一个中级 CSS 玩家,我刚学会了浮动和网格,以及其他所有东西,现在又出现了这种疯狂。
我还没有准备好抛弃 CSS 表格,我不能相信我的第一反应。
我和一个朋友差不多在同一时间学习 CSS;我们都认为 CSS 盒模型有缺陷。 我的本能是回到 HTML 表格;幸运的是,我坚持了下来,现在再也不想回去(我认为旧的 MS 盒模型也有缺陷)。
我主要担心的是 div 膨胀,如果实验表明不会出现膨胀,那么我可能会使用 CSS 表格。
多个边框和边框半径不应该可以解决这个问题吗?
它们是 CSS3 属性,如果我们谈论的是 CSS3,那么我们可能也会谈论 http://www.w3.org/TR/css3-layout/,然而这还处于 alpha 阶段!
我使用 display:inline-block 进行布局,如果不是因为一个恼人的缺陷,它将完全取代浮动和清除。
如果有一种方法可以在没有浮动的情况下消除内联块元素之间的间隙,那就太好了。
我不想用表格。我的老板是一位设计师,他仍然用表格来布局网站,这太可怕了!我发誓有一个表格恶魔,在看到所有的小恶魔追随者离开他的表格宫殿后,现在只是去做了整形手术,并戴上了一个 CSS 的帽子……
我会远离这个,永远不会使用它。
完全同意!
我用 DIV 和 SPAN。
表格用于“表格数据”。
你甚至知道 CSS 表格是什么吗?显然,你不知道。我建议你用谷歌搜索一下。
伙计,我认为这个人知道它是什么。
我完全同意你的观点……让 DIV 的美感遍布整个网络世界(希望 IE6 有一天会消失!)。
有些人哭着要 DIV,似乎不知道这是怎么回事……当然 CSS 表格在 DIV 上工作,这并不意味着要回到语义表格标记。
:) 是的。我也不知道。我从来没有用 DIV 和 CSS 做过表格设计——我永远也不会做!
真是太棒了,我还以为只有我一个人不明白。很高兴听到还有其他人说出来。
嗯,有人能解释一下使用语义标记有什么不好吗?但让标记像表格一样?当然这是两全其美!你可以用语义标记创建表格式布局?
它仍然保留了内容和设计的隔离?
我不同意。许多人并不理解 CSS 表格与 HTML 表格完全不同。CSS 表格在 DIV、LI 元素等上工作。浮动仍然有其作用,但在我看来,它们不应该用于基础布局——只是用于将某些内容“浮动”到右侧或左侧。也许只是我,但我不知道问题出在哪里。
我认为表格式的 DIV、SPAN 或其他东西在某些特殊情况下可能很棒(我想到了垂直对齐的文本),但作为布局表格的替代,它与它想要替代的布局表格一样糟糕。
我完全同意 Eric 的观点!
我个人讨厌与表格相关的一切,包括 CSS 表格。只使用 DIV,它们很简单。
CSS 表格是一个显示值,因此它们可以在 DIV 和列表项上工作——它们与 HTML 中的表格元素无关。
我认为使用雅虎重置 CSS 然后只制作 DIV 是编码网站的最佳方法。浮动和清除对我来说很有效。
我 99% 的时间都使用 DIV 和无表格网页设计。但是,有时表格更有意义(这种情况很少见,但我遇到过)。为什么要创建一堆 DIV 和大量 CSS 代码来获得与表格相同的期望效果?
我更喜欢更简洁(和更小)的代码。我说如果表格比一堆 DIV 更适合你网页设计的一部分,那么就使用它。不要为了说你的设计是 100% 无表格而使事情变得比必要时更复杂。
我想知道如果这些属性被称为“CSS 网格”而不是“CSS 表格”,是否会有如此强烈的反应?
相信我,我和其他人一样讨厌 HTML 表格。但我一直觉得为了创建列的外观而浮动元素,感觉像是事后才想到的解决方案。
也就是说,我还没有完全认同这个想法,但我愿意至少尝试一下,而不是仅仅因为包含了可怕的“T”字就立即拒绝一种新方法。
而且,CSS 3 不会很快被广泛应用。
我不同意。我敢打赌,一旦 IE 6 和 7 不再存在于市场上,你们中的大多数人就会开始使用它。
我同意 Colin 的观点。我认为 CSS 表格并不总是最好的选择,但我相信它们是我们工具箱中的另一种工具,应该按此使用。有时我们的设计需要它们,有时不需要。
使用类似 CSS 表格或任何其他名称的东西来设计布局并不错误——事实上,这样做是有意义的。只是使用它们不合适,因为它们不是为这种布局目的而设计的。
是的,这基本上证实了我的怀疑。很高兴你发布了这个。关于整个表格讨论,我认为有些人没有抓住重点。
首先,CSS 表格的概念不是用表格构建布局,然后用 CSS 样式化这些表格。你应该看看 nettuts 或 sitepoint,搜索 CSS 表格,看看 Chris 和 Eric 究竟在说什么。
其次,每个人都讨厌表格标签。这和说“我讨厌 p 标签”或“我讨厌无序列表”一样没有道理。当你这么说的时候,你没有任何道理。相反,你应该说“我讨厌使用表格进行布局”。当然,这很有道理,因为表格标签不是为了网页布局而创建的。它是为了布局表格数据而创建的。
所以,停止对可怜的表格标签的厌恶,只在你需要显示数据时使用它。
Kthx。
我同意。我说不不不使用 CSS 表格,拜托拜托。
我知道反对 Eric Meyer 的观点被认为是异端邪说(或者至少是不雅),但我不同意这篇文章和评论者的普遍情绪。我认为,
这里对当前方法(浮动和清除等)的喜爱是因为你已经投入了如此多的时间
时间学习用浮动和清除巫术拼凑布局。这让人很讨厌
认为可能有一种更简单的方法。
我同意另一位评论者的观点,他说如果我们不叫它们“表格”,很多抱怨就会消失。
我最大的抱怨是,在 IE6 和 IE7 消失之前,我们仍然必须在 IE 特定样式表中进行浮动和清除的舞蹈。
在使用 div 显示表格数据比使用及其相关元素更有意义的情况下,仍然存在一种情况:当您显示可以通过 AJAX 刷新,基于列的比较数据时。
TABLE 元素在本质上存在缺陷,因为它只支持基于行的表格,而克服此限制的编码/成本含义是禁止性的。在这种情况下,明显的选择是浮动的 div 列。
“在使用 div 显示表格数据比使用及其相关元素更有意义的情况下,仍然存在一种情况:”
应该改为
“在使用 div 显示表格数据比使用表格及其相关元素更有意义的情况下,仍然存在一种情况:”
Eric 说得对,他说 CSS 需要一些方法来允许以某种方式重新排序 HTML 元素,但我认为 CSS 表格仍然有其价值。它们只是不够好,无法实现真正好的、与源顺序无关的布局,但它们是前进了一步。
我买了那本愚蠢的书,111 页。网络上关于这个主题的免费信息更多。真是浪费 29.95 美元!
我从当地图书馆借来的。图书馆很棒 :-)
我仍然对很多人认为 CSS 表格(display: table)与使用 CSS 样式的表格相同感到惊讶。
然而,Eric 错了,display: table 绝不比使用真正的表格进行布局更糟糕。
这一切都突出了 CSS 仍然需要改进布局。
我仍然认为表格在用于表格数据或与 CSS 结合使用时非常棒,用于某些需要“灵活”组合在一起的事物(三个并排的调用栏,栏内包含未知数量的内容,并且所有内容始终需要保持相同的高度)。Display: table 只能使这种事情变得更智能,但它可能仍然不能完全取代当前的布局方法...
我最讨厌的是那些认为自己不使用表格,尤其是表格数据,就是在做一些更“智能”的事情的人。这根本不是智能编码。事实是,表格在古老的形式中仍然非常强大。
在我看来,有了高级布局、网格定位、多列布局等模块,CSS 表格变得更加冗余;考虑到最终对(至少其中一些)上述模块的支持,我不确定在使用 CSS 表格进行页面布局时可能有什么价值,对我来说,这在语义上又是错误的,因为我们没有显示表格数据...
此外,用 CSS 表格替换 HTML 表格用于显示表格数据有什么价值呢?
所以,值得买“关于 CSS 的所有知识都是错的”吗?
我考虑买它。
你可以从图书馆借阅,或者在书店里浏览...
我认为“关于 CSS 的所有知识都是错的”是一本有趣的书。我认为书中描述的方法可能在未来的某些网站中适用,但我仍然更喜欢 div。我对表格的主要抱怨是 - 假设你有一个 5x5 的表格,然后你决定要删除第二行第三列的单元格。在任何类型的表格中,将所有其他内容适当移位都是一件麻烦事,但是用浮动的 div 来做,这只是一件轻而易举的事。
不过,它仍然是一个有趣的想法。对于未来的新手来说,它可能更容易学习,尤其是如果他们只是想快速创建一个简单的网站。
使用 HTML 表格来显示表格数据是完全可以的。在其他任何需要简化维护的地方,它也能派上用场。我的公司为几十家客户维护网站,我们经常遇到一些自称 CSS 大师的人构建的网站,他们花费了一年时间,花费了正常编码员速度的 20 倍的成本,创造了一个极其复杂的 100% 无表格 CSS 网站。这种注重细节/纯粹的 CSS 方式的问题在于,成本和生产力永远不会被讨论。我认为编码应该以最小的成本解决问题。在您认为它会简化网站维护人员工作的地方使用表格。极好的 CSS 确实有一些质量上的优势,但首先要问的是,它如何改善公司的盈亏底线。因此,我并不真正关心 100% 无表格的设计。
我认为对于那些一生都在使用表格布局的人来说,表格始终是布局网站的最简单方法。我真无法想象一个真正的 CSS “大师”,甚至是一个非大师的人,会花一年时间来创建任何类型的无表格布局。如果您熟悉 CSS 布局,那并不那么困难。您能举一个大师花费一年时间创建的网站例子吗?我很想看看那样复杂的网站。
也许正因为我在无表格时代开始从事设计工作,并且从未将表格用于布局,所以我发现无表格设计比表格设计要容易得多。我可能需要花费两倍(甚至更长时间)的时间来用表格布局一个网站,而我可以轻松地构建一个符合标准的无表格网站。
您应该关心 HTML 表格的替代方案。
将 HTML 表格用于布局(而不是表格数据)可能会降低您的网站对残疾人(例如屏幕阅读器用户)的可访问性,使其更难维护、加载速度更慢,并消耗更多带宽。
如果您只关心盈亏底线,那么您需要证明将潜在访问者拒之门外是合理的,这些人无法访问您的网站,或者他们想使用他们找到的加载速度更快的替代网站。CSS 符合盈亏底线友好。
完全同意。就这样。
在 IE7 彻底消失之前,所有关于 CSS 表格的讨论不都是无稽之谈吗?IE7 不支持 CSS 表格,对吧?如果我没记错的话,现在仍然有很多人为 IE6 设计,它已经存在多少年了?如果 IE7 和 IE6 一样,它将一直存在到大约 2016 年,只要我们为 IE7 设计,我们真的能对 CSS 表格感到兴奋吗?
我可以看到关于 CSS 表格的两种论点,而且我可能在某个时候尝试一下,但我仍然不确定,给所有符合标准的浏览器提供一种东西(CSS 表格),然后给 IE7 提供一个完全不同的布局(基于浮动)是否有意义?因为我听说这是人们常用的方法?
我不赞同很多回复,也不赞同 Eric 或 Chris。CSS 表格设计并非要取代浮动和定位。事实上,它所做的是让设计师能够创建网格系统,并将元素放置在网格创建的单元格中。这是任何图形软件中的不言而喻的事。在 Adobe Photoshop 中使用参考线布局网站时,我会创建一个网格。然后,当我将这个网站“切片”成 XHTML/CSS 时,有时会遇到基于浮动的 CSS 设计的固有问题,例如列高不固定。这就是 CSS 表格设计可以发挥作用并成为实用解决方案的地方。CSS 表格现在是设计师工具箱中的另一个工具。例如,当我创建一个灵活的圆角设计时,我不必再胡乱调整。我只是像以前使用 HTML 表格一样使用 CSS 表格。至于渐进增强论点,我不为 IE5 设计网站。IE6 和 7 在某个时候将被视为过时,那时继续为它们设计将毫无意义。