Есть таблица, изображенная слева. Необходимо сделать из нее таблицу, нарисованную справа.



Исходный код таблицы слева:

<table>
    <tr>
        <td> + </td>
        <td></td>
    </tr>
    <tr>
        <td> + </td>
        <td></td>
    </tr>
</table>

Исходный код таблицы справа:

<table>
    <tr>
        <td rowspan=2 > + </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td> + </td>
        <td></td>
    </tr>
</table>

Как это сделать минимальными телодвижениями с DOM'ом?

Были испробованы следующие приемы:
1. Первой ячейке первой строки задается rowspan=2. Создается новая строка с одной ячейкой и вставляется сразу за текущей. В итоге ожидаемый HTML не наблюдается.
2. Вариант создания таблицы не интересует.
3. Создавал строку, засовывал в DOM, потом выставлял InnerHtml. Фокус опять таки не удался. (не удался скорее всего из-за того, что rowspan менялся в Runtime)

Можно ли в Runtime менять структуру таблицы, менять rowspan'ы и colspan'ы ячеек. И если да, то какой порядок действий и какие ограничения существуют?

P.S. Изначальная задача была сделать деревья в деревьях с одинаковым набором колонок.