请教这样的效果该怎么做比较合适,分不够可以加现金也行

td 相对定位
div 绝对定位

就一共这么多表格的话就每个td内一个ID。然后把div相对应的td保存到数据库。然后就知道这个DIV是跟那个td对应了。然后就加载的时候获取到td的位置。然后在用绝对定位定一下div。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box td {
position: relative;
width: 150px;
height: 150px;
border: 1px solid #000;
overflow: hidden;
text-align: center;
}
.box td>div, .box td>img {
position: absolute;
}
</style>
</head>
<body>
<table class="box">
<tr>
<td>
<div style="left: 30px; top: 10px; width: 64px; height: 44px; z-index: 2; background: #0f0;"></div>
<div style="left: 45px; top: 50px; width: 67px; height: 20px; z-index: 3;">文本内容</div>
2015/3/14
</td>
<td>
<img src="s3_2.png" style="left: 29px; top: 30px; width: 69px; height: 69px; z-index: 2;" border="0" alt="">
2015/3/14
</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div style="left: 11px; top: 6px; width: 80px; height: 53px; z-index: 2; background: #0ff;"></div>
<div style="left: 77px; top: 28px; width: 30px; height: 76px; z-index: 3; background: #f00;"></div>
2015/3/14
</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

请教这样的效果该怎么做比较合适,分不够可以加 现金也行