On asp:Table Control how do we create a thead?

From an MSDN article on the subject, we can see that we create a TableHeaderRowthat contains TableHeaderCells.

But they add the table header like this:

myTable.Row.AddAt(0, headerRow);

w开发者_C百科hich outputs the HTML:

<table id="Table1" ... > 
<tr> 
    <th scope="column" abbr="Col 1 Head">Column 1 Header</th>
    <th scope="column" abbr="Col 2 Head">Column 2 Header</th>
    <th scope="column" abbr="Col 3 Head">Column 3 Header</th> 
</tr>
<tr> 
    <td>(0,0)</td>
    <td>(0,1)</td>
    <td>(0,2)</td>
</tr>

...

and it should have <thead> and <tbody> (so it works seamless with tablesorter) :)

<table id="Table1" ... > 
<thead>
<tr> 
    <th scope="column" abbr="Col 1 Head">Column 1 Header</th>
    <th scope="column" abbr="Col 2 Head">Column 2 Header</th>
    <th scope="column" abbr="Col 3 Head">Column 3 Header</th> 
</tr>
</thead>
<tbody>
<tr> 
    <td>(0,0)</td>
    <td>(0,1)</td>
    <td>(0,2)</td>
</tr>
    ...
    </tbody>

the HTML aspx code is

<asp:Table ID="Table1" runat="server" />

How can I output the correct syntax?

Just as information, the GridViewcontrol has this built in as we just need to set the Accesbility and use the HeaderRow

gv.UseAccessibleHeader = true;
gv.HeaderRow.TableSection = TableRowSection.TableHeader;
gv.HeaderRow.CssClass = "myclass";

but the question is for the Table control.

Just found a way to do this, we do need to use our own controls that inherit from the base control, for example a Table

public class myTable : System.Web.UI.WebControls.Table
{
    protected override void OnPreRender(EventArgs e)
    {
        Table table = Controls[0] as Table;

        if (table != null && table.Rows.Count > 0)
        {
            // first row is the Table Header <thead>
            table.Rows[0].TableSection = TableRowSection.TableHeader;
            // last row is the Footer Header <tfoot> (comment for not using this)
            table.Rows[table.Rows.Count - 1].TableSection = TableRowSection.TableFooter;

            FieldInfo field = typeof(WebControl).GetField("tagKey", BindingFlags.Instance | BindingFlags.NonPublic);
            foreach (TableCell cell in table.Rows[0].Cells)
                field.SetValue(cell, HtmlTextWriterTag.Th);
        }
        base.OnPreRender(e);
    }
}

works fine with DataGrid as well

public class myDataGrid : System.Web.UI.WebControls.DataGrid 
{
    protected override void OnPreRender(EventArgs e)
    {
        Table table = Controls[0] as Table;

        if (table != null && table.Rows.Count > 0)
        {
            // first row is the Table Header <thead>
            table.Rows[0].TableSection = TableRowSection.TableHeader;
            // last row is the Footer Header <tfoot> (comment for not using this)
            table.Rows[table.Rows.Count - 1].TableSection = TableRowSection.TableFooter;

            FieldInfo field = typeof(WebControl).GetField("tagKey", BindingFlags.Instance | BindingFlags.NonPublic);
            foreach (TableCell cell in table.Rows[0].Cells)
                field.SetValue(cell, HtmlTextWriterTag.Th);
        }
        base.OnPreRender(e);
    }
}

then for example you just need to use it instead the base control:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        myGridView dg = new myGridView();
        dg.DataSource = new string[] { "1", "2", "3", "4", "5", "6" };
        dg.DataBind();

        ph.Controls.Add(dg);
    }
}

and in aspx page, just add a place holder like:

<asp:PlaceHolder ID="ph" runat="server" />

full example in pastebin

Please note: this is a VB.net answer to the same question, you could simply convert this to C# using any number of free online converters.

Create a simple HTML table with a thead & tbody. I specifically needed a thead element for the jQuery tablesorter plugin.

    Dim ta As Table
    Dim thr As TableHeaderRow
    Dim thc As TableHeaderCell
    Dim tr As TableRow
    Dim td As TableCell

    ta = New Table
    ' make a header row & explicitly place it into the header section
    thr = New TableHeaderRow
    thr.TableSection = TableRowSection.TableHeader
    ' add cells to header row
    thc = New TableHeaderCell
    thc.Text = "ID"
    thr.Cells.Add(thc)
    thc = New TableHeaderCell
    thc.Text = "DESC"
    thr.Cells.Add(thc)
    ' create a data row & append cells to it
    tr = New TableRow
    td = New TableCell
    td.Text = "101"
    tr.Cells.Add(td)
    td = New TableCell
    td.Text = "VB.net is not so bad."
    tr.Cells.Add(td)
    ' append the header & row to the table
    ta.Rows.Add(thr)
    ta.Rows.Add(tr)

    ' add the new table to your page
    Page.Controls.Add(ta)

I'm a million years late on this but I just needed to do the same. It handles much the same as the grid view.

        foreach (var item in dynamicData)
        {
            var c = new TableHeaderCell()
            c.Text = item.Whatever;
            hr.Cells.Add(c);
        }
        //This is the important line
        hr.TableSection = TableRowSection.TableHeader;

        MyTable.Rows.Add(hr);

I was going to suggest that you try the declarative syntax, but I now know what you mean; the following code...:

<asp:Table runat="server" ID="sometable">
    <asp:TableHeaderRow BackColor="#ADD9E6">
        <asp:TableHeaderCell ID="DataHeader" CssClass="Heading1" Text="Data Header" />
    </asp:TableHeaderRow>
    <asp:TableRow>
        <asp:TableCell>Data</asp:TableCell>
    </asp:TableRow>
</asp:Table>

... produced similar results to what you posted:

<table id="sometable" border="0">
<tr style="background-color:#ADD9E6;">
    <th id="DataHeader" class="Heading1">Data Header</th>
</tr><tr>
    <td>Data</td>
</tr>
</table>

Perhaps a custom control could be created to solve your problem? Seems like overkill, but at least you can control what the generated output is.

Another option is to inherit from the System.Web.UI.WebControls.Table class, and override how the table is rendered.

If you could use a DataGrid when you name the columns in the template it will produce a thead and tbody appropriately.

Add TableSection="TableHeader" to the TableHeaderRow like:

<asp:TableHeaderRow ID="TableHeaderRow2" 
 runat="server" TableSection="TableHeader" >