Monday, September 2, 2013

Creating Table layout using DIV




Never use table tags to create any type of layouts ( i.e. table structure ) . See below cons using table tags

1. It takes lots of additional markup
2. It increases file size
3. It increase download time
4. search spider will never give high relevance score for that webpages because most of content will go down due to more table tags.

To overcome all the above cons we will go for DIV and CSS Layout

Example : 

<div id="wrapper">
        <div id="header">Header</div>
        <div id="content">
                <div id="content-left">Left Content</div>
               <div id="content-main">Main Content</div>
               <div id="content-right">Right Content</div>
        </div>
        <div id="footer">Footer</div>
        <div id="bottom">http://millionvisit.blogspot.com</div>
</div>
#wrapper{width:900px;margin:0 auto;border:1px solid #bbb;padding:10px}
#header{border:1px solid #bbb;height:80px;padding:10px}
#content{margin-top:10px;padding-bottom:10px}
#content div{padding:10px;border:1px solid #bbb;float:left}
#content-left{width:180px}
#content-main{margin-left:10px;width:500px}
#content-right{margin-left:10px;width:134px}
#footer{float:left;margin-top:10px;margin-bottom:10px;border:1px solid #bbb;width:878px}
#bottom{clear:both;text-align:right}

OutPut : 







No comments:

Post a Comment