Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create thead and tbody in ASP.NET Table ?

Tags:

How to create thead and tbody in ASP.NET Table? I need those tags because of jquery and asp.net gives me only tr, th and td.

like image 660
Primoz Avatar asked Oct 25 '10 14:10

Primoz


People also ask

Does Tbody need thead?

Those tags are not required. It is considered good form to use them if the table is used to represent data, which is what a table should be used for. If a table is used for laying out content they are typically omitted.

What is thead and tbody?

The <thead> tag is used to group header content in an HTML table. The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

Can thead come after Tbody?

A <table> element. The <thead> must appear after any <caption> or <colgroup> element, even implicitly defined, but before any <tbody> , <tfoot> and <tr> element.

What is the purpose of thead Tfoot and tbody elements?

The thead, tbody, and tfoot elements in HTML are used to group table rows into logical sections based on their content.


2 Answers

asp:Table does not support these elements.

Update: As jameh's answer reveals, the sentence above is completely wrong: the TableSection property allows to control whether a given row goes into the table's header, body or footer.

To elaborate on his answer, it seems you can even achieve this declaratively by setting the TableSection property in your markup, without code behind:

<asp:Table id="yourId" runat="server">     <asp:TableHeaderRow TableSection="TableHeader">         <!-- ... -->     </asp:TableHeaderRow>     <asp:TableRow>         <!-- 'TableSection' defaults to 'TableRowSection.TableBody'. -->         <!-- ... -->     </asp:TableRow>     <asp:TableRow TableSection="TableFooter">         <!-- ... -->     </asp:TableRow> </asp:Table> 

Original, now moot answer follows:

You might want to try the HtmlTable class instead:

<table id="yourId" runat="server">     <thead>         .         .         .     </thead>     <tbody>         .         .         .     </tbody> </table> 
like image 194
Frédéric Hamidi Avatar answered Sep 21 '22 19:09

Frédéric Hamidi


Frédéric's answer is not accurate. asp:Table DOES in fact support <tbody> and <thead> tags, but in a less obvious fashion than HtmlTable.

UseAccessibleHeader is true by default for tables, which means your header rows will be rendered properly with <th> instead of <td>, but to get the <tbody> and <thead> tags, you've just got to set some voodoo at Page_Load and when you're creating/inserting your rows in the codebehind.

Here's my example asp:Table markup:

<asp:Table runat="server" ID="tblGeneral">     <asp:TableHeaderRow ID="TableHeaderRow1" runat="server">         <asp:TableHeaderCell ID="TableHeaderCell1" runat="server">Column 1</asp:TableHeaderCell>         <asp:TableHeaderCell ID="TableHeaderCell2" runat="server">Column 2</asp:TableHeaderCell>         <asp:TableHeaderCell ID="TableHeaderCell3" runat="server">Column 3</asp:TableHeaderCell>         <asp:TableHeaderCell ID="TableHeaderCell4" runat="server">Column 4</asp:TableHeaderCell>         <asp:TableHeaderCell ID="TableHeaderCell5" runat="server">Column 5</asp:TableHeaderCell>     </asp:TableHeaderRow> </asp:Table> 

At Page_Load, we specify that our TableHeaderRow1 should be a TableHeader:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load     TableHeaderRow1.TableSection = TableRowSection.TableHeader       End Sub 

And finally, in your function that inserts rows into said table, you just have to specify that the TableRowSection of each row you add is a TableBody:

Dim row As TableRow Dim dvRow As Data.DataRowView  For Each dvRow In dv     row = New TableRow     row.TableSection = TableRowSection.TableBody 'THIS is the important bit     cell = New TableCell     Col1Stuff = New Label     Col1Stuff.Text = "Blah"     cell.Controls.Add(Col1Stuff)     row.Cells.Add(cell)      ...  tblGeneral.Rows.Add(row) Next 

You can do more reading on the TableRowSection property; looks like you can also accomplish this with your asp:Table template.

like image 33
jfsaliba Avatar answered Sep 24 '22 19:09

jfsaliba