将表格标签转换为标准 CSS 的最简单方法是什么？答案

【问题标题】：What is the easiest way to convert table tags into standard css?将表格标签转换为标准 CSS 的最简单方法是什么？
【发布时间】：2010-12-11 09:42:43
【问题描述】：

我尝试手动执行此操作，但很容易出错。有没有更简单的自动转换方法？

【问题讨论】：

【解决方案1】：

第 1 步。认真思考您为什么（以及是否）要这样做。

第 2 步。从头开始并重建您拥有的东西，或者采用真正适合 css 样式的设计。

第 3 步。当在不同的浏览器定义中出现不可避免的流程和布局问题时，请参阅第 1 步。

【讨论】：

【解决方案2】：

我认为这确实很难自动化。我可以想象某个地方的某个工具会尝试为您执行此操作，并且大概它会做的是将每个内容块包装在 div 标签中，然后绝对定位每个内容，使其与该内容所在的位置相匹配原始页面。不要这样做。

重新开始。将您的内容分离到语义上有意义的容器中。然后尽可能简单地定位它们。一个简单的基于网格的布局通常可以通过使用“float:left”将 div 彼此相邻放置并在适当时使用“clear”来实现。

【讨论】：

【解决方案3】：

编写良好的 (X)HTML 在语义上应该是合理的。这意味着您使用的标签应该与它们包含的内容相匹配。

例如，一个有序的元素列表应该包含在<ol> 标记中，一段文本包含在<p> 标记中，一个标题包含在<h#> 标记中。

语义 (X)HTML 中用于分组和布局的标签是 <span> 和 <div> 标签。

由于在哪里使用哪些标签的区别是语义上的区别，因此没有一种简单的方法可以“自动化”这一点。我的建议是拿起一本关于语义 (X)HTML 的书（我强烈推荐 Dan Cederholm 的 Bulletproof Web Design——它在该领域是规范的）并从头开始重写您的代码。

应该不难。

【讨论】：

【解决方案4】：

也许问题在于将表格“转换”为 CSS 的想法。自下而上重新考虑您的 HTML 布局并从头开始编写代码。

【讨论】：