asp.net - HTML table tag with col, colgroup, tbody, and thead throws compile error in Visual Studio 2010 and Visual Studio 2012

Question

I have a .NET 3.5 web site with a table tag that contains col, colgroup, tbody and thead tags. This is a server side tag with the runat="server" attribute. This table was working fine in Visual Studio 2010, but after I installed Visual Studio 2012 and .NET 4.5, this tag now fails to compile in Visual Studio 2010 and in Visual Studio 2012. (I tried both.) Here are the compiler errors that are being thrown:

• The best overloaded method match for 'System.Web.UI.HtmlControls.HtmlTableRowCollection.Add(System.Web.UI.HtmlControls.HtmlTableRow)' has some invalid arguments
• Argument '1': cannot convert from 'System.Web.UI.HtmlControls.HtmlGenericControl' to 'System.Web.UI.HtmlControls.HtmlTableRow'

Here's an example of what I'm working with:

<table id="TestTable" runat="server">
    <colgroup>
        <col width="30%" />
        <col width="70%" />
    </colgroup>
    <thead>
        <tr>
            <td>Sample header 1</td>
            <td>Sample header 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sample cell 1</td>
            <td>Sample cell 2</td>
        </tr>
        <tr>
            <td>Sample cell 3</td>
            <td>Sample cell 4</td>
        </tr>
    </tbody>
</table>

Does anyone know how to fix this problem, so that we can get the site to compile and continue working?

Answer 1

This appears to be an undocumented breaking change for web sites after the install of Visual Studio 2012 and .NET 4.5. I am not able to find references to this in the .NET 4.5 changes documented by Microsoft: http://msdn.microsoft.com/en-us/library/hh367887.aspx

After researching the problem, the following appear to be possible solutions to the broken table tag.

1. Uninstall Visual Studio 2012 and .NET 4.5. Reference: Server side HTML table with tbody not compiling in ASP.NET 4.5

   I realize that this is not necessarily an ideal solution, but if none of the other solutions below can be implemented easily, you may end up with no other choice. Also, just because this is the first entry, it is not what I am recommending as the primary solution. It's just an option.

2. Convert your web site into a web application. The table with runat="server" appears to compile file when using a web application.

   There are additional benefits to doing this conversion, such as making it easier to write unit tests against the code inside your web application. However, you will need to evaluate the work involved with converting from a web site to a web application, and you will need to convince your bosses and fellow coworkers that you need to make this change.

3. Check the server side code (code behind page/control) for the table. Are you using the control in the server side code? If not, remove runat="server". The page then compiles just fine.

   <table id="TestTable">
       <colgroup>
           <col width="30%" />
           <col width="70%" />
       </colgroup>
       <thead>
           <tr>
               <td>Sample header 1</td>
               <td>Sample header 2</td>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>Sample cell 1</td>
               <td>Sample cell 2</td>
           </tr>
           <tr>
               <td>Sample cell 3</td>
               <td>Sample cell 4</td>
           </tr>
       </tbody>
   </table>
   

4. You are using the control in the server side code. Remove the col and colgroup tags and move the column stylings into the td or th cells of the first row of the table. (Column width and stylings inherit from the first row down the table, so setting width="40%" on the first cell, for example, makes all cells in that column have width="40%".) Remove the thead tag and change all td cells in the table to th (table header) cells. Remove the tbody tag.

   <table id="TestTable" runat="server">
       <tr>
           <th width="30%">Sample header 1</td>
           <th width="70%">Sample header 2</td>
       </tr>
       <tr>
           <td>Sample cell 1</td>
           <td>Sample cell 2</td>
       </tr>
       <tr>
           <td>Sample cell 3</td>
           <td>Sample cell 4</td>
       </tr>
   </table>
   

5. Convert to using the <asp:Table> tag with <asp:TableHeaderRow> and <asp:TableRow> controls. Reference: How to create thead and tbody in ASP.NET Table?