如何通过收集具有（x，y，宽度，高度）的块来生成 html-table make？

Question

例如我有块的集合

输入：

[ [名称：“块#1”，x：0，y：0，宽度：4，高度：1]， [名称：“块＃2”，x：0，y：1，宽度：2，高度：1]， [名称：“块#3”，x：2，y：2，宽度：2，高度：1] ]

输出：

<table width="4" border="1">  
 <tr>    
  <td colspan="2" width="4" height="1">Block #1</td>  
 </tr>  
 <tr>    
  <td width="2" height="1">Block #2</td>  
  <td width="2" height="1">Block #3</td>  
 </tr>  
</table>

对算法有什么想法吗？块不交叉。

Answer 1

OP 说 position: absolute; 不是一个选项（http://jsfiddle.net/qCreh/1/），所以它是表格。

（您想在 tds 上使用 colspan 和 rowspan，而不是宽度和高度。）

如果块的高度限制为 1，那就很简单了。
但它们不是，因此您必须计算是否添加空单元格以用作左填充。由于这种行为：

<table>
<tr><td rowspan="2">I am at 0,0</td><td>I am at 0,1</td></tr>
<tr><td>1,1</td><td>I am at 1,1 and not 0,0 because of the previous rowspan!</td></tr>
</table>

所以，算法可能是：

1. 先按行再按列对块的集合进行排序；
2. 准备“占用单元”列表{(x1,y1)、(x2,y2)等}；
3. 对于每一行；
4. 获取下一个要填充的单元格；
5. 当您不在下一个要填充的单元格时，如果该单元格已填充（检查列表）跳过它并从“填充列表”中删除该单元格，如果未填充则添加一个空 td；李>
6. 用块的适当行跨度/列跨度填充 td；
7. 如果 td 具有 rowspan/colspan，则使用额外占用的单元格（x1/y1、x1/y2 等）填充占用单元格列表；
8. 如果该行还有更多单元格，则转到下一个单元格（4）；
9. 如果还有更多行，转到下一行 (3)；
10. 结束。

请注意，您可以通过使用colgroup and col 并为其设置宽度来影响列的宽度。
table-layout: fixed; 听起来很合理。

这是一个好的解决方案吗？