Split HtmlTableCell in two C#

Question

How can I split a cell into 2 rows? Or make the rowspan work... I don't quite care witch method can work... I just couldn't make it work...

I want to make this: http://jsfiddle.net/su3AH/1/

Only it's frome c#...

What I have now it is this:

HtmlTableRow row = new HtmlTableRow();
HtmlTableCell cell = new HtmlTableCell();

foreach (DataRow dataRow in tab.Rows)
{
   row = new HtmlTableRow();
   cell = new HtmlTableCell();
   cell.InnerHtml = "cell1";
   row.Cells.Add(cell);

   cell = new HtmlTableCell();
   cell.InnerHtml = "cell2";
   row.Cells.Add(cell);

   cell = new HtmlTableCell();
   cell.InnerHtml = "cell3";
   row.Cells.Add(cell);

   cell = new HtmlTableCell();
   cell.InnerHtml = "cell4";
   row.Cells.Add(cell);

   tableContent.Rows.Add(row);
}

Thank you!

Answer 1

You can set the RowSpan property for your HtmlTableCell objects - a value of 2 should do it for cells 1 and 4

So you need to use 2 rows of html for each row of content to fix the problem:

HtmlTableRow row;
HtmlTableCell cell;
HtmlTable tableContent = new HtmlTable();

tableContent.Border = 2;
foreach (DataRow dataRow in tab.Rows)
{
    var row1 = new HtmlTableRow();
    var row2 = new HtmlTableRow();
    cell = new HtmlTableCell();
    cell.InnerHtml = "cell1";
    cell.RowSpan = 2;
    row1.Cells.Add(cell);

    cell = new HtmlTableCell();
    cell.InnerHtml = "cell2";
    row1.Cells.Add(cell);

    cell = new HtmlTableCell();
    cell.InnerHtml = "cell3";
    row2.Cells.Add(cell);

    cell = new HtmlTableCell();
    cell.InnerHtml = "cell4";
    cell.RowSpan = 2;
    row1.Cells.Add(cell);


    tableContent.Rows.Add(row1);
    tableContent.Rows.Add(row2);
}

this.Controls.Add(tableContent);
}

The HTML produced will be something like this:

<table border="2">
    <tr>
        <td rowspan="2">cell1</td>
        <td>cell2</td>
        <td rowspan="2">cell4</td>
    </tr>
    <tr>
        <td>cell3</td>
    </tr>
    <tr>
        <td rowspan="2">cell1</td>
        <td>cell2</td>
        <td rowspan="2">cell4</td>
    </tr>
    <tr>
        <td>cell3</td>
    </tr>
</table>