在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而不是表的良好参数非常感兴趣。


当前回答

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表格是布局!内容是表中的数据,表示是表本身。这就是为什么从HTML中分离CSS有时会非常困难。您不是将内容与表示分开,而是将表示与表示分开!一堆嵌套的div和一个表没有什么不同——它只是一组不同的标签。

把HTML和CSS分开的另一个问题是,它们需要彼此的密切了解——你真的不能把它们完全分开。无论您做什么,HTML中的标记布局都与CSS文件紧密耦合。

我认为表与div的区别取决于应用程序的需要。

在我们在工作中开发的应用程序中,我们需要一个页面布局,其中各个块将动态地调整自己的大小以适应其内容。我花了几天时间试图让它与CSS和div跨浏览器工作,这是一个完全的噩梦。我们换了桌子,一切都很顺利。

然而,我们的产品有一个非常封闭的受众(我们销售的是带有web界面的硬件),可访问性问题不是我们关心的问题。我不知道为什么屏幕阅读器不能很好地处理表格,但我猜如果这是开发人员必须处理的方式。

这并不一定是一场战争。和谐是可能的。

使用一个表的整体布局和div在其中。

<table> 
    <tr><td colspan="3"><div>Top content</div></td></tr>
    <tr> 
        <td><div>Left navigation</div></td> 
        <td><div>Main content</div></td> 
        <td><div>Right navigation</div></td> 
    </tr>
    <tr><td colspan="3"><div>Bottom content</div></td></tr>
</table>

看,没有嵌套表。

我读过很多关于如何用divs实现这一点的文章,但从来没有发现任何事情,每次都没有问题。

一旦你有了整体结构,Divs是很棒的,但坦率地说,流体页眉/页脚和三个流体列是Divs的一大痛苦。Divs不是为流动性而设计的,所以为什么要使用它们呢?

注意,这种方法将在链接文本中提供100%的CSS遵从性

我没有对DIVs有利的论据。

我会说:如果事实属实,那就接受吧。

值得注意的是,要找到一种好的DIV+CSS方法来在两列或三列中呈现内容,并且在所有浏览器上都是一致的,并且看起来仍然是我想要的方式,即使不是不可能,也是很困难的。

在我的大多数布局中,这让平衡感向表格倾斜了一点,尽管我对使用它们感到内疚(不知道为什么,人们只是说它不好,所以我试着听他们的),最后,务实的观点是,对我来说,使用表格更容易、更快。我不是按小时计酬的,所以桌子对我来说比较便宜。

对我来说,一个巨大的问题是,表,特别是嵌套表,需要更长的时间来呈现比一个正确布局的css实现。(你可以让css一样慢)。

所有浏览器呈现css的速度都更快,因为每个div都是一个单独的元素,所以用户在阅读时可以加载屏幕。(对于庞大的数据集等)。我在那个实例中使用了css而不是表格,甚至没有处理布局。

嵌套的表(单元格中的表等)直到找到最后一个“/table”才会呈现到浏览器窗口。更糟糕的是,定义不清的表有时甚至无法呈现!或者当它发生的时候,事情就会不正常。(没有正确地与“TD”等共进)

我在大多数情况下使用表格,但当涉及到大数据和希望为最终用户快速呈现屏幕时,我尽最大努力利用CSS所提供的东西。

一张桌子来布置也不错。但大多数情况下,仅靠一张表是无法得到所需的布局的。很快你就有了2到3个嵌套表。这变得非常麻烦。

It IS a LOT harder to read. That's not up to opinion. There's just more nested tags with no identifying marks on them. Separating content from presentation is a good thing because it allows you to focus on what you're doing. Mixing the two leads to bloated pages that are hard to read. CSS for styles allows your browser to cache the files and subsequent requests are much faster. This is HUGE. Tables lock you into a design. Sure, not everyone needs the flexibility of CSS Zen Garden, but I've never worked on a site where I didn't need to change the design a little bit here and there. It's much easier with CSS. Tables are hard to style. You don't have very much flexibility with them (i.e. you still need to add HTML attributes to fully control a table's styles)

我大概有4年没有用表格来处理非表格数据了。我没有回头。

我真的很想建议你阅读Andy Budd的《CSS Mastery》。棒极了。

图片在ecx.images-amazon.com http://ecx.images-amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg