Question

So i have a stupid problem, sorry but i’m a starter in HTML and design… What i’m trying to achieve is an upper triangular table, i’m creating my table in asp.net codebehind here is my code;

        for (int i = 0; i < 3; i++)
    {
        TableRow r = new TableRow();
        for (int j = 3; j > i; j--)
        {
            TableCell c = new TableCell()
            {
                Height = 100,
                Width = 100,
                ColumnSpan = j,
                BackColor = System.Drawing.Color.Blue
            };
            r.Cells.Add(c);
        }
        bottomRightTable.Rows.Add(r);
    }

So basically what i want to get is this (sorry for my mad paint skills but i wanted to make my self clear) and again sorry if this is a stupid question but i’m not very experienced with asp.net yet and i don’t want to use any dummy table cells i want to use 6 cells if i want to create a triangle starts with 3.

Thanks a lot for all the help!

Image for help;

Answer 1

I honestly have no idea if this will work, but try:

bottomRightTable.Attributes["dir"] = "RTL"; // Set the table to "right-to-left"

Theoretically, it should make the right column 0, the middle column 1, and the left column 2….so you’ll have to reverse any other logic.

http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1.1

---

Your algorithm is using ColumnSpan but it’s not doing anything. That’s because it sets the ColumnSpan to the same value for every cell in the column. ie:

<table>
    <tr>
        <td colspan="3" style="..."></td>
        <td colspan="2" style="..."></td>
        <td style="..."></td>
    </tr>
    <tr>
        <td colspan="3" style="..."></td>
        <td colspan="2" style="..."></td>
    </tr>
    <tr>
        <td colspan="3" style="..."></td>
    </tr>
</table>

If you try to fix the ColumnSpan algorithm, you’d end up with:

<table>
    <tr>
        <td style="..."></td>
        <td style="..."></td>
        <td style="..."></td>
    </tr>
    <tr>
        <td colspan="2" style="..."></td>
        <td style="..."></td>
    </tr>
    <tr>
        <td colspan="3" style="..."></td>
    </tr>
</table>

So, basically, I think you either need to use the right-to-left hack or use empty cells.