html - 为什么要使用表格来构建布局？

Question

查看 Stack Overflow 的源代码，我注意到他们大量使用了表格和内联 CSS，我还发现奇怪的是内联表格属性格式的使用。

<table width="100%">

我很好奇是否有任何具体原因可以解释为什么他们使用表格而不是流行的(或曾经流行的)DIV 来构建他们的模板。

还有...使用 CSS 的目的包括在同一页面上使用内联 CSS(我知道对此可能有很好的答案/解决方案...我只是对它们是什么感到好奇)

我知道将表格用于表格数据没有任何问题......但在这种情况下，Stack Overflows 表格用于结构。

Answer 1

Tables vs. Divs 是一场毫无意义的圣战。

以特定方式使用表格进行布局时存在一些特定问题，这些问题可能会导致问题。其中之一是在单个表格中构建整个站点布局，以处理边距和位置——由于表格的呈现方式，这通常意味着网站不会随着内容下载而由浏览器引擎逐步呈现，并且只能在收到全部内容后进行渲染。对于大页面或慢速调制解调器用户，他们可能会长时间盯着空白页面，这是一件“坏事”。不要介意 mozilla/ie5 一代浏览器中表格呈现的许多不一致，这使得一致的跨浏览器表格布局有些痛苦，尤其是单元格中的图像。

纯 div 路径的支持者喜欢谈论内容与表示，因为理论上 HTML 4.01 是纯内容，所有内容都有意义。 div 在抽象意义上提供了有意义的组织结构，然后由 CSS 专门给出了表示。在这些参数中，表格仅在用于包含实际表格数据时才有效。当然，这忽略了一个事实，即对于任何足够复杂的布局，几乎总是有相当多的空 div 漂浮在周围，只是为了支持呈现 CSS 的必要钩子(Hook)，打破了这个抽象的第一层。一旦这种抽象被打破，就没有法律规定，当您的布局只需要 HTML 中的表示 Hook 而没有有意义的内容时，div 在某种程度上比表格更合适。如果您难以选择无意义的 div 或无意义的表格以使您的布局正常工作，请选择更容易的一个。

最后，它是关于了解所有方法的局限性并使用最合适的方法。在许多情况下，使用表格比设置无意义的(即没有内容意义的)div 数组更容易，并且表格呈现限制不适用。如果表格很小并且代表内部内容的一小部分，则渲染延迟不相关。