CSS布局没有固定宽度
我无论如何都不是 CSS 方面的专家；我知道一点，但不是很深； float和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
I'm not expert in CSS in any way; I know it to some extent but not very deep; float and IE6 makes me cry. So I'm always excited to see what people can do with it.
However, most of the examples that I see use fixed dimensions. As far as I understand this is because CSS is so tricky and it's much easier to hack when elements have width, especially in IE6.
But, I really like flexible width. And being so, I don't understand why it's wrong to make design with tables? There's a book called "Everything You Know About CSS Is Wrong!" which explain how it's good that now we can do table layouts with CSS with recent browsers... but, couldn't we do it all the time with HTML tables? Yes it's not CSS and maybe not as clean as pure CSS... but, after all, table layout IS what we often need, and if we have to choose between wicked hacky CSS to do it and simple-but-not-pure-enough HTML table, I don't understand why any of these choices should be considered bad. KISS is a good thing, isn't it?
Or, maybe I don't understand it and you CAN make table-like layouts in CSS - that work in IE6 - without too much pain in the ass? Any examples of such sites?
UPDATE: Yes I know about content and style separation. In fact, I'm fanatic about DRY, SRP and other design must-do things. That's why I really tried to do things in CSS; but if it's SO much harder and more unreliable than tables, such that it's even written in books like mentioned above, why try so hard? I do not say that everything must be done in tables; but if it's really easier than CSS - why should I prefer CSS to a simple and predictable solution?
That is, I do not say that you should use tables always. Keep in mind master page layout - it's independent and do not affect other pages, I can switch from CSS to tables and back in 20 minutes (in fact I did so already) with no problem - WHY should I stick to CSS even though tables are no harm?
UPDATE: I've found this to be a very good summary of what I was trying to say: http://www.flownet.com/ron/css-rant.html. And the discussion http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments.
For those who's interested, here's an even better article: http://kv5r.com/articles/dev/layouttables1.asp
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
查看 Yaml 和 流体 960gs。两者都对跨浏览器布局有很大帮助。表格布局不是答案，IE6 迟早会消失。
Have a look at Yaml and Fluid 960gs. Both help you a lot with cross-browser layouts. Table-Layouts are not the answer and IE6 will vanish sooner or later.
你基本上是对的。只要单元格的顺序适合页面的可访问性，使用表格进行布局就没有什么问题。我个人认为固定宽度比表格布局的可用性下降更严重。
当您使用表格进行布局时，请务必使用样式
width: 100%;表布局：固定（以及具有样式化宽度的），以便浏览器可以从一开始就正确地布置表格（这修复了一个表格布局的可用性问题），这样您就不会依赖 IE 相当糟糕的自动布局宽度猜测。虽然我当然更喜欢尽可能使用 CSS 进行布局，并且仅使用 CSS 就可以合理地实现大多数简单的站点布局（特别是现在 IE5 及其 Quirky Box Model 已经消失），但在某些情况下 CSS 无法破解它，而表格可以。常见的情况是复杂的流体宽度形式。
最重要的问题是无法使用诸如
width: 100%-10em之类的内容来获取视口宽度减去另一列的固定大小的列。对于简单的情况，您可以使用边距和包装器 div 来解决这个问题，但是一旦您开始重新排序页面上的元素并添加多个包装器只是为了让 CSS 布局正常工作，您就已经将演示文稿与内容：与表格并没有太大不同。在最坏的情况下，您最终会得到那些愚蠢的“CSS 框架”，它们要求您使用嵌套和固定类名来完全指定标记本身内部的布局。这根本不比桌子好；我觉得非常搞笑的是，这种毫无希望的倒退到糟糕的旧时代被认为是一种流行的尖端 Web 2.0 技术。
CSS3 正在研究一些有趣的替代方案来替代当前的定位选项，这些方案有一天可能会实现完全标记和布局分离的承诺。但这距离今天还很遥远。
You are essentially right. There is nothing really wrong with using tables for layout as long as, for accessibility, the order of the cells is appropriate for the page. I personally find fixed-width a much worse degradation of usability than tables-for-layout.
When you do use tables for layout, be sure to use the styles
width: 100%; table-layout: fixed(and<col>with a styledwidth) so that browsers can lay the table out correctly from the start (which fixes one of the usability problems table layouts had), and so that you're not reliant on IE's rather poor auto-layout width-guessing.Whilst I certainly prefer CSS for layout wherever possible, and most simple site layouts can be reasonably achieved using only CSS (especially now IE5 and its Quirky Box Model is gone), there are some cases where CSS can't hack it and tables can. A common case is complex fluid-width forms.
The most significant problem is the lack of ability to say things like
width: 100%-10emto get a column that's the width of the viewport minus a fixed size for another column. For the simple cases you can get around this with margins and a wrapper div, but once you start re-ordering the elements on your page and adding multiple wrappers just to get the CSS layout to work, you're already mixing up the presentation with the content: not really so very different from tables.In the worst case you end up with those silly ‘CSS frameworks’ that require you to use nesting and fixed class names to completely specify the layout inside the markup itself. This is no better than tables at all; I find it absolutely hilarious that this hopeless throwback to the bad old days is considered a trendy cutting-edge Web 2.0 technique.
CSS3 is working on some interesting alternatives to current Positioning options that may one day deliver on the promise of total markup and layout separation. But that's a long way off today.
HTML 表格不适合表格数据以外的任何其他内容，这是有原因的。 HTML 是一种数据内容标记语言，因此应包含实际数据的分组，而不是该数据的布局。 CSS 完全是为了布局和样式目的；因此它的名字。因此，CSS 应该包含网页的整个外观和感觉，而 HTML 则包含数据的结构；两人永远不会见面。
在表中做所有事情都是不好的，这是有原因的。
您应该将其视为样式和内容之间的抽象，您可以从这里获得一个很好的概述：http ://www.alistapart.com/articles/separationdilemma/
另外，在直接回答您的问题时，请转到“A List Apart”并搜索您的文章。它们描述了您即将在这里进行的旅程：http://www.alistapart.com /articles/journey/
为什么我应该选择 CSS 而不是简单且可预测的解决方案？
这就是我们想说的。从短期来看，这似乎更容易，但您编写的任何内容在将来都将难以维护且更难以编辑。你可以去写一个在短期内看起来更容易的网页，但当你想做更多的事情时，你实际上是在搬石头砸自己的脚。为什么不第一次就把事情做好呢？ （实际上这只是少量的额外努力）
There is a reason that HTML tables are bad for anything else other than tabular data. HTML is a markup language for data content and thus should contain groupings of actual data, not the layout for that data. CSS is meant to be completely for layout and style purposes; thus its name. Therefore the CSS should contain the entire look and feel of the webpage while the HTML contains the structure for the data; and never the twain shall meet.
Doing everything in tables is bad for a reason.
You should think of it as the abstraction between style and content and you can get a good rundown from here: http://www.alistapart.com/articles/separationdilemma/
Also in direct answer to your question goto 'A List Apart' and search through your articles. They kind of describe the journey you're about to make here: http://www.alistapart.com/articles/journey/
why should I prefer CSS to a simple and predictable solution?
That's what we're trying to say. It may seem easier in the short term but anything that you write will be less maintainable and harder to edit in the future. You can go and write a webpage that seems easier in the short term but you're just stabbing yourself in the foot really for later when you want to do more. Why not just do it right the first time round? (it's only a small amount of extra effort really)
仅仅因为 CSS 布局对您来说是一个挑战，但这并不意味着它不如表格。通过陈述这一点，你犯了一个逻辑谬误，称为相对主义谬误。
一旦您完全了解 CSS、如何使用它以及大多数不同浏览器的特性，您就会发现它远远优于 HTML 表格。
标记应该是语义的。也就是说，它应该准确地描述它所包含的内容。这使得它具有机器可读性（对于 SEO 和其他应用程序）。布局表根本没有语义。
不同层的抽象有助于使网站更容易维护。将内容保留在 HTML 中，将行为保留在 Javascript 中，将表现形式保留在 CSS 中。
不过，CSS 有其缺点，这一点是对的。但桌子上还有更多，这更糟糕。
Just because CSS layout is a challenge for you, that doesn't make it inferior to tables. By stating this, you're committing a logical fallacy known as the Relativist Fallacy.
Once you fully understand CSS, how to use it, and most of the different browser quirks, you will find that it is vastly superior to HTML Tables.
Markup should be semantic. That is, it should accurately describe the content that it contains. That makes it machine readable (for SEO and other applications). Tables for layout is not semantic at all.
Abstraction of different layers helps to make a website much more easier to maintain. Keep the content in the HTML, the behavior in the Javascript, and the presentation in the CSS.
You are right that CSS has its shortcomings, though. But tables have many more, which are much worse.
您不想制作使用表格作为布局的标记的原因是设计和内容的解耦。
您的标记本身应该作为其中内容的完美描述。本质上，您应该在接触样式之前用 html 标记页面。然后，您将使用 CSS 来修改语义标记默认的外观。
事实是，您所布置的网页内容不是“表格数据” - 标记是供计算机/机器人阅读的，样式是供我们查看的，通常，将两者混合只会使一方或双方感到困惑以增加可维护性为代价。
The reason you don't want to make markup that uses tables as the layout is because of the decoupling of design and content.
Your markup should sit, on its own, as a perfect description of the content that is in it. Essentially you should mark up your pages in html before you ever touch the styles. Then you would use CSS to modify the way that your semantic markup looks by default.
The fact of the matter is that your web content that you are laying out is not 'Tabular data' - Markup is for computers/bots to read, and styles are for us to see, mixing the two just confuses one or both parties, usually at the added cost of maintainability.
这是我个人遇到的一个场景，我想分享一下。注意：我并不是提倡“根本没有桌子”，它确实可以满足其他要求。
我创建了一个表单（视觉上自上而下的流程）：
然后客户想要一个更加结构化的管状表单，如下所示：
由于我没有使用 TR TD 排序的表格，我可以轻松（几乎）使用 CSS 修改来转换结构， HTML 标记的细微更改。
Here's a scenario which I encountered personally which I'll like the share. Note: I'm not advocating "no-table-at-all", it does come in handing for other requirements.
I've created a form (visually top-down flow):
Then customer wanted a more structured tubular one like this:
As I am not using table of the TR TD sort, I can easily (almost) convert the structure using CSS modification and minor HTML markup changes.