Click here to Skip to main content
15,028,757 members
Articles / Web Development / HTML
Article
Posted 17 Dec 2009

Tagged as

Stats

252.2K views
4.1K downloads
73 bookmarked

DIV TABLE

Rate me:
Please Sign up or sign in to vote.
4.54/5 (34 votes)
17 Dec 2009CPOL2 min read
This article demonstrates using div elements to effectively build websites without using table elements on a page.

Introduction

This article demonstrates using div elements to effectively build websites without using table elements on a page. Because there are a number of advantages to the div element, most clients ask designers to develop websites using div elements rather than table elements. The code below is for beginners learning to use div elements to develop websites.

The following explains why to use DIV over TABLE elements:

Pros of Table Element: Most designers use table for a consistent look. Tables are also easy to maintain. Another advantage of table is that it is compatible with most browsers.

Cons of Table Element: All this comes with a cost: Too many nested tables increase page size and download time. More table elements push important content down so search spiders are less likely to add content to search engines.

Pros of DIV Element: div with CSS can achieve the same table based page structure and reduce the number of elements on the page, which allows the page to load faster. It also makes page more compatible with search engine spiders.

Cons of DIV Element: The major drawback of this is not all CSS elements are browser compatible. Because of this, we have to write some custom CSS to resolve issues.

Using the Code

I have created one simple application which shows how easily you can create your own pages with div elements only.

The following diagram demonstrates the layout of div elements.

DIVwebsite/image001.jpg

DIVwebsite/DivLayout.JPG

Here is a list of the style sheet classes I have created for the page layout. Let’s get into more detail.

  • divHeaderTable: Class assigned to the header of the HTML page and its works as headertable
  • divHeaderRow: Class assigned to the div element which works as header row of table. As height of header image is fixed to 105 rows having height element value 105px.
  • divHeaderColumn: Class assigned to div element which works as header column of the table. As header part is divided in three parts, the width element has value 99%.
  • divTable: Class assigned to the div element works as the table in container part of HTML document.
  • divRow: Class assigned to the div element works as the row in container part of HTML document.
  • divColumn: Class assigned to the div element works as the table in container part of HTML document. As container form element are 4 per row, the width element has value 24%.
CSS
body
{
            background-color: LightBlue;
            font-family: Verdana;
            font-size: 13px;
}
.divHeaderTable
{
            width: 100%;
            padding-bottom:5px;
            display:block;
}
.divHeaderRow
{
            width: 100%; /* add extra that you want to for header column */
            display:block;
            height:105px;
}
.divHeaderColumn
{
            float: left;
            width: 33%;
            display:block;
}
.divTable
{
            width: 100%;
            display:block;
            padding-top:10px;
            padding-bottom:10px;
            padding-right:10px;
            padding-left:10px; 
}
.divRow
{
         width: 99%; 
         display:block;
         padding-bottom:5px;
}
.divColumn
{
         float: left;
         width: 24%;
         display:block;
}

Following is the HTML code of the page which shows how the classes are assigned to the elements.

HTML
<!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">
                 
            </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>   </li>
            <li style="float:left"><a href="javascript:void(0);" >About Us</a>   </li>
            <li style="float:left"><a href="javascript:void(0);" >Services</a>   </li>
            <li style="float:left"><a href="javascript:void(0);" >Technology</a>  </li>
            <li style="float:left"><a href="javascript:void(0);" >Outsourcing</a>  </li>
            <li style="float:left"><a href="javascript:void(0);" >Quality</a>  </li>
            <li style="float:left"><a href="javascript:void(0);" >Career</a>  </li>
            <li style="float:left"><a href="javascript:void(0);" >Blogs</a>  </li>
            <li style="float:left"><a href="javascript:void(0);" >Partner</a>  </li>
            <li><a href="javascript:void(0);" title="Contact Us">Contact Us</a>  </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">
         <input type="submit" value="Submit" onclick="javascript:void(0);" />
          or   
        <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>

Points of Interest

This is not the only structure you can create with div and CSS. You can achieve different layouts with this as well.

So from the above example, you can see the div layout with CSS is easy and powerful. Because of this, web pages download faster, avoid using more tags, and create web pages that are more appealing to search engines.

License

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

Share

About the Author

Pranay Rana
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

 
QuestionJavascript Pin
komaltouch0916-Mar-17 21:49
Memberkomaltouch0916-Mar-17 21:49 
QuestionConvert html tables to div elements Pin
Member 111241311-Oct-14 11:47
MemberMember 111241311-Oct-14 11:47 
SuggestionHave you measure the size of what you are comparing? Pin
Arif Budimartoyo20-Aug-14 14:52
professionalArif Budimartoyo20-Aug-14 14:52 
GeneralMy vote of 3 Pin
Rahulsandal25-Jun-14 20:12
MemberRahulsandal25-Jun-14 20:12 
QuestionWell done Pin
khaliqhamid30-Aug-13 19:35
Memberkhaliqhamid30-Aug-13 19:35 
QuestionNice Pin
Gajendra Yadav20-Sep-12 4:02
MemberGajendra Yadav20-Sep-12 4:02 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey27-Mar-12 4:11
professionalManoj Kumar Choubey27-Mar-12 4:11 
GeneralMy vote of 3 Pin
Member 43208449-Nov-11 20:43
MemberMember 43208449-Nov-11 20:43 
QuestionGreat Articel Pin
JP_Rocks19-Oct-11 3:18
MemberJP_Rocks19-Oct-11 3:18 
QuestionDoes not work in IE9 Pin
Garry Lowther30-Jul-11 4:54
MemberGarry Lowther30-Jul-11 4:54 
GeneralMy vote of 5 Pin
RusselSSC27-Jan-11 12:13
MemberRusselSSC27-Jan-11 12:13 
GeneralRe: My vote of 5 Pin
Pranay Rana17-Mar-11 19:55
professionalPranay Rana17-Mar-11 19:55 
Generalgood job Pin
Arlen Navasartian19-Jan-10 21:28
MemberArlen Navasartian19-Jan-10 21:28 
GeneralRe: good job Pin
Pranay Rana20-Dec-10 0:37
professionalPranay Rana20-Dec-10 0:37 
GeneralGood Article Pin
thatraja15-Jan-10 18:31
professionalthatraja15-Jan-10 18:31 
GeneralRe: Good Article Pin
Pranay Rana20-Dec-10 0:36
professionalPranay Rana20-Dec-10 0:36 
Generalmy vote of 4 Pin
CalvinHobbies26-Dec-09 4:42
MemberCalvinHobbies26-Dec-09 4:42 
GeneralRe: my vote of 4 Pin
Pranay Rana20-Dec-10 0:36
professionalPranay Rana20-Dec-10 0:36 
GeneralThe Reason for DIV vs TABLE Pin
.hmcclungiii20-Dec-09 9:47
Member.hmcclungiii20-Dec-09 9:47 
GeneralI know div Renders faster Pin
Abhishek Sur18-Dec-09 12:14
professionalAbhishek Sur18-Dec-09 12:14 
GeneralMy vote of 1 PinPopular
JLuterek18-Dec-09 5:44
MemberJLuterek18-Dec-09 5:44 
GeneralRe: My vote of 1 Pin
Pranay Rana18-Dec-09 6:34
professionalPranay Rana18-Dec-09 6:34 
GeneralRe: My vote of 1 Pin
JLuterek19-Dec-09 2:37
MemberJLuterek19-Dec-09 2:37 
GeneralRe: My vote of 1 Pin
Dr. Song Li19-Jun-11 14:08
mvaDr. Song Li19-Jun-11 14:08 
GeneralMy vote of 1 PinPopular
SmirkinGherkin17-Dec-09 22:13
MemberSmirkinGherkin17-Dec-09 22:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.