我即将开始使用基于表格的复杂布局（几年前编码）的网页。
我想做的一件事就是将布局转换为带有div和span的正确CSS布局。
你能否提出一个解决这类问题的好方法？我应该使用像Blueprint这样的CSS框架吗？只是进入并破解它直到它看起来正确？我已经大量使用了Firebug和IE Developer Toolbar。
答案 0 :(得分：13)
在表和CSS之间进行转换通常没有灵丹妙药。每个站点都不同，有不同的要求。唯一真正的答案是：只需从头开始标记。
最好的建议是先完全编写标记。确保标记是准确的，语义的，并完全代表您的数据。 不要编写样式表...... 标记完成后，创建CSS。通过这种方式，您可以使用语义标记，CSS可以完全控制演示文稿。
CSS框架通常不提倡这种语义标记方法，因为它们会强制您添加其他标记以符合其方法。因此，CSS框架有时比它的价值更麻烦。
做标记，然后是CSS。
答案 1 :(得分：4)
在开始之前，请确保使用CSS重置。 Eric Meyer和Yahoo YUI都非常出色。这有助于使所有浏览器看起来都一样。
另外，也要安装HTML validator。这将确保您的HTML看起来很好并准备好添加CSS。
然后获取Firebug的副本并将其安装在Firefox中。这非常适合查看哪些CSS规则正在执行哪些操作。您可以通过单击每个规则的s cross来禁用单个规则。
现在，访问一些正确验证的网页，看看他们在样式表中使用了哪些规则。
要尝试的网站有www.alistapart.com，CSS Zen Garden，SimpleBits等。
答案 2 :(得分：3)
转换过程将是一个痛苦的头痛！我建议你重新设计一下。
答案 3 :(得分：1)
我不知道这可以提供任何帮助，我构建了名为Emastic的CSS框架（支持流体和固定列），如果您需要，可以模拟表格示例Emastic Table
答案 4 :(得分：1)
我认为你应该从头开始重新设计整个事情的评论者。清理HTML然后制作CSS。
我想补充一下这样做的理由。通常基于表格的设计至少有几年的历史，因此看起来非常流行。利用这个机会改进设计。根据您的品味和需求，轻微刷新或彻底检修。
答案 5 :(得分：0)
迭代方式也有效。从小块开始，将它们转换为CSS。这应该简化你的表结构，希望只留下表中的“基本网格”，其余全部留在CSS中。
从那里，选择一个现有的，经过测试的解决方案，如果它是一个简单的布局（对于1到3列，那里有大量经过测试的解决方案）。如果它更复杂，请使用Blueprint。
答案 6 :(得分：0)
我不会使用框架。学习新框架只有在你使用它时才有用。再次。每个框架都有自己的缺陷和弱点。使用
display: table-cell;
制作专栏。这些将与float: left;类似。见http://quirksmode.org/css/css2/display.html
答案 7 :(得分：0)
在某些情况下，使用正则表达式可以加快您的过程。
例如，像这样：
<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>
将匹配表的开头，并为$ 1提供$ 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的简单形式。