用于将基于表格的HTML布局重构为CSS的工具？

StackOverflow https://stackoverflow.com/questions/151369

题

鉴于HTML页面具有复杂的基于表格的布局，并且许多标签都是复制和浪费的，例如：

td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.

是否有工具可以帮助将页面重构为更紧凑的形式？例如，一个自动生成CSS样式和选择器的工具？将表转换为div布局？

为了了解问题的顺序，我正在查看的页面是＆gt; 8000行HTML和JavaScript，即500Kb 不计算图像！

更新：重新。 “放弃并从头开始”评论。在现实世界中，这意味着什么？打印页面，扫描它，在Dreamweaver中将其设置为背景图像，然后从那开始？真的吗？这真的比重构更有效吗？

更新：我没有诋毁“从头开始追踪”我也不是故意暗示Dreamweaver无论如何都是我的选择工具。我很惊讶重构布局被认为是一个棘手的问题。

有帮助吗？

解决方案

我同意 TimB 自动化工具在执行此操作时会遇到问题，特别是使关系跳转以最有效的方式组合和抽象CSS。

如果您要呈现表格数据，可能可以合理地尝试将内联CSS重构为可重用的类。

如果你有很多类似的内联样式表，你可以通过简单的搜索和替换逐步重构CSS。 这将为您提供许多类，这些类匹配类似表的子集和许多类似的类。 将其分解为布局和演示将是一个良好的开端，然后用每个主题或语义相关项的特定类来覆盖它们。

我仍然建议从头开始，它可能会更快，并且您只能重新创建展示页面所需的内容，并且可以在以后重复使用元素或元素集合

如果需要再次修改页面，花费的时间也会还清显着。

但根本不是可能是吗？ ：d

其他提示

我不知道具体的工具，只有通用的咖啡因和 Firebug ，任何人都在做CSS工作应该知道。

我认为问题非常严重，自动化工具很难产生良好的，可维护的标记和CSS。

好像您正在寻找更加自动化的方法，将旧的基于表格的布局重新分解为CSS标准。但是，我同意其他一些“从头开始”的评论。

这对您意味着您应该尝试使用HTML表重建（使用CSS）外观。如果这个概念逃脱了你，那么我会建议谷歌搜索一些初学CSS教程，甚至可能一些专注于教授表格＆gt; CSS布局的概念..

另一个需要考虑的工具（可能会进一步帮助你）将是某种CSS“框架”。我建议 Blueprint CSS ，因为它有助于创建网格/表格式布局很少。另一个好处是 Yet-Another-Multicolumn-Layout ，它非常整洁多列布局构建器。

不要只是将它扔在Dreamweaver或任何选择的工具中并将其切片。首先以纯语义风格编写HTML。例如，一个非常常见的布局最终将成为：

<body>
  <div id="header">
    <img id="logo"/>
    <h1 id="title">
      My Site
    </h1>
    <div id="subtitle">Playing with css</div>
  </div>
  <div id="content">
    <h2>Page 1</h2>
    <p>Blah blah blah..</p>
  </div>
  <div id="menu">
    <ul>
      <li><a>Some link</a></li>
      ...
    </ul>
  </div>
</body>

以对您的内容有意义的方式执行HTML。如果您根本没有CSS，它应该可用。之后，添加CSS以使其看起来像您想要的那样。现在有了浏览器/ CSS的状态，你仍然可能需要在HTML中添加一些装饰器 - 例如，将一些东西包装在额外的div中，只是为了能够以你想要的方式获取内容。

一旦完成，您将拥有一个非常灵活的布局，可以使用CSS轻松修改，并且您将拥有一个可供残疾人和搜索引擎访问的页面。

在获得它的诀窍之前确实需要相当多的学习，但这是值得的。抵制放弃的诱惑，回到基于表格的布局，然后继续努力。一切都可以使用语义HTML和CSS完成。

你在你的问题中诋毁了这种方法，但我建议你在浏览器中截取你的页面的屏幕截图，你最喜欢它的渲染，声明这是你的参考，并开始尝试重新创建它。它比你想象的容易。我不得不采用基于表格的旧式布局，并将它们转换为使用现代技术完成的CMS模板，这并不是一件坏事。

我现在正在处理类似的问题，不像听起来那么混乱，但是asp.net网页形式非常糟糕，视图状态过于夸张，以及从数据库格式化搜索结果的深层嵌套服务器控件的产物。导致50个DB行的标记为~300 - 400K - yeek。

我还没有找到任何自动化工具来完成重构的合理工作。

从像visual studio这样的工具开始，您可以使用该工具以一致的方式重新格式化代码。然后，您可以使用正则表达式和矩形选择的组合来开始清除垃圾，并剥离冗余标记，开始排除重要和不重要的内容，然后手动开始定义一个有效的模式来呈现信息。

诀窍是打破可管理的块，然后从那里构建它。

如果你有很多实际的“表格数据”，格式化，并且只是一次性的，我发现excel有几次成为我的救星，将数据粘贴到工作表中，然后使用连接和填充的组合来生成表格数据的标记。

从头开始意味着回到设计绘图板。如果你需要重构这样的怪物，那么你总是会把它做得更好，你也可以完全重新设计。

如果你想摆脱重复和浪费的标签，你需要逃离Dreamewaver。一个好的文本编辑器（jedit，emacs，vim，eclipse等）就是你真正需要的。如果您正确地自定义编辑器，您甚至不会错过Dreamweaver。 （带有nXhtml和yasnippets的Emacs是我最喜欢的。）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top