|
|
|
|
|
|
|
Author Rank :
|
|
|
Page Views :
|
8584
|
|
Downloads :
|
0
|
|
Rating :
|
Rate it
|
|
Level :
|
Beginner
|
|
|
Most of the web designers directly chose the table based layout for their
websites. Reason behind this is it's very easier to design a webpage rather than
going for div based layout or the web designers are not that much familiar with
CSS. But there are lots of drawbacks in it.
Page Size will Increase
Table has lot of inner tags like TR, TD, TH and each inner tag will have
separate styles in it. Need to write styles for each and every tag. Surely it
will increase the page size and because of that downloading speed and the
network bandwidth will get increased.
Whereas in Div layout, it's just the single tag Div, all the styles can be
declared in the CSS files, which reduce the web page size.
Page rendering will be slow
Page rendering will be slower in table based layout, because page content won't
be displayed until the end tag of table 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
table based layout, because code impact will be more. 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 Div layout, there will be a consistency in all the pages, but in table layout
if we miss any parameter like table border, padding or anything, 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's make the search spider of the web page to act in quick manner. Whereas in
table layout, extra HTML pushes the important content further down to the page
which increase 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 its need 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 table layout. Use table layout only to display
the tabular information and not in all the areas.
|
|
Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post
Here.
|
|
|
|
|
Login
to add your contents and source code to this article
|
|
|
|
|
|
|
|
|
|
|
|
Manikavelu Velayutham
I have over 6 years of IT industry experience with Microsoft technologies. I hold Masters degree in Computer Science and Applications. I am responsible for providing solution in Service Oriented Architecture and involving in Performance Engineering activities. I am also responsible for mentoring my team members.
|
|
|
|
|
|
|
|
|
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional
consulting company, our consultants are well-known experts in .NET and many of them
are MVPs, authors, and trainers. We specialize in Microsoft .NET development and
utilize Agile Development and Extreme Programming practices to provide fast pace
quick turnaround results. Our software development model is a mix of Agile Development,
traditional SDLC, and Waterfall models.
|
|
Click here to learn more about C# Consulting. |
|
|
|
|
|
|
|
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon.
Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees.
As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
|
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
|
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
|
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
|
|
|
|
|
|
|
|
|
|
|
|
|