html中如何将表格<td>进行拆分

问题是这样的：我又一种表格设计方式是这样的，用了html中的

 <table>

,
想实现下面的样式:
图片说明

但是如果用
table
tr
td /td
td /td
td /td
tr
/table
（没写标签的括号<>是因为会被屏蔽）

最后一个单元格就不能分成两行了，各位朋友有什么好方法吗？十分感谢

rowspan啊。。跨行


<table border="1">
<tr><td rowspan="2">&nbsp;</td><td rowspan="2">&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>

从界面上吃拆分行，但从代码上应该从合并行的角度出发。拆分行后，自动添加一行一样的tr，最后一个单元格行合并

另外可以用display的方式

 <style>
.r{
  display:table-row;
  border:1px solid black;
}
.c{
  display:table-cell;
  border:1px solid black;
}
</style>
<div class='c'>111</div><div class='c'>222</div>
<div class='c'>
    <div class='r'>adfasd</div>
    <div class='r'>adfasd</div>
</div>

类似下面这样，不过是不够严谨的，如果拆分多了就得整个table自己重写计算了。建议用display:table-row;和display:table-cell;的方式，那样拆分没那么多限制

 <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
function divTd2(e){
  var tr = $(e).parent();
  if(tr.length>0){
     for(var i=0;i<tr[0].cells.length;i++){
          var cell = tr[0].cells[i];
          if(cell.cellIndex!=e.cellIndex){
              cell.rowSpan=cell.rowSpan+1;
          }
     }
     tr.parent().append("<tr><td onclick='divTd2(this)'>333</td></tr>");
  }

}
</script>
</head>
<body> 
<table id="tb" border=1>
    <tr><td onclick='divTd2(this)'>111</td><td  onclick='divTd2(this)'>222</td></tr>
</table>
</body>
</html>