html - 将基于表格的布局转换为基于 div/css 的布局

Question

我应该为一个相当大的 Web 应用程序重写 UI。问题是布局完全基于表格，如果我能以某种方式半自动地将表格转换为 div，它将为我节省大量时间。

做这样的事情时最好的做法是什么？这是个好主意吗？

应用程序使用在运行时解析为 html 的布局文件（包含类似于帮助程序的内容），应用程序本身也在特定位置输出 html。因此，工作将包括在应用程序中转换这些帮助程序和 htmloutput 代码。

score 4 · Accepted Answer

使用基于 CSS 的表格布局：

进行字符串替换，分别将 every 和 into 转换为

添加这样的样式定义：

div.table { display:table; }
div.tr    { display:table-row; }
div.td    { display:table-cell; }

这样，一切都应该看起来像一个表格布局，而不是真正的一个

最大的缺点：如果你使用 rowspan 和 colspan，那你就不走运了，CSS 中没有这样的机制

score 3 · Accepted Answer

避免表格的最大好处是在 HTML 中使用语义标记，并使用 CSS 进行布局，从而将内容与呈现分离。

如果它是生成 HTML 的应用程序，这可能无法实现，除了安抚“被认为有害的表格”样式警察之外，几乎没有任何好处。

我当然可以看到简单地将 <table> 替换为 <div class="table"> 等没有任何好处。这是对避免使用表格进行布局所带来的好处的完全误解。

2 回答 2