Newbie question on laying out a table/css file as div/css (or even if I should) : The Official Microsoft ASP.NET Forums

Reply

BillyM2010

Member

25 Points

Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 13, 2012 05:50 PM|LINK

I come from a WinForms background and attempting to learn WebForms. I have a test page that will be experimenting with Validation and have a question on the best way to lay it out. I am using tables/css and wondering how this same layout would be done using Div/CSS (or even if it SHOULD be done this way):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layout.aspx.cs" Inherits="Layout" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Layout Test</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
            height: 10px;
        }
        .style2
        {
            font-weight: bold;
        }
        .style3
        {
            width: 250px;
        }
        .style4
        {
            width: 100%;
            height: 50px;
            background-color: #00FF00;
            font-weight: bold;
        }
        .style5
        {
            width: 100%;
            height: 50px;
            background-color: #00FFFF;
            font-weight: bold;
        }
     </style>
</head>
<body>
    <form id="form1" runat="server" defaultfocus="txtName" defaultbutton="btnSubmit">
    <div>
        
        <table class="style4">
            <tr>
                <td align=center>
                    <asp:Label ID="Label10" runat="server" Text="HEADER"></asp:Label>
                </td>
            </tr>
        </table>
        
        <br />
        
        <table cellpadding="0" cellspacing="0" class="style1">
            <tr class="style2">
                <td class="style3">
                    <asp:Label ID="Label1" runat="server" Text="Description"></asp:Label></td>
                <td>
                    <asp:Label ID="Label9" runat="server" Text="Value"></asp:Label></td>
            </tr>
            <tr>
                <td class="style3">
                    <asp:Label ID="Label2" runat="server" Text="Name:"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtName" runat="server" Width="300px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style3">
                    <asp:Label ID="Label3" runat="server" Text="ID (Multiple of 5):"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtID" runat="server" Width="300px"></asp:TextBox></td>
            </tr>
            <tr>
                <td class="style3">
                    <asp:Label ID="Label4" runat="server" Text="Day Off (04/01/2012 - 04/30/2010):"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtDayOff" runat="server" Width="300px"></asp:TextBox></td>
            </tr>
            <tr>
                <td class="style3">
                    <asp:Label ID="Label5" runat="server" Text="Age (>= 18):"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtAge" runat="server" Width="300px"></asp:TextBox></td>
            </tr>
            <tr>
                <td class="style3">
                    <asp:Label ID="Label6" runat="server" Text="Email:"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtEmail" runat="server" Width="300px"></asp:TextBox></td>
            </tr>
            <tr>
                <td class="style3">
                    <asp:Label ID="Label7" runat="server" Text="Password:"></asp:Label></td>
                <td>
                    <asp:TextBox ID="Password" runat="server" Width="300px"></asp:TextBox></td>
            </tr>
            <tr>
                <td class="style3">
                    <asp:Label ID="Label8" runat="server" Text="Reenter Password:"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtRenterPassord" runat="server" Width="300px"></asp:TextBox></td>
            </tr>
        </table>
        
        <br />
        <asp:Button ID="btnSubmit" runat="server"
            Text="Submit" />
        <br />
        <br />
        <asp:CheckBox ID="cbValidateEnabled" runat="server" Checked="True"
            Text="Validate Enabled" />
        <br />
        <asp:CheckBox ID="cbClientsideValidation" runat="server" Checked="True"
            Text="Client-side Validation Enabled" />
        <br />
        <asp:CheckBox ID="cbShowSummary" runat="server" Checked="True"
            Text="Show Summary" />
        <br />
        <asp:CheckBox ID="cbShowMessageBod" runat="server" Text="Show Message Box" />
        
        <br />
        <br />
        <table align="center" class="style5">
            <tr>
                <td align="center">
                    FOOTER</td>
            </tr>
        </table>
        
    </div>
    
    </form>
</body>
</html>

Edited by BillyM2010 on Feb 13, 2012 10:13 PM
Edited by BillyM2010 on Feb 13, 2012 10:13 PM
Edited by BillyM2010 on Feb 13, 2012 10:13 PM

Reply

AceCorban

Star

12318 Points

2269 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 13, 2012 06:02 PM|LINK

This is one of those web developer theology questions that can usually cause quite a stir. Some people will say that tables are completely unecessary with modern css and will make great efforts to replace tables just for the sake of replacing the tables. I tend to believe that everything that can be done with tables can be done with divs, but sometimes, forcing it seems like overkill. One thing tables do very well that is tougher with divs is multiple columns of data that all have to be the same height. If you place two divs side by side and need them both to be as tall as the column with the most content, it can be a real pain, especially cross platform. In the end, there is no real reason to hate on tables, but they should be used with care. I've seen some sites go off the deep end with tables within tables within tables (etc). If you are doing that, you can probably simplifly the markup.

"Dream as if you'll live forever, live as if you'll die today." --James Dean

Edited by AceCorban on Feb 13, 2012 10:13 PM

Reply

BillyM2010

Member

25 Points

35 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 13, 2012 07:01 PM|LINK

Then perhaps in my example above, tables made more sense for the lable/textbox combinations as I wanted the labels to line up with their corresponding textbox and was struggling with how to accomplish this using DIV's. I was under the impression from what I have read that tables are old-school.

Edited by BillyM2010 on Feb 13, 2012 10:13 PM

Reply

AceCorban

Star

12318 Points

2269 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 13, 2012 07:09 PM|LINK

It honestly doesn't matter too much. People are hating on tables, but I'm not really sure why. Granted, they require a bit more markup than divs, but in the end, whatever works for what you need is fine. My only real advice would be to explore alternatives if it seems you have too many tables on your page, but an ocassional table isn't going to hurt anything.

"Dream as if you'll live forever, live as if you'll die today." --James Dean

Edited by AceCorban on Feb 13, 2012 10:13 PM

Reply

BillyM2010

Member

25 Points

35 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 13, 2012 07:28 PM|LINK

I would still be cruious to see the example I gave in my OP done using DIV's. I was uanble to figure it out. I want the textbox labels to line up with their corrosponding textbox for each "row".

Edited by BillyM2010 on Feb 13, 2012 10:13 PM

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 14, 2012 05:58 AM|LINK

Hi,

You can use this post-

http://forums.asp.net/p/1738405/4676705.aspx/1?Re+Need+Space+between+rows+

Only thing change the -

.container div.title
        {
            clear: left;
            float: left;
            padding-top: 5px;
            width: 200px;
            text-align: left;
            margin-bottom:20px;
        }

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by BillyM2010 on Feb 15, 2012 03:01 PM

Reply

roopeshreddy

All-Star

20143 Points

3327 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 14, 2012 12:57 PM|LINK

Hi,

Check the below link!

http://www.dailycoding.com/Posts/layout_form_without_tables_with_css_trick.aspx

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

Marked as answer by BillyM2010 on Feb 15, 2012 03:01 PM

Reply

CollyMelon

Participant

997 Points

222 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 14, 2012 02:43 PM|LINK

I just converted your full page into CSS as below - I'm not saying this is the correct way if you had a huge amount of form elements but if I was given your above code I would just instantly convert it to CSS using ULs as that is my preference. I use tables in extreme cases (*only for tabular data as intended) not for form layouts this is what CSS is for. Again this is my preference and view. Please ask away on any part of the mark-up I have used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Layout Test</title>
    <style type="text/css">
    ul{
    margin: 20px 30px 0px 0px;
    padding: 0px;
    list-style-type: none;
    float: left;
    }
    
    ul li{
    height: 30px;
    }
    
    #Header{
    width: 100%;
    height: 50px;
    background-color: #00FF00;
    text-align: center;
    font-weight: bold;
    }
    
    #Footer{
    width: 100%;
    height: 50px;
    background-color: #00FFFF;
    text-align: center;
    font-weight: bold;
    clear: left;
    }
        
    .Bold{
    font-weight: bold;
    }
    
    .Clear{
    clear: both;
    }
    </style>
</head>

<body>
<form id="form1" runat="server" defaultfocus="txtName" defaultbutton="btnSubmit">

    <div id="Header">
        <h1>HEADER</h1>
    </div>

    <ul>
        <li class="Bold">Description</li>
        <li>Name:</li>
        <li>ID (Multiple of 5):</li>
        <li>Day Off (04/01/2012 - 04/30/2010):</li>
        <li>Age (>= 18):</li>
        <li>Email:</li>
        <li>Password:</li>
        <li>Re-enter Password:</li>
    </ul>

    <ul>
        <li class="Bold">Value</li>
        <li><asp:TextBox ID="txtName" runat="server" Width="300px"></asp:TextBox></li>
        <li><asp:TextBox ID="txtID" runat="server" Width="300px"></asp:TextBox></li>
        <li><asp:TextBox ID="txtDayOff" runat="server" Width="300px"></asp:TextBox></li>
        <li><asp:TextBox ID="txtAge" runat="server" Width="300px"></asp:TextBox></li>
        <li><asp:TextBox ID="txtEmail" runat="server" Width="300px"></asp:TextBox></li>
        <li><asp:TextBox ID="Password" runat="server" Width="300px"></asp:TextBox></li>
        <li><asp:TextBox ID="txtRenterPassord" runat="server" Width="300px"></asp:TextBox></li>
    </ul>

    <div class="Clear"></div>
         
    <br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    <br />

    <ul>
        <li><asp:CheckBox ID="cbValidateEnabled" runat="server" Checked="True" Text="Validate Enabled" /></li>
        <li><asp:CheckBox ID="cbClientsideValidation" runat="server" Checked="True" Text="Client-side Validation Enabled" /></li>
        <li><asp:CheckBox ID="cbShowSummary" runat="server" Checked="True" Text="Show Summary" /></li>
        <li><asp:CheckBox ID="cbShowMessageBod" runat="server" Text="Show Message Box" /></li>
    </ul>

    <div id="Footer">
        <h3>FOOTER</h3>
    </div>
     
</form>
</body>
</html>

Edited by CollyMelon on Feb 14, 2012 02:44 PM
Edited by CollyMelon on Feb 14, 2012 02:45 PM
Edited by CollyMelon on Feb 14, 2012 02:48 PM
Marked as answer by BillyM2010 on Feb 15, 2012 03:02 PM

Reply

BillyM2010

Member

25 Points

35 Posts

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

Feb 15, 2012 03:22 PM|LINK

CollyMellon,

That was VERY impressive. It is so much cleaner than cluttering up the HTML with a lot of noisy table elements, and far more readable.

My sense now is that it will likely be worth the investment of time to become proficient with CSS.

I posted another, more challenging question in another thread on this forum. Ultimately my goal is to convert a sophistivcated ERP app we are buidling for auto dealerships (a DMS) from a multier/multitennant WCF/SOA backend using WinForms on the front end to a full web-based multi-tennant SAAS app. The challenge is that business apps tend to have far more complex data-entry type form requirements than found on most web sites. The controls are packed more densly and scrolling needs to be minimal, if at all. I am looking for an approach that will make the most sense for this scenario.

Regards,
Bill

Edited by BillyM2010 on Feb 15, 2012 03:23 PM

Newbie question on laying out a table/css file as div/css (or even if I should) RSS

8 replies

BillyM2010

Newbie question on laying out a table/css file as div/css (or even if I should)

AceCorban

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

BillyM2010

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

AceCorban

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

BillyM2010

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

asteranup

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

roopeshreddy

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

CollyMelon

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

BillyM2010

Re: Newbie question on laying out a table/css file as div/css (or even if I should)

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft