网页无表格设计的好处？ [复制]答案

【问题标题】：benefits of tableless design of web pages? [duplicate]网页无表格设计的好处？ [复制]
【发布时间】：2011-03-23 01:14:15
【问题描述】：

可能重复：
Why not use tables for layout in HTML?

这些天来，我阅读了很多关于我们应该编写无表格 HTML 的内容。我相信这需要大量的 CSS 知识。我的问题是：

无表设计有什么好处？
应该在什么条件下使用表格？
如何开始？

【问题讨论】：

"使用表格的条件是什么？"当您想要显示表格数据时。也就是用tables来展示数据表，用css来布局。不要试图在没有表格的情况下重新创建表格，也不要使用表格进行布局。
重复：stackoverflow.com/questions/83073/… 任何想要免费积分的人都可以在这里复制答案：p
很确定这个问题已经被做死了：stackoverflow.com/questions/407420/…stackoverflow.com/questions/1518223/…stackoverflow.com/questions/30251/tables-instead-of-divs stackoverflow.com/questions/96137/…stackoverflow.com/questions/83073/div-vs-table
同意，这个问题由来已久。但有些开发人员不是。有时再次询问专家会有所帮助，以确保我们没有看到已经过时的“真相”。不过，感谢您的链接。它有助于提供完整的图片而无需大量输入。
感谢您添加并找到我之前在 SO 中提出的类似问题。我同样也在阅读这些答案，但我认为如何开始以及何时确切使用（例如表格）的问题更加焦虑，我相信可以在这里得到回答。谢谢

标签： html css

【解决方案1】：

您可以在页面渲染方面获得更好的性能，并且它将基于标准。使用<div> 标签搭配无表设计。

【讨论】：

如何获得更好的性能？请问原因..
它不必解析所有表格标签，尤其是嵌套时
@mattmc3：+1！它们非常适合……嗯……表格数据。
如果一个解决方案在 90% 的情况下都有效，那么它的否定标志是非常糟糕的。

【解决方案2】：

这是一个关于该主题的非常好的演示：http://www.hotdesign.com/seybold/

【讨论】：

【解决方案3】：

使用无表格设计，更改页面布局更容易，并且您编写的 html 更少。表格只能用于表格数据。

【讨论】：

创建表格是否符合要使用的表格？
不，您可以使用浮动和位置来实现相同的效果。表格仅用于表格数据，他们非常擅长。
查看this question 了解表格的使用情况
@Eric 我已阅读您提供的链接，谢谢。但是，我不能得出结论，因为表格是否可以用于表格。我还看到有些人建议使用 UL Li Lists 进行表单设计。它与表格相同（与表格一样重且面向标记）。

【解决方案4】：

关于表格与 div 在整个互联网上的广泛讨论。

我非常支持使用表格来表示表格数据。但是，这就是它们的使用范围。对于页面结构和布局，您应该使用 div 和 css。

深入阅读smashing magazine article，了解表格与 div。

【讨论】：

创建表单。符合要使用的表的条件。 ?
我个人不会。使用 ul 和 labels 并使用 css 设置样式。示例：woork.blogspot.com/2008/06/…
带有标签的 UL 是正确的方法吗？请阅读：green-beast.com/blog/?p=259

【解决方案5】：

tableless有什么好处设计？

有很多，其中最重要的是减少了 HTML 负载，以及在不更改标记的情况下更改布局（通过 CSS）的灵活性。

他们减少负载的一个方法是，样式存储在外部样式表中，并且样式表通常在页面之间共享，缓存确实可以起到救援作用。有人可能会争辩说样式表可以与表格一起使用。对;然而，有规律地使用 div 进行布局往往会促进使用样式表。

您可以阅读搜索引擎优化 (SEO) 设计。 SEO 的一个原则是将您的重要内容放在 HTML 树的顶部，在导航等相对不重要的内容之上。这对于基于表格的设计来说确实是不可能的。

什么情况下应该使用表格？

使用表格显示表格数据。避免使用它们进行布局。

如何开始？

我是 w3schools 的粉丝，也是 CSS Zen Garden 的粉丝。这些给了我我的开始。

【讨论】：

抱歉，这听起来很愚蠢？你能给我一个表格数据的例子吗？
我的经验法则是：如果行和列有意义，它就是表格。通常，每一行都是一个实体（如员工），每一列代表一个特定的属性（如“名字”、“出生日期”等）。
没错。我的另一个规则是，表中的数据可以排序和分页吗？如果没有，您可能误用了表格进行布局。
W3schools 并不是一个很好的网页设计信息来源（他们的网站是基于表格的）：w3fools.com
@Blender：他们的内容好坏是主观的。我发现它作为初学者非常有用。我并没有暗示 OP 应该使用“查看源代码”打开站点以了解 HTML，而是阅读内容。如果您认为 w3fools.com 是更好的资源，请务必发布答案。尽管该问题在六个月前已关闭，但您可以找到其中一份原件并在那里发布。

【解决方案6】：

表格应该用于显示表格数据，而不是用于布局。

分离出的 css 文件会让您获得更好的性能，因为这样浏览器可以缓存您网站页面之间的演示详细信息。

使用分离的 css 还可以更轻松地根据所使用的浏览器交换视图（例如，我希望向 iPhone 用户显示与 IE 用户截然不同的内容）。

这也使得更改网站的外观和感觉变得非常容易，而无需更改生成内容本身的代码（例如，如果您使用 PHP 生成 html）。

【讨论】：

【解决方案7】：

无表格网页设计为您提供以下功能：

更少的标记

表格需要大量代码来实际创建表格单元格和行，而 div 只是一个简单的打开和关闭标记。这意味着您的用户在加载页面时下载的内容更少。

更容易维护

由于无表设计的标记更少，代码更易于维护（需要遍历的代码更少）。向无表格设计添加元素也更容易，因为您不必遍历表格并确定需要将所有行跨度和列跨度添加到现有行和列的位置。

内容和演示是分开的

这是关键。使用无表格设计，swap the CSS 和完全改变网站的外观和感觉要容易得多，而无需触及标记。

表格用于数据

在显示表格数据时应使用表格。它们的结构使它们非常擅长定义标题和数据之间的关系。因此，它们非常适合用于表格数据的可访问性。

渔获

虽然在 CSS 中没有太多要学习的东西，但要适应所有浏览器呈现的不一致需要很长时间（我在看你的 IE ......）。如果你想开始，我强烈建议你专注于学习如何floats and position behave。一旦你解决了这个问题，它就会变得容易得多。

【讨论】：