Removing outer table elements from Server Control's generated HTML in Asp.net 4.0
Introduction
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
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>
</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 >
<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="ctl01$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>
</table>
At first this may seem confusing that even after specifying RenderOuterTable="false", why the HTML output is being rendered using 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, specifyingRenderOuterTable="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.
Figure : Converting Login Control To Template
Doing so would generate template based complete HTML for login control which you can costomise as you like.
The above is also true for PasswordRecovery and ChangePassword control.
Hope this helps :)