在HTML中,表格不应该用于布局,这似乎是普遍的观点。

Why?

我从来没有(老实说,很少)看到过支持这一点的有力论据。通常的答案是:

It's good to separate content from layoutBut this is a fallacious argument; Cliche Thinking. I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and CSS.By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs. Readability of the codeI think it's the other way around. Most people understand HTML, few understand CSS. It's better for SEO not to use tablesWhy? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective? Tables are slower.An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page. A layout overhaul is easier without tables, see css Zen Garden.Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its misuse of CSS.

我对使用divs + CSS而不是表的良好参数非常感兴趣。


当前回答

WYSIWYG!!! I can't for the life of me get our designers to stop using nested DIVS and styled by elementID css in templates that are supposed to be used by clients in CMS projects. That's the whole point of a WYSIWYG online editor. You are controlling both the content and the layout at the same time! There is no separation at all in the first place in this scenario. Positioned and styled Divs in some external stylesheet are anathema to the whole idea of WYSIWYG editing. Tables can be seen, rows inserted, cells combined and so on. Good luck trying this with divs in a way that doesn't frustrate users.

其他回答

CSS/DIV - it's just jobs for the design boys, isn't it. The hundreds of hours I've spent debugging DIV/CSS issues, searching the Internet to get some part of markup working with an obscure browser - it drives me mad. You make one little change and the whole layout goes horrendously wrong - where on eath is the logic in that. Spending hours moving something 3 pixels this way then something else 2 pixels the other to get them all to line up. This just seems plain wrong to me somehow. Just because you're a purist and something is "not the right thing to do" doesn't mean you should make use of it to the nth degree and under all circumstances, especially if it makes your life 1000 times easier.

So I've finally decided, purely on commercial grounds, although I keep use to minimum, if I anticipate 20 hours work to get a DIV placed correctly, I'll stick in a table. It's wrong, it upsets the purists, but in most cases it costs less time and is cheaper to manage. I can then concentrate on getting the application working as the customer wants, rather than pleasing the purists. They do pay the bills after all and my argument to a manager enforcing the use of CSS/DIV - I would merely point out the customers pay his salary as well!

所有这些CSS/DIV争论出现的唯一原因是因为CSS的缺点,首先是因为浏览器之间不兼容,如果它们相互兼容,世界上一半的网页设计师将失业。

When you design a windows form you don't try moving controls around after you have laid them out so I kind of think it's strange to me why you would you want to do this with a web form. I simply can't understand this logic. Get the layout right to start with and what's the problem. I think it's because designers like to flirt with creativity, whilst application developers are more concerned with actually getting the application working, creating business objects, implementing business rules, working out how bits of customer data relates to each other, ensuring the thing meets the customers requirements - you know - like the real world stuff.

不要误解我的意思,这两种观点都是正确的,但是请不要因为开发人员选择了一种更简单、更合乎逻辑的方式来设计表单而批评他们。我们常常有比正确使用表而不是div的语义更重要的事情要担心。

在这个讨论的基础上,我将一些现有的tds和trs转换为div。花了45分钟把它弄得乱七八糟想把所有东西都排列整齐然后我就放弃了。td在10秒后回来-工作-立即-在所有浏览器上,没有更多的事情要做。请试着让我明白——你有什么理由让我用其他方式做这件事!

当我使用CSS设计我的布局时,我通常给每个主要部分都有自己的根(主体级别)div,并使用相对/绝对定位将其置于适当的位置。这比表更灵活一些,因为我不局限于可以用行和列表示的排列。

此外,如果我决定我想要重新安排布局(说我想要导航栏现在在右边),我可以简单地去改变一个地方(CSS文件)的元素位置,HTML不需要改变。如果我对表执行此操作,我将不得不进入并找到信息,并进行大量属性修改和复制粘贴以获得相同的效果。

事实上,使用CSS,我甚至可以让我的用户选择他们想要的布局如何工作。只要内容区域的一般大小不改变,我完全可以使用一些PHP脚本来根据用户的偏好输出CSS,并允许他们根据自己的喜好重新排列站点。同样,对于表也是可以的,但是维护起来要困难得多。

最后,CSS提供了一个表永远无法提供的主要好处:基于显示设备重新格式化内容的能力。CSS允许我在打印机上使用与显示器上完全不同的样式集(包括位置、格式等)。这也可以扩展到其他媒体,一个很好的例子是Opera Show,它允许一个设计巧妙(非常标准)的CSS增强页面被视为幻灯片显示。

因此,最终,灵活性和管理才是真正的赢家。一般来说,CSS允许你对布局做更多的事情。基于表的布局在技术上没有什么不标准的,但为什么要限制自己呢?

I have found that even with the best planning divs come up short in several respects. For instance. there is no way with divs to have a bottom bar that always sits at the bottom of the browser, even when the rest of the content does not go to the bottom of the browser. Also, you cannot elegantly do anything better than three columns, and you cannot have columns that grow and shrink according the the width of their content. In the end, we try to use divs first. However, we will not limit our html designs based on some religious content vs layout ideal.

内容和布局之间的分离也使它更容易为您的网站生成打印机友好的布局或不同的皮肤(样式),而不必创建不同的html文件。有些浏览器(如Firefox)甚至支持从视图菜单中选择样式表。

而且我确实认为保持无表格布局更容易。你不需要担心行span, colspan等等。您只需创建一些容器div并将内容放置在需要的位置。也就是说,我认为它也更有可读性(<div id="sidebar"> vs <tr><td>…</td><td>…<td>sidebar</td></tr>)。

这只是一个你必须学会的小“技巧”(一旦你掌握了这个技巧,我认为它会更容易,更有意义)。

通过仍然使用表格布局,我们错过了在div方面的创新。

许多人提出了解决方案,使创建布局的divs更容易。最流行的是网格架构。有基于此体系结构的动态布局生成器。查看: 1) 960。Gs和(http://grids.heroku.com/) 2)蓝图 最近也是如此。

在架构和表格布局工具方面,我还没有看到太多创新。

我想说,撇开所有的理论,实际上布局与CSS和div更快。相反,在这个方向上的创新使它变得更容易。