为什么要使用表来构造布局？ [英] Why use tables to structure your layout?

问题描述

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

Looking at the source code for Stack Overflow, I noticed they have used tables and inline CSS quite a bit, also something I found odd was use of inline table attribute formatting.

< table width =100％>

我只是好奇，如果有什么特别的原因，为什么他们使用表来构造他们的模板，而不是流行的（或过去流行的）DIVs。

I'm just curious if there was any specific reason(s) to why they used tables to structure their template instead of the popular (or used to be popular) DIVs.

还有...使用CSS的目的包括和使用在同一页面上的内联CSS（我知道这可能是一个伟大的答案/解决方案...我只是好奇的它们是）

As well...the purpose of using CSS includes and using inline CSS on the same page (I know there is probably a great answer/solution(s) for this...I'm just curious to what they are)

我明白使用表格表格数据没有问题...但在这种情况下，Stack Overflows表格用于结构。

I understand there is nothing wrong with using tables for tabular data...but in this case Stack Overflows tables are used for structure.

推荐答案

表与Divs是无意义的圣战。

Tables vs. Divs is a pointless holy war.

使用表以特定的方式布局，可能会导致问题。其中之一是在单个表中构建整个网站布局，以便处理边距和布局 - 因为表的呈现方式通常意味着网站不会像内容下载一样由浏览器引擎逐步呈现，并且只能在整个事情被接收之后被呈现。对于大页面或慢调制解调器用户，他们可能盯着一个空白页相当一段时间，这是一个坏事。没有意识到在mozilla / ie5代的浏览器中，表格呈现的不一致，使一致的跨浏览器表格布局有些痛苦，尤其是对于单元格中的图像。

There are specific issues with using tables in particular ways for layout that can cause problems. One of these is building an entire site layout in a single table in order to handle margins and placement -- because of the way tables are rendered this frequently means a website will not render progressively by the browser engine as the content downloads, and can only be rendered after the entire thing has been received. For a large page or slow modem user, they may be staring at a blank page for quite a while, which is a "Bad Thing". Never mind a lot of the inconsistencies in table rendering in the mozilla/ie5 generation of browsers that made consistent cross-browser table layouts somewhat painful, especially with images in the cells.

纯div路径的支持者喜欢谈论内容与演示，因为在理论上，HTML 4.01是纯内容，所有这些都是有意义的。 div以抽象的意义提供有意义的组织结构，然后由CSS单独呈现。在这些参数中，表仅在用于包含实际表格数据时才有效。当然，这忽略了这样一个事实：对于任何足够复杂的布局，几乎总有很多空的div仅仅支持用于呈现CSS的必要的钩子，打破了这种抽象的第一级。一旦这个抽象被破坏了，没有法律规定，当你的布局只需要在没有有意义的内容的HTML中的一个表示挂钩，一个div比表更合适。如果你选择一个无意义的div或一个无意义的表格，以使你的布局工作，选择更容易。

Supporters of the pure div path like to talk about content vs. presentation, because in theory HTML 4.01 is pure content, all of it meaningful. The divs provide meaningful organizational structure in an abstract sense, which is then given presentation exclusively by CSS. In these arguments, tables are valid only if being used to contain actual tabular data. Of course, this ignores the fact that for any sufficiently complex layout, there are almost always quite a few empty divs floating around simply to support the necessary hooks for presentation CSS, breaking the first level of this abstraction. Once this abstraction is broken, there's no law stating that, when your layout simply requires a presentation hook in the HTML that has no meaningful content, a div is somehow more appropriate than a table. If you are stuck with the choice of a meaningless div or a meaningless table in order to make your layout work, choose whichever is easier.

最后，意识到所有方法中的限制并使用最合适的方法。在许多情况下，使用表格比设置一个无意义（即不是内容有意义）的div数组更容易，并且表格呈现限制不适用。如果表是小的并且表示内部内容的小块，则呈现延迟是不相关的。

In the end, it's about being aware of the limitations in all methods and using the one that is most appropriate. There are many cases where using a table is simply easier than setting up a pointless (i.e. not-content-meaningful) array of divs, and the table rendering limitations don't apply. If the table is small and represents a minor chunk of the interior content, the rendering delay is not relevant.

这篇关于为什么要使用表来构造布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！