当您需要确保元素在布局中保持特定的物理关系时，请使用表格。对于数据，表格通常是最适合使用的布局元素，因为您不希望列以超出预期的方式包装，从而混淆了关联。

也有人可能会说，必须保持特定关系的非数据元素也应该呈现在表中。

灵活的css布局非常适合于移动设备、大屏幕、打印和其他显示类型的内容，但有时，内容必须以非常特定的方式显示，如果这要求屏幕阅读器无法轻松访问它，那么它可能是非常合理的。

Flex有一个标签，用于在垂直列中布局内容。说实话，我不认为他们在布局/内容方面做得很好，但至少他们已经解决了这个问题。

像许多对CSS感到沮丧的人一样，我也到处寻找一个简单的答案，当我以为我找到了它时，我感到兴奋，然后当我在Chrome中打开页面时，我的希望破灭了。我肯定没有足够的技能说这是不可能的，但我还没有看到任何人提供样本代码供同行评审，明确地证明它可以可靠地完成。

那么，这个岛的CSS方面有人能推荐一种布局垂直列的心态/方法吗?我尝试过在第二行和第三行绝对定位，但我最终与到处重叠的东西和浮动有类似的问题，如果页面缩小。

如果这个问题有答案，我会欣喜若狂地做正确的事情——只要告诉我一些像“嘿，你试过**流:垂直|水平”这样的事情，我就完全不烦你了。

This isn't really about whether 'divs are better than tables for layout'. Someone who understands CSS can duplicate any design using 'layout tables' pretty straightforwardly. The real win is using HTML elements for what they are there for. The reason you would not use tables for non-tablular data is the same reason you don't store integers as character strings - technology works much more easily when you use it for the purpose for which it is desgined. If it was ever necessary to use tables for layout (because of browser shortcomings in the early 1990s) it certainly isn't now.

DOM操作在基于表的布局中是很困难的。

使用语义div:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

表:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

当然，第二个例子有点愚蠢，您总是可以将id或类应用到表或td元素上，但这将增加语义值，这是表的支持者强烈反对的。

1:是的，你的用户很关心。如果他们使用屏幕阅读器，它就会丢失。如果我使用任何其他试图从页面中提取信息的工具，遇到不用于表示表格数据的表是一种误导。

div或span用于分隔内容是可以接受的，因为这正是那些元素的含义。当我，一个搜索引擎，一个屏幕阅读器或其他任何东西，遇到一个表格元素，我们期望这意味着“以下是表格数据，表示在一个表中”。当我们遇到div时，我们期望“这是一个用于将内容划分为单独部分或区域的元素。

2 .可读性:错误。如果所有的表示代码都是css，我可以阅读html，我将理解页面的内容。或者我可以阅读css和理解的表示。如果html中的所有内容都是混杂在一起的，那么在我甚至可以看到什么是内容，什么不是内容之前，我必须在脑海中剔除所有与表示相关的部分。 此外，我害怕遇到一个不懂css的web开发人员，所以我真的不认为这是一个问题。

3:表比较慢:是的，它们比较慢。原因很简单:在呈现表之前，必须对表进行完整的解析，包括其内容。可以在遇到div时呈现它，甚至在它的内容被解析之前。这意味着div会在页面加载完成之前显示出来。

还有一个好处是，表格更加脆弱，在不同的浏览器中呈现的效果并不总是一样的，不同的字体和字体大小以及所有其他可能导致布局变化的因素。表格是一种很好的方法，可以确保你的网站在某些浏览器中会偏离一两个像素，当用户改变字体大小或以任何其他方式改变设置时，它不会很好地缩放。

Of course #1 is the big one. A lot of tools and applications depend on the semantic meaning of a webpage. The usual example is screen-readers for visually impaired users. If you're a web developer, you'll find that many large companies who may otherwise hire you to work on a site, require that the site is accessible even in this case. Which means you have to think about the semantic meaning of your html. With the semantic web, or more relevantly, microformats, rss readers and other tools, your page content is no longer viewed exclusively through a browser.

The issue of strictly separating presentation and content strikes me as roughly analogous to separating header files from implementation files in C++. It makes sense, but it can also be a pain. Witness Java and C# where classes are defined in a single source file. The authors of the newer languages noticed something that was causing programmers headaches and they got rid of it. That seems to be the gist of this discussion. One side is saying CSS is too difficult, the other side is saying one must become a CSS master.

对于简单的布局问题，为什么不改变表示必须完全独立的规则呢?一个新的标签(或者一些div标签的扩展)可以让我们直接在HTML中控制显示?毕竟，我们不是已经将表示泄露到HTML中了吗?看看h1, h2, h6。我们都知道这些控制表示。

阅读代码(HTML就是代码)的能力非常重要。专家们往往忽略了使编程环境尽可能为大众所接受的重要性。认为只有专业程序员才重要是非常短视的。