2

我在任何方面都不是 CSS 专家。我知道一些，但不是很深；浮动和IE6让我哭了。所以我总是很高兴看到人们可以用它做什么。

但是，我看到的大多数示例都使用固定尺寸。据我了解，这是因为 CSS 非常棘手，当元素有宽度时更容易破解，尤其是在 IE6 中。

但是，我真的很喜欢灵活的宽度。既然如此，我不明白为什么用表格进行设计是错误的？有一本书叫《你所知道的关于 CSS 的一切都是错的！》这解释了现在我们可以在最近的浏览器中使用 CSS 进行表格布局有多好……但是，我们不能一直使用 HTML 表格吗？是的，它不是 CSS，而且可能不如纯 CSS 干净......但是，毕竟，表格布局是我们经常需要的，如果我们必须在邪恶的 hacky CSS 和简单但不纯的 CSS 之间做出选择足够的 HTML 表，我不明白为什么这些选择中的任何一个都应该被认为是不好的。KISS是个好东西，不是吗？

或者，也许我不理解它，你可以在 CSS 中制作类似表格的布局——在 IE6 中工作——而不会太痛苦？此类网站的任何示例？

更新：是的，我知道内容和样式分离。事实上，我对 DRY、SRP 和其他设计必须做的事情非常狂热。这就是我真正尝试在 CSS 中做事的原因；但如果它比表格更难，更不可靠，甚至在上面提到的书上都写过，为什么要这么努力呢？我并不是说所有事情都必须在表格中完成。但如果它真的比 CSS更容易- 为什么我更喜欢 CSS 而不是简单且可预测的解决方案？

也就是说，我并不是说你应该总是使用表格。请记住母版页面布局 - 它是独立的，不会影响其他页面，我可以在 20 分钟内从 CSS 切换到表格并返回（事实上我已经这样做了）没有问题 - 为什么我要坚持使用 CSS，即使表格是无害？

更新：我发现这是对我想说的话的一个很好的总结：http: //www.flownet.com/ron/css-rant.html。和讨论http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments。

对于那些感兴趣的人，这里有一篇更好的文章： http: //kv5r.com/articles/dev/layouttables1.asp

4

6 回答 6

4

看看Yaml和Fluid 960gs 。两者都对跨浏览器布局有很大帮助。表格布局不是答案，IE6 迟早会消失。

于 2009-10-22T10:52:57.680 回答
3

你基本上是对的。使用表格进行布局并没有什么问题，只要为了便于访问，单元格的顺序适合页面。我个人发现固定宽度比表格布局更严重地降低了可用性。

当您使用表格进行布局时，请务必使用样式width: 100%; table-layout: fixed（并<col>使用 styled width），以便浏览器可以从一开始就正确布置表格（这解决了表格布局存在的可用性问题之一），并且您不依赖于 IE 相当糟糕的自动布局宽度猜测。

虽然我当然更喜欢 CSS 进行布局，并且大多数简单的站点布局都可以仅使用 CSS 合理地实现（尤其是现在 IE5 及其 Quirky Box 模型已经消失），但在某些情况下 CSS 无法破解它而表格可以。一个常见的情况是复杂的流体宽度形式。

最重要的问题是无法说出诸如width: 100%-10em获得视口宽度减去另一列的固定大小的列之类的事情。对于简单的情况，您可以使用边距和包装器 div 来解决此问题，但是一旦您开始重新排序页面上的元素并添加多个包装器以使 CSS 布局正常工作，您已经将演示文稿与内容：与表格并没有太大的不同。

在最坏的情况下，您最终会得到那些要求您使用嵌套和固定类名来完全指定标记本身内部布局的愚蠢的“CSS 框架”。这根本不比桌子好。我发现这种对过去糟糕日子的绝望倒退被认为是一种流行的尖端 Web 2.0 技术，这绝对是一件非常有趣的事情。

CSS3 正在为当前的定位选项开发一些有趣的替代方案，这些替代方案可能有一天会兑现完全标记和布局分离的承诺。但今天还有很长的路要走。

于 2009-10-22T11:47:05.633 回答
1

HTML 表格对于表格数据以外的任何其他内容都不好，这是有原因的。HTML 是数据内容的标记语言，因此应该包含实际数据的分组，而不是该数据的布局。CSS 旨在完全用于布局和样式目的；因此得名。因此，CSS 应该包含网页的整个外观，而 HTML 包含数据的结构；双胞胎永远不会相遇。

出于某种原因，在表格中做所有事情都是不好的。

你应该把它看作是风格和内容之间的抽象，你可以从这里得到一个很好的概述：http ://www.alistapart.com/articles/separationdilemma/

同样在直接回答您的问题时，转到“A List Apart”并搜索您的文章。他们有点描述你将在这里进行的旅程：http ://www.alistapart.com/articles/journey/

为什么我应该更喜欢 CSS 而不是简单且可预测的解决方案？

这就是我们想说的。在短期内它可能看起来更容易，但你写的任何东西在未来都将更难维护，更难编辑。你可以去写一个在短期内看起来更容易的网页，但是当你想要做更多的时候，你只是在刺自己的脚。为什么不第一次就做对呢？（真的只是一点点额外的努力）

于 2009-10-22T10:56:04.340 回答
1

仅仅因为 CSS 布局对您来说是一个挑战，这并不意味着它不如表格。通过陈述这一点，你犯了一个被称为相对主义谬误的逻辑谬误。

一旦你完全理解了 CSS、如何使用它，以及大多数不同的浏览器怪癖，你会发现它比 HTML 表格要优越得多。

标记应该是语义的。也就是说，它应该准确地描述它所包含的内容。这使其机器可读（对于 SEO 和其他应用程序）。用于布局的表格根本不是语义的。

不同层的抽象有助于使网站更易于维护。将内容保留在 HTML 中，将行为保留在 Javascript 中，将表示保留在 CSS 中。

不过，您说得对，CSS 有其缺点。但是桌子还有更多，更糟。

于 2009-10-23T00:56:02.233 回答
0

您不想制作使用表格作为布局的标记的原因是因为设计和内容的解耦。

您的标记应该单独作为对其中内容的完美描述。本质上，您应该在接触样式之前用 html 标记您的页面。然后，您将使用 CSS 来修改您的语义标记在默认情况下的外观。

事实是，您布置的 Web 内容不是“表格数据”——标记是供计算机/机器人阅读的，而样式是供我们查看的，将两者混合只会混淆一方或双方，通常以增加可维护性为代价。

于 2009-10-22T10:55:33.853 回答
0

这是我个人遇到的一个场景，我会喜欢分享。注意：我并不是在提倡“根本没有桌子”，它确实可以满足其他要求。

我创建了一个表单（视觉上自上而下的流程）：

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

然后客户想要一个更结构化的管状，像这样：

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

由于我没有使用 TR TD 排序表，因此我可以使用 CSS 修改和较小的 HTML 标记更改轻松（几乎）转换结构。

于 2009-10-22T11:02:28.467 回答