Search code examples
htmlcsshtml-tablecss-grid

HTML Table: Render Horizontal Binary Tree via rowspan?


I'd like to create the following binary tree representation via an HTML table element (the graphic below was produced in an image editor, not actual HTML):

Horizontal Binary Tree

Given my prior experiences with the colspan attribute successfully making similar vertical trees, it seems like this should be totally possible using the rowspan attribute with something like the following code:

<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="4">1</td>
        <td rowspan="2">2</td>
        <td rowspan="1">4</td>
    </tr>
    <tr>
        <td rowspan="2">3</td>
        <td rowspan="1">5</td>
    </tr>
    <tr>
        <td rowspan="1">6</td>
    </tr>
    <tr>
        <td rowspan="1">7</td>
    </tr>
</table>
</body>
</html>

However, the result of the code above does not appear as expected in any recent version of every modern browser I have tried (Chrome, Safari, Firefox, Brave):

false rendering

Am I doing something wrong? Is this possible with an HTML table? It seems like it should be, but it's not working…


Notes:

  • I'd very much like to accomplish with an HTML table if possible.

  • I actually want to extend this tree to more generations (up to maybe even 10 or 12 or so), so ideally any solution would be suitable for that.

  • I have experimented with the new(-ish) "CSS Grid" features -- a nice tool, but CSS Grid seems poorly suited to extending such a tree to many generations as it seems each grid cell requires an explicit CSS grid-row-start specification to correctly place it in the proper row in the tree (rather than just floating into the next available natural position as with HTML tables). If I extend this tree diagram to generations containing hundreds or thousands of cells, then declaring explicit grid-row-start values for every cell seems impractical (or at least highly undesirable).


Solution

  • Typical: formulating and re-reading the question made me realize the error in my HTML code.

    The following (slightly altered) code works as expected/desired:

    <!DOCTYPE html>
    <html>
    <body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td rowspan="4">1</td>
            <td rowspan="2">2</td>
            <td rowspan="1">4</td>
        </tr>
        <tr>
            <td rowspan="1">5</td>
        </tr>
        <tr>
            <td rowspan="2">3</td>
            <td rowspan="1">6</td>
        </tr>
        <tr>
            <td rowspan="1">7</td>
        </tr>
    </table>
    </body>
    </html>
    

    correct binary tree render as html