Как я могу получить элемент управления Literal, чтобы охватить несколько ячеек в строке HTML?

Question

Я хочу использовать "сеточную систему" ​​для размещения моих динамически созданных элементов управления (условно созданных, основанных на выборе пользователя) на веб-странице. Я создаю HTML-таблицу, элементы управления, а затем добавляю элементы управления в ячейки строки HTML-таблицы.

Проблема в том, что я хочу, чтобы (подобно значениям "Span" в WPF) можно было использовать некоторые элементы управления для нескольких ячеек, например длинные строки.

Этот код:

protected override void CreateChildControls()
{
    base.CreateChildControls();
    LiteralControl message = new LiteralControl();
    message.Text = DisplayMessage;
    Controls.Add(message);

    int selectionMadeOnEditor = 0; // TODO: Make this dynamic; this is just for testing
    HtmlTable tbl = null;
    switch (selectionMadeOnEditor)
    {
        case 0:
            tbl = GeneratePlatypoisons();
            break;
        case 1:
            //Console.WriteLine(5);
            break;
        default:
            tbl = GenerateMorayEelLikeElectricity();
            break;
    } 
    this.Controls.Add(tbl);
. . .


private HtmlTable GeneratePlatypoisons()
{
    HtmlTable dynamicTable = new HtmlTable();
    // Create Row 1
    var row = new HtmlTableRow();
    var cell1 = new HtmlTableCell();
    var cell2 = new HtmlTableCell();
    var cell3 = new HtmlTableCell();
    var cell4 = new HtmlTableCell();
    var cell5 = new HtmlTableCell();
    var cell6 = new HtmlTableCell();
    row.Cells.Add(cell1);
    row.Cells.Add(cell2);
    row.Cells.Add(cell3);
    row.Cells.Add(cell4);
    row.Cells.Add(cell5);
    row.Cells.Add(cell6);
    dynamicTable.Rows.Add(row);
    // Populate row 1
    LiteralControl section1Hdr = new LiteralControl("<h2>Section 1: Platypus Information</h2>");
    LiteralControl section2Hdr = new LiteralControl("<h2>Section 2: PoisonToe Information</h2>");
    cell1.Controls.Add(section1Hdr);
    cell5.Controls.Add(section2Hdr);

    // Create Row 2
    var row2 = new HtmlTableRow();
    var cell2_1 = new HtmlTableCell();
    var cell2_2 = new HtmlTableCell();
    var cell2_3 = new HtmlTableCell();
    var cell2_4 = new HtmlTableCell();
    var cell2_5 = new HtmlTableCell();
    var cell2_6 = new HtmlTableCell();
    row2.Cells.Add(cell2_1);
    row2.Cells.Add(cell2_2);
    row2.Cells.Add(cell2_3);
    row2.Cells.Add(cell2_4);
    row2.Cells.Add(cell2_5);
    row2.Cells.Add(cell2_6);
    dynamicTable.Rows.Add(row2);
    // Populate Row 2
    LiteralControl reqDateStr = new LiteralControl("PoisonToe Date:");
    cell2_1.Controls.Add(reqDateStr);
    boxRequestDate = new TextBox();
    boxRequestDate.Text = DateTime.Today.ToShortDateString();
    cell2_2.Controls.Add(boxRequestDate);

    LiteralControl payAmtStr = new LiteralControl("Platypus Amount:");
    cell2_3.Controls.Add(payAmtStr);
    boxPaymentAmount = new TextBox();
    cell2_4.Controls.Add(boxPaymentAmount);

    LiteralControl reqNameStr = new LiteralControl("PoisonToe Name:");
    cell2_5.Controls.Add(reqNameStr);
    boxRequestorName = new TextBox();
    cell2_6.Controls.Add(boxRequestorName);

    // Populate row 3
    // Populate row 4
    // Populate row 5
    // Populate row 6
    // Populate row 7
    return dynamicTable;
}

Я добавил буквенные элементы управления / строки в cell1 и cell5:

cell1.Controls.Add(section1Hdr);
cell5.Controls.Add(section2Hdr);

... в надежде, что первый охватит ячейки с 1 по 4, а второй охватит ячейки 5 и 6, но не будет, как вы можете видеть здесь:

Что мне нужно сделать, чтобы эти струны растянулись горизонтально, а не втиснуть себя в спазмы, ведущие к моей раздражительности?

ОБНОВИТЬ

Используя принятый ответ Малахи, я смог уточнить свой код строки 1 (строка 2 осталась прежней):

// Create Row 1
var row = new HtmlTableRow();
var cell1 = new HtmlTableCell();
var cell2 = new HtmlTableCell();
row.Cells.Add(cell1);
row.Cells.Add(cell2);
dynamicTable.Rows.Add(row);
// Populate row 1
LiteralControl section1Hdr = new LiteralControl("<h2>Section 1: Platypus Information</h2>");
LiteralControl section2Hdr = new LiteralControl("<h2>Section 2: PoisonToe Information</h2>");
cell1.ColSpan = 4;
cell2.ColSpan = 2;
cell1.Controls.Add(section1Hdr);
cell2.Controls.Add(section2Hdr);

Answer 1

В HTML-таблице вы можете кодировать это так:

<table>
    <tr>
        <td colspan="4">
            Platypus Information
        </td>
        <td colspan="2">
            PoisonToe Information
        </td>
    </tr>
    <tr>
        <td>Poison Toe Date</td>
        <td><textBox /></td>
        <td>Platypus Amount</td>
        <td><textBox/></td>
        <td>Poison Toe Name</td>
        <td><textBox /></td>
    </tr>
</table>

Есть Атрибут, который вы можете дать своей Клетке

 var cell1 = new HtmlTableCell();
 cell1.ColSpan = 4;
 row.Cells.Add(cell1);

Свойство ColSpan присваивает атрибут при отображении HTML сервером.