【发布时间】：2011-05-25 21:52:52
【问题描述】：
我知道使用表格作为布局是一个大问题。为什么专业的网页设计师不再使用表格进行布局？以及我可以使用哪些 CSS 替代品并将成为表格的最佳替代品？？
【问题讨论】：
-
尝试使用搜索功能...
【发布时间】：2011-05-25 21:52:52
【问题描述】：
CSS 不为表格提供“替代方案”。它用于设置 HTML 元素的样式，包括表格。
【讨论】：
1) 一旦浏览器看到一个开始的表格标签，它就会停止渲染，直到它看到结束标签，因为它甚至无法猜测表格结构会是什么样子。正因为如此，表格将大大增加从用户开始请求到他们可以实际使用您的页面之间的等待时间。
2) 表格需要 3 个嵌套标签来定义一个单元格，这在已经非常冗长的语言 (xml) 中会产生很多噪音
3) 从语义上讲，表格用于表格数据。将其用于布局意味着您的 html 在您阅读时没有意义。
【讨论】：
-
我想补充一点，表格意味着用于数据，因此它们完全可以用于显示数据。它是唯一 （优秀的）开发人员反对使用它们的布局。另一种方法是使用 div 进行布局 - 我个人发现很难掌握 div 布局的窍门，但是一旦你掌握了浮动和清除的窍门，它们真的很容易让它们做你想做的事情。在我看来，现在是花时间学习这项技术的好时机。它将使您与其他开发人员保持良好的关系。
-
基本上我所做的是使用具有 2-3 个嵌套 div 的相对 div，这些 div 设置为
float: left并设置了宽度。宽度之和必须小于 100%。确保设置宽度，否则默认情况下它们将是 100%。然后，您将另一个嵌套的 div 设置为clear: both。这使得父 div 环绕浮动 div。如果您希望 div 在右侧对齐，请使用float: right。如果您想对这些嵌套的 div 中的任何一个应用填充或边距，请在应用了填充/边距的那些 div 中插入另一个 div。继续... -
这是因为在div的宽度上增加了padding/margin/border。例如，如果您有两个加起来为 100% 的 div，并且您给它们两个填充，它们的实际宽度将是您给它们 + 填充的宽度。相反，只需将填充应用于其中的 div，它不会添加到浮动 div 的宽度。
-
@user418343：不幸的是，我在过去 8 年左右的时间里逐渐学习 css，所以我没有适合你的书。这看起来像是一本初学者的书，在亚马逊上得到了很高的评价amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447/…
-
快速谷歌后我发现了这些：css.maxdesign.com.au/floatutorial; quirksmode.org/css/clearing.html; tizag.com/cssT/float.php。不确定它们是否有用 - 只需从谷歌搜索“浮动和清除”和“浮动和清除教程”中获取几个结果。希望这会有所帮助。
尝试学习使用div标签并使用css为其赋予样式..它在外观上更有效果
【讨论】：
我肯定会建议使用 CSS 和 XHTML 来布局页面。
我认为这里有太多好处。从可访问性、搜索引擎优化、易于编码到面向未来的验证。我认为有关该主题的博客文章和文章将能够提供有关为什么以及如何使用 CSS 而不是表格来布局页面的更多信息。
我推荐的一本书是Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm 这本书将告诉您有关以符合 Web 标准的方式使用 CSS 和 HTML 的所有知识。
要记住的一点是，HTML5 开始得到广泛使用，与 XHTML 存在一些差异和添加的功能
【讨论】：