Table Layout Vs Div Layout

Table based layouts were the old way of organizing the content and divs based are the newer way. Is it good? Yes. Why we use divs layout instead of table layout? Firstly we discuss about the tables and div.
Tables: Tables is fixed type and consists of table rows (tr), table data (td), table heading (th). So, tables are strict for those layouts which are more tabular. Use table layout for website purpose, it increase the complexity in layout structure and reduce a flexibility of the website. When we need to change the layout in an existing page, it’s totally troublesome in table based layout; as a result of code impact are a lot of.

DIV: Div is floating type and can divide our webpage into multiple divisions. So divs are more flexible as they do not strict to tabular layouts. Whereas in Div layout, it’s just the single tag Div, all the styles can be declared in the CSS files.

Why we use div instead of table layout?
<table cellpadding="0" cellspacing="0" border="0"> 
       <td colspan="3" height="120px" class=”header”>....</td> 
     <td class="navigation" valign="top">...</td> 
     <td class="content" valign="top">...</td> 
     <td class="sidebar " valign="top">...</td> 
    <td colspan="3" class=”footer”>...</td> 
<div id="header">...</div>
<div id="navigation">...</div>
<div id="content">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

As we see above example: The table based layout is more complex and content more tags than div layout. The colspan and rowspan attributes create the code even additional complicated, and any developer maintaining that page in future must bear plenty of code to grasp its structure.

Conclusion: Divs layout need less code than table layout , it means div layout reduce the webpage size. Table based layout contain lot of attribute , for pixel perfect layout we need to define all attribute(like border, cell padding , cell spacing , width , height etc.. ) on the table tags and also difficult to change the design in and exiting webpage . On the other side div layout based on CSS, so it’s very easy to change the design.

Note: When you are making HTML to be used in emails tables are sadly still mandatory: several mail clients use hypertext markup language rendering engines that still suppose it’s 1998. Microsoft Outlook could be a notable example of this.

Leave a Comment.