将表格布局转换为 CSS 布局的最佳方法是什么？答案

【问题标题】：What's the best way to convert table layout to CSS layout?将表格布局转换为 CSS 布局的最佳方法是什么？
【发布时间】：2009-03-30 05:56:44
【问题描述】：

我即将开始使用基于表格的复杂布局（几年前编码）的网页。

我想做的一件事是将布局转换为带有 div 和 span 的正确 CSS 布局。

您能否提出解决此类问题的好方法？我应该使用像 Blueprint 这样的 CSS 框架吗？只是进入那里并破解它直到它看起来正确？我已经大量使用了 Firebug 和 IE Developer Toolbar。

【问题讨论】：

标签： html css

【解决方案1】：

在表格和 CSS 之间进行转换通常没有灵丹妙药。每个网站都是不同的，有不同的要求。唯一真正的答案是：从头开始标记。

最好的建议是先完全编写标记。确保标记准确、语义化并完全代表您的数据。 暂时不要编写样式表。 标记完成后，创建 CSS。这样你就有了语义标记，而 CSS 纯粹是控制表示。

CSS 框架通常不提倡这种语义标记方法，因为它们会强制您添加额外的标签以符合他们的方法。因此，CSS 框架有时比它的价值更麻烦。

先做标记，然后是 CSS。

【讨论】：

虽然从理论上讲这很好，但请记住，有时您必须“调整”您的标记（更改顺序、添加类、在 div 或 span 中包装一些元素）。还行吧！ Div、spans 和 classes 在语义上没有错误，只是不要滥用它们。

【解决方案2】：

在开始之前，请确保您使用的是 CSS 重置。 Eric Meyer 和 Yahoo YUI 都很棒。这将有助于使您的所有浏览器看起来都一样。

另外，也安装HTML validator。这将确保您的 HTML 看起来不错并且可以添加 CSS。

然后获取Firebug 的副本并将其安装到Firefox 中。这对于查看哪些 CSS 规则在做什么非常有用。您可以通过单击每个规则的交叉来禁用单个规则。

现在，访问一些正确验证的网页，看看他们在样式表中使用了哪些规则。

【讨论】：

【解决方案3】：

转换过程将是一个痛苦的头痛！我建议你开始一个整体的重新设计。

【讨论】：

【解决方案4】：

我不知道这是否有任何帮助，我构建了名为 Emastic 的 CSS 框架（支持流动和固定列），如果需要，您可以模拟表格这里是示例 Emastic Table

【讨论】：

【解决方案5】：

我赞同那些说你应该从头开始重新设计整个东西的评论。清理 HTML，然后制作 CSS。

我想添加一个这样做的理由。通常基于表格的设计至少有几年的历史，因此看起来已经过时了。利用这个机会改进设计。根据您的口味和需求，进行轻微更新或彻底检修。

【讨论】：

【解决方案6】：

迭代方式也可以。从小块开始，将它们转换为 CSS。这应该会简化您的表格结构，希望只在表格中保留“基本网格”，而在 CSS 中保留所有其余部分。

从那里选择一个现有的、经过测试的解决方案，如果它是一个简单的布局（对于 1 到 3 列，那里有大量经过测试的解决方案）。如果它更复杂，请使用蓝图。

【讨论】：

【解决方案7】：

我不会使用框架。学习一个新框架只有在你一遍又一遍地使用它时才有用。每个框架都有自己的错误和弱点。使用

display: table-cell;

创建一个专栏。这些将像float: left; 一样排列。见http://quirksmode.org/css/css2/display.html

【讨论】：

【解决方案8】：

在某些情况下，使用正则表达式可以加快您的进程。

例如，像这样的：

<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>

将匹配表格的开头并提供 $1 中第一个单元格的内容以进行替换：

<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>

当然，您需要进行自定义以匹配您的特定用例。如果您有许多类似的页面，您可以尝试先手动编码一个，然后使用类似的方法来简化其他页面的转换。

另一种方法是使用类似这样的 jQuery 插件：https://github.com/ryandoom/jquery-plugin-table-to-div

它旨在修改以下渲染，但可以在开发过程中用于获取给定表格并提供基于 DIV 的简单形式。

【讨论】：