Fluid html tree layout help (divs instead of tables)

I need help with a dynamic layout in html. I need it to work as divs but could only set it up with tables.

Basically it's a tree strucutre and as child nodes are added there are child tables created which creates the layout of the nodes I want.

Also does anyone have a clever idea for connecting a line from the parent to the child nodes without using canvas?

Basically it's a mindmap

Here is the html You can see the layout with the html here http://jsfiddle.net/Z6jcD/

<table border="0">
        <tbody>
            <tr>
                <td>
                    <div class="divnodes" contenteditable="true" id="0">
                        <h4 class="marketing-header">Root</h4>
                    </div>
                </td>

                <td>
                    <table border="0">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="divnodes" contenteditable=
                                    "true" id="1">
                                        <p style="font-weight: bold">Grand
                                        mother_</p>
                                    </div>
                                </td>

                                <td></td>
                            </tr>
                        </tbody>
                    </table>

                    <table border="0">
                        <tbody>
                            <tr>
                                <td>
                                    <div class="divnodes" contenteditable=
                                    "true" id="2">
                                        Grand father_
                                    </div>
                                </td>

                                <td>
                                    <table border="0">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="divnodes"
                                                    contenteditable="true" id=
                                                    "3">
                                                        <p style=
                                                        "font-weight: bold">
                                                        Mother_</p>
                                                    </div>
                                                </td>

                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table border="0">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="divnodes"
                                                    contenteditable="true" id=
                                                    "4">
                                                        Father_
                                                    </div>
                                                </td>

                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>