html - 如何通过具有(x，y，宽度，高度)的 block 集合生成 html-table maket？

Question

例如我有一些积木

输入:

    [ [name: "Block #1", x:0, y:0, width:4, height:1], [name: "Block #2", x:0, y:1, width:2, height:1], [name: "Block #3", x:2, y:2, width:2, height:1]]

Output:

<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>

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

Answer 1

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

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

如果 block 的高度限制为 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. 先按行再按列对 block 集合进行排序；
2. 准备一份“占用单元格”列表{(x1,y1), (x2,y2), etc};
3. 对于每一行；
4. 获取下一个要填充的单元格；
5. 当您不在下一个要填充的单元格时，如果单元格已填充(检查列表)，则跳过它并将该单元格从“已填充列表”中删除，如果未填充，则添加一个空的 td；<
6. 用适合该 block 的 rowspan/colspan 填充 td；
7. 如果 td 有 r​​owspan/colspan，用额外占用的单元格(x1/y1、x1/y2 等)填充占用单元格列表；
8. 如果该行中还有更多单元格，则转到下一个单元格 (4)；
9. 如果有更多行，转到下一行(3)；
10. 结束。

请注意，您可以使用 colgroup and col 来影响列宽并设置它们的宽度。
table-layout: fixed;听起来很明智。

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