Introduction
Most of the web designers directly chose the table-based layout for their websites. The reason behind this is it's much easier to design a webpage rather than going for div div-based layout or the web designers are not that familiar with CSS. But there are lots of drawbacks to it.
Page Size will Increase
The table has a lot of inner tags like TR, TD, and TH and each inner tag will have separate styles in it. We need to write styles for every tag. Surely it will increase the page size and because of that downloading speed and the network bandwidth will get increase. Whereas in Div layout, it's just the single tag Div, all the styles can be declared in the CSS files, which reduces the web page size.
Page rendering will be slow
Page rendering will be slower in a table-based layout because page content won't be displayed until the end tag of the table is reached. But in Div based layout, rendering will be faster since it won't wait for the end tag for the content display.
Difficult to maintain
When we want to change the design in an existing page, it's very difficult in a table-based layout, because the code impact will be greater. Whereas in div based layout, it's very easy to change the design, because everything will be handled in the CSS.
No Consistency in pages
In the Div layout, there will be consistency on all the pages, but in the table layout, if we miss any parameter like table border, padding, or anything, the entire content will be changed and will not be consistent in all the pages.
Separating Content and Visual Presentation
In div layout, we are separating the HTML content and the visual presentation, so it makes the search spider of the web page act in a quick manner. Whereas in table layout, extra HTML pushes the important content further down to the page which increases the time to render the page.
Search Engine Tools
Div layout helps the search engine tools to search faster when compared with table layouts, since it needs to traverse several HTML tags. Div Layout - Less Code.
<div id="Header">...</div>
<div id="Menu">...</div>
<div id="Content">...</div>
<div id="LeftPane">...</div>
<div id="footer">...</div>
Table Layout More Code
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" height="120px">....</td>
</tr>
<tr>
<td class="Menu" valign="top">...</td>
<td class="Content" valign="top">...</td>
<td class="LeftPane" valign="top">...</td>
</tr>
<tr>
<td colspan="3">...</td>
</tr>
</table>
Excess code slows down development and raises maintenance costs. More lines of code means larger size which means longer download times. So go for Div layouts instead of the table layout. Use table layout only to display the tabular information and not in all the areas.