html - 将表列分成 3 个部分

Question

我在将底行分成 3 个部分时遇到问题。如果能修复它或重新设计它，我将不胜感激。

HTML:

<table border="1" cellspacing="0">
    <tr>
        <td style='width:120px; height:20px;'>Creeper</td>

        <td rowspan="2" style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td rowspan="2" style='width:100px;'>Creeper</td>
    </tr>

    <tr>
        <td style='width:120px; height:120px;'></td>
    </tr>

    <tr>
        <td style='width:40px; height:20px;'></td>

        <td style='width:80px; height:20px;'></td>
    </tr>
</table>

JSFiddle

http://jsfiddle.net/j76bY/

Answer 1

像下面这样更新您的表格。

<table border="1" cellspacing="0">
<tr>
    <td colspan="2" style='width:120px; height:20px;'>Creeper</td>

    <td rowspan="2" style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td rowspan="2" colspan="2" style='width:100px;'>Creeper</td>
</tr>

<tr>
    <td style='width:120px; height:120px;'></td>
</tr>

<tr>
    <td style='width:40px; height:20px;'></td>
    <td style='width:80px; height:20px;'></td>
    <td style='width:120px; height:20px;'></td>
</tr>
</table>

DEMO