如何将表格布局转换为CSS布局的最佳方法？

Question

10

我即将开始处理一个带有复杂表格布局的网页（数年前编码的）。

其中一件我想做的事情是将这个布局转换成使用div和span的CSS布局。

你能为此类问题提供一个好的解决方案吗？我应该使用像Blueprint这样的CSS框架吗？或者只是不断地进行试错直到看起来正确？我已经在大量使用Firebug和IE Developer Toolbar。

- Dan Fabulich

8个回答

4

在开始前，请确保您使用了CSS重置。Eric Meyer和Yahoo YUI都很好。这将有助于使您的所有浏览器看起来相同。

另外，也要安装HTML验证工具。这将确保您的HTML看起来良好，并准备添加CSS。

然后，在Firefox中下载Firebug并安装它。这对于查看哪些CSS规则正在执行非常有用。您可以通过单击每个规则旁边的十字架来禁用单个规则。

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

- Jon

3

转换过程将是一个痛苦的头疼！我建议您开始全面重新设计。

- Sepehr Lajevardi

1

我不知道这是否有所帮助，我建立了一个名为Emastic的CSS框架（支持流体和固定列），如果您想要模拟表格，可以参考这个例子Emastic Table

- vladocar

1

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

我想补充一个理由。通常基于表格的设计至少有几年历史，因此看起来相当过时。利用这个机会改善设计。根据您的口味和需求进行轻微的刷新或完全的改版。

- allesklar

0

迭代方式同样有效。从小块开始，将它们转换为CSS。这应该简化您的表格结构，希望只剩下表格中的“基本网格”和所有其他内容都在CSS中。

从那里开始，如果是简单的布局（1到3列），则选择现有的经过测试的解决方案（有很多经过测试的解决方案）。如果更复杂，请使用Blueprint。

- MaxVT

0

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

例如，像这样的东西：

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

将匹配表的开头，并为替换提供第一个单元格的内容$1：

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

当然，您需要根据特定的用例进行自定义。如果您有许多类似的页面，可以先手动编写一个页面，然后使用类似于这样的工具来简化其他页面的转换。

它旨在修改以下呈现方式，但在开发过程中也可以使用它来获取给定表格并提供基于DIV的简单表单。

- peater

0

我不会使用框架。只有当你一遍又一遍地使用它时，学习新框架才有用。每个框架都有自己的漏洞和弱点。使用原生语言

display: table-cell;

创建一个列。它们将像 float: left; 一样排列。参见 http://quirksmode.org/css/css2/display.html

- Chloe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Carl Vondrick · Accepted Answer

在表格和CSS之间进行转换通常没有一种万能解决方案。每个网站都不同，具有不同的要求。唯一真正的答案是：从头开始编写标记。

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

CSS框架通常不倡导使用这种语义标记方法，因为它们强制您添加额外的标签以符合其方法。因此，CSS框架有时会带来更多麻烦。

先做标记，再做CSS。