Nate Glenn Nate Glenn - 4 months ago 24
HTML Question

GraphViz HTML nested tables

I am using GraphViz to make a tabular structure. I was using the

record
style, but the boxes weren't lining up. Given the answer to this question, I thought I'd use the HTML style instead. However, I can't seem to properly nest tables. Here's my dot code:

digraph test {
graph [ratio=fill];
node [label="\N", fontsize=15, shape=plaintext];
graph [bb="0,0,352,154"];
arset [label=<
<TABLE ALIGN="LEFT">
<TR>
<TD>Top left</TD>
<TD>
<TABLE>
<TR><TD>Row 1</TD></TR>
<TR><TD>Row 2</TD></TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>Bottom Left</TD>
<TD>
<TABLE>
<TR><TD>Row 1</TD></TR>
<TR><TD>Row 2</TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
>, ];
}


And here's the output:

enter image description here

So many extra lines! Can anyone help me figure out how to properly make a nested table? On the flip side, an answer to the linked question detailing how to get cells to align using the record display would suffice.

Answer Source

I've added BORDER="0" to inner tables

digraph test {
    graph [ratio=fill];
    node [label="\N", fontsize=15, shape=plaintext];
    graph [bb="0,0,352,154"];
    arset [label=<
        <TABLE ALIGN="LEFT">
            <TR>
                <TD>Top left</TD>
                <TD>
                    <TABLE BORDER="0">
                        <TR><TD>Row 1</TD></TR>
                        <TR><TD>Row 2</TD></TR>
                    </TABLE>
                </TD>
            </TR>
            <TR>
                <TD>Bottom Left</TD>
                <TD>
                    <TABLE BORDER="0">
                        <TR><TD>Row 1</TD></TR>
                        <TR><TD>Row 2</TD></TR>
                    </TABLE>
                </TD>
            </TR>
        </TABLE>
    >, ];
}

and here is the result

enter image description here

You can find here many other options to control HTML layout