how to align the second column of data cells evenly when first column contains data and empty cells in a html table?

how to align the second column of data cells evenly when first column contains data and empty cells in a html table?

For example, how to align the following data below into a html table.

Column1     Column2
===================
data 1      data 2
            data 3
            data 4
        开发者_开发知识库    data 5
blank line
data 1      data 2
            data 3
            data 4
            data 5`

Like so? Demo: http://jsfiddle.net/a2ckX/

<table cellpadding="5" cellspacing="0">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td style="vertical-align: top">data 1</td>
        <td>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 4</td>
                </tr>
                <tr>
                    <td>Data 5</td>
                </tr>
                <tr>
                    <td>Data 6</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">Spacer</td>
    </tr>
    <tr>
        <td style="vertical-align: top">data 1</td>
        <td>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 4</td>
                </tr>
                <tr>
                    <td>Data 5</td>
                </tr>
                <tr>
                    <td>Data 6</td>
                </tr>
            </table>
        </td>
    </tr>
</table>