Click here to Skip to main content
15,886,689 members
Articles / Web Development / HTML

DIV TABLE

Rate me:
Please Sign up or sign in to vote.
4.54/5 (34 votes)
17 Dec 2009CPOL2 min read 268.5K   4.1K   73  
This article demonstrates using div elements to effectively build websites without using table elements on a page.
<!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>
    <title>Gmind Solusion-DivElement Layout</title>
    <link href="CSS/StyleSheet.css"  rel="Stylesheet"  type="text/css"   />
</head>
<body>

 <div style="width:99%; height:565px;">
    <div class="divHeaderTable">
        <div class="divHeaderRow">
            <div class="divHeaderColumn">
                <img alt="Offshore Outsourcing software development company India" title="Offshore Outsourcing software development company India"
                    src="Images/gmind.png" width="100%" height="105" />
            </div>
            <div class="divHeaderColumn">
                &nbsp;
            </div>
            <div class="divHeaderColumn">
                <div>
                    <img alt="Gmind" width="15" height="10" src="Images/smllindia.jpg" />
                    +91-9702989270
                </div>
                <div>
                    <img alt="Gmind" src="Images/smallusa.jpg" />
                    +91-9924839208
                </div>
                <div>
                </div>
                <div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="menu" class="divHeaderTable" >
        <ul style="list-style-type:none;" >
            <li style="float:left"><a href="javascript:void(0);" >Home</a> &nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >About Us</a> &nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >Services</a> &nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >Technology</a>&nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >Outsourcing</a>&nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >Quality</a>&nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >Career</a>&nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >Blogs</a>&nbsp;&nbsp;</li>
            <li style="float:left"><a href="javascript:void(0);" >Partner</a>&nbsp;&nbsp;</li>
            <li><a href="javascript:void(0);" title="Contact Us">Contact Us</a>&nbsp;&nbsp;</li>
        </ul>    
    </div>
    
    <div id="divHeader" class="divHeaderTable">
        <h4>User Registration</h4>
    </div>
    
    <div id="content" class="divTable">
       <div class="divRow">
        <div class="divColumn">
            <div>
                <label id="lblSolutation" > Solutation</label>
            </div>
            <div>
                <input type="text" id="txtSolutation" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="lblFname" > First Name</label>
            </div>
            <div>
                <input type="text" id="Text1" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="lblMname" > Middle Name</label>
            </div>
            <div>
                <input type="text" id="Text2" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="lblLname" > Last Name</label>
            </div>
            <div>
                <input type="text" id="Text3" />
            </div>
        </div>
      </div>
      
       <div class="divRow">
       <div class="divColumn">
             <div>
                <label id="Label10" > Login Name</label>
            </div>
            <div>
                <input type="text" id="Text13" />
            </div>
        </div>
        <div class="divColumn">
             <div>
                <label id="Label9" > E-mail</label>
            </div>
            <div>
                <input type="text" id="Text12" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="Label7" > Password</label>
            </div>
            <div>
                <input type="password" id="Text10" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="Label8" > Confirm Password</label>
            </div>
            <div>
                <input type="password" id="Text11" />
            </div>
        </div>
      </div>
      
       <div class="divRow">
        <div class="divColumn" style="width:48%;">
            <div>
                <label id="Label1" > Address1</label>
            </div>
            <div>
                <textarea id="Text4" style="width:80%;" ></textarea>
            </div>
        </div>
        <div class="divColumn" style="width:48%;">
            <div>
                <label id="Label3" > Address2</label>
            </div>
            <div>
                <textarea id="Text6" style="width:80%;"> </textarea>
            </div>
        </div>
      </div>
      
       <div class="divRow">
        <div class="divColumn">
            <div>
                <label id="Label2" > State</label>
            </div>
            <div>
                <input type="text" id="Text5" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="Label4" > City</label>
            </div>
            <div>
                <input type="text" id="Text7" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="Label5" > Country</label>
            </div>
            <div>
                <input type="text" id="Text8" />
            </div>
        </div>
        <div class="divColumn">
            <div>
                <label id="Label6" > Pin Code</label>
            </div>
            <div>
                <input type="text" id="Text9" />
            </div>
        </div>
      </div>
      
      <br />
      <div class="divRow">
        &nbsp;<input type="submit" value="Submit" onclick="javascript:void(0);" />
        &nbsp; or &nbsp; 
        <a  href="javascript:void(0)">Cancel </a> 
      </div>
    </div>
 </div>   
 <div style="text-align:center; background-color:Green;">
  Contact us to discuss your requirements
 </div>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India

Microsoft C# MVP (12-13)



Hey, I am Pranay Rana, working as a Team Leadin MNC. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5.5 years now.

For me def. of programming is : Programming is something that you do once and that get used by multiple for many years

You can visit my blog


StackOverFlow - http://stackoverflow.com/users/314488/pranay
My CV :- http://careers.stackoverflow.com/pranayamr

Awards:



Comments and Discussions