Removing outer table elements from Server Control's generated HTML in Asp.net 4.0

Before Asp.net 4.0, a number of Asp.net server controls used to render their corresponding HTML output within a tabular structure by surrounding the data within <table> <tr> <td> elements, and there was no way you could get rid of those tables and customize the rendered HTML. The following controls were among them:

RadioButtonList
CheckBoxList
FormView
Login
PasswordRecovery
ChangePassword

If you do a little experiment with a few of the above controls, you would see the CheckBoxList and RadioButtonList would render the following kind of HTMLs:

<table id="MainContent_CheckBoxList1">
    <tr>
        <td>
            <input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0"
                value="1" /><label for="MainContent_CheckBoxList1_0">Shubho</label>
        </td>
    </tr>
</table>

And,

<table id="MainContent_RadioButtonList1">
    <tr>
        <td>
            <input id="MainContent_RadioButtonList1_0" type="radio" name="ctl00$MainContent$RadioButtonList1"
                value="1" /><label for="MainContent_RadioButtonList1_0">Shubho</label>
        </td>
    </tr>
</table>

And, the FormView would render the following HTML:

<table cellspacing="0" id="MainContent_FormView1" style="border-collapse: collapse;">
    <tr>
        <td colspan="2">
            Employee Name : <span id="MainContent_FormView1_Label1">Shubho</span>
        </td>
    </tr>
</table>

Guess what, these tabular HTMLs are not easy to manage using javascript and css and these also increase the overall page size because of the additional HTML elements are used to render the actual data in tabular structure.

Good news is, Asp.net 4.0 lets you get rid of these <table> elements from their rendered HTML by using some simple properties.

RepeatLayout property

For RadioButtonList and DropDownList, there is a RepeatLayout property which lets you specify an option for the HTML output. See the following options:

Figure : RepeatLayout property of RadioButtonList

If you specify "Flow", the RadioButtonList would render the following kind of HTML:

<span id="MainContent_CheckBoxList1">
    <input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0"
        value="1" /><label for="MainContent_CheckBoxList1_0">Shubho</label><br />
</span>

Note that, no <table> element is there two wrap the above rendered HTML

Specifying OrderedList would render the HTML using <ol><li> elements and specifying UnOrderedList would render the HTML using <ul><li>. Not to mention what will happen if Table is specified :)

RenderOuterTable property

This property is available for the following Asp.net server controls to specify whether or not to render a wrapping <table> structure for the rendered HTML output. The property is applicable for the following server controls:

FormView
Login
PasswordRecovery
ChangePassword

Specifying RenderOuterTable ="false" for a FormView control results in the following HTML output:

Name
<span id="MainContent_FormView1_Label1">Shubho</span>

An issue with <asp:Login> control

Surprisingly, if you specify RenderOuterTable="false" for an <asp:Login> control, you would still see tons of <table> based HTMLs in the output. For example:

<table cellpadding="0">
    <tr>
        <td align="center" colspan="2">
            Log In
        </td>
    </tr>
    <tr>
        <td align="right">
            <label for="MainContent_Login1_UserName">
                User Name:</label>
        </td>
        <td>
            <input name="ctl00$MainContent$Login1$UserName" type="text" id="MainContent_Login1_UserName" /><span
                id="MainContent_Login1_UserNameRequired" title="User Name is required." style="visibility: hidden;">*</span>
        </td>
    </tr>
    <tr>
        <td align="right">
            <label for="MainContent_Login1_Password">
                Password:</label>
        </td>
        <td>
            <input name="ctl00$MainContent$Login1$Password" type="password" id="MainContent_Login1_Password" /><span
                id="MainContent_Login1_PasswordRequired" title="Password is required." style="visibility: hidden;">*</span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input id="MainContent_Login1_RememberMe" type="checkbox" name="ctl00$MainContent$Login1$RememberMe" /><label
                for="MainContent_Login1_RememberMe">Remember me next time.</label>
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2">
            <input type="submit" name="ctl00$MainContent$Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$Login1$LoginButton&quot;, &quot;&quot;, true, &quot;ctl00$MainContent$Login1&quot;, &quot;&quot;, false, false))"
                id="MainContent_Login1_LoginButton" />
        </td>
    </tr>
</table>

At first this may seem confusing that even after specifying RenderOuterTable="false", why the HTML output is being rendered using <table> structure.

The answer is, specifying RenderOuterTable="false" only eliminates the outer table (If there is any) which wraps the original HTML control that is rendered by the corresponding server control. So, in case of <asp:Login> control, specifying RenderOuterTable="false" only eliminates the outer <table>, and, not the <table> from it's original rendered HTML (Which is above). To verify this, if you specify RenderOuterTable="true", you would see and extra <table><tr><td> is being used to wrap the original <table> based HTML output.

However, if you really want to get rid of the <table> based HTML output for the <asp:Login> control, you may do this by converting the control to a template control and specify the HTML that it should render. You can do this by going to design view and right click on the Login control and selecting "Convert to Template".

Figure : Converting a Login control to Template

Doing so would generate the template based complete HTML for the Login control which you can customize as you like.

The above is also true for the PasswordRecovery and ChangePassword control.

Hope this helps :)