Hi Guys, So basically I want to get rid of Table.

Umm I'm a ASP.NET Backend Developer and whenever I'm in a situation like I will create a Login Controls (just for example) I need to create a table markup with asp controls in it to make their size equal just like this.

<table>
<tr>
<td> <asp:Label > Login </asp:Label> </td>
<td> <asp:TextBox></asp:TextBox> </td>
</tr>
<tr>
<td> <asp:Label> Password </asp:Label> </td>
<td> <asp:TextBox></asp:TextBox> </td>
</tr>
<tr>
<td> </td>
<td> <asp:Button Text="SampleButton"></asp:Button>
</tr>
</table>

as you can see in the third row I put there an empty tag so that the button next to it will match the size of the second column. I hope someone could help how could I perform this task in css or could show me how to do the basic css so that I could get rid of this ugly table.Thanks!

1 answer

danwellman 5600
2
points

Instead of using a <table> as the container for form elements, I have always found it easy to use a <fieldset> instead, especially when working with .net. try the following markup:

<fieldset>
    <asp:label>Login</asp:label>
    <asp:textbox></asp:textbox>
    <asp:label>Password</asp:label>
    <asp:textbox></asp:textbox>
    <asp:button text="Login"></asp:button>
</fieldset>

Then you can float the labels and text boxes left, and use the width of the fieldset to ensure that only 1 label and 1 textbox are ever on the same 'row'. Also, you can float the button right so that it aligns with the right edge of the inputs. CSS can be as follows:

fieldset { width:300px; }
label { width:100px; }
input { width:200px; }
button { clear:left;  float:right; }

Pretty much what I said above but you get the picture...other styles should be added to control font, text size, etc. That should get you started

Answered almost 7 years ago by danwellman
  • Thanks sir! I can't Up you yet since I've just created my account few minutes ago, Regards. Sherwin Valdez almost 7 years ago
  • No worries, hope it helps :D danwellman almost 7 years ago