如何将字段合并到右侧表格中的框中？

Question

我必须创建类似于此的表

所以我在HTML

中创建了以下表格结构

<table class="table table-bordered">
<tbody>
    <tr>
        <td colspan="2">asd</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="4">left box</td>
    </tr>
    <tr>
        <td colspan="2">asd</td>
    </tr>
    <tr>
        <td colspan="2">asd</td>
    </tr>
    <tr>
        <td colspan="2">asd</td>
    </tr>
    <tr>
        <td colspan="2">asd</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="5">right box</td>
    </tr>

</tbody>

简化结构以仅显示一般问题。左框工作正常，但不是。

只留下演示：http://jsfiddle.net/rfDms/2/

左右演示：http://jsfiddle.net/rfDms/

如何制作类似的表？

Answer 1

<强> jsFiddle example

<table style="width: 100%">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="5"></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2" rowspan="5"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 2

http://jsfiddle.net/AaGJ8/

<table width=100% border=1 class="table table-bordered">
<tbody>
<tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>

</tr>
<tr>
    <td colspan="2" rowspan="4">box</td>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
     <td colspan="2" rowspan="4">box</td>
</tr>
<tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
</tr>
<tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
</tr>
<tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
</tr>
</tbody>