The Importance of Avoiding the Use of Nested Tables
Published April 17, 2009 - RSS/XML Feed RSS
 

By Grace Chen

A table is a web page element used to display tabular data placed in individual cells and aligned in rows and columns. However, somewhere along the evolution of web page development when designers discovered they could remove table border lines, they began using tables and nested tables as a layout tool.
 
What are nested tables? Simply put, they are tables within tables. Older HTML coded sites ended up looking plain and dull, and they had an annoying tendency to become very vertical; nested tables provided a haven against dullness. Nested tables allowed web designers to control page layout by creating larger and smaller tables with different sized cells that each display images and/or text. And instead of using annoying frames, nested tables allowed columnar layouts on web pages. 
 
At one point in the peak of web browsing before the introduction of Web 2.0, there was nary a website that did not use nested tables as a layout function. Now, however, there is the more sophisticated CSS coding that allows web designers to develop interesting layouts without complicated nested tables that also are faster-loading and easier to manipulate. 
 
When Should You Use or Avoid Tables?
 
Tables still have an important function in web page layout. Tables allow a web designer to align data in rows and columns. An easy example is a monthly income summary using month names as the column headings on the first row, and the income numbers listed directly below each month on the second row.  Anyone who has used Microsoft Excel knows how tables can be a great tool to line up large amounts of data, and that layout can be duplicated using HTML on a web page.
 
Though tables and nested tables were once the popular way to design for web page layout, it is no longer recommended by web design gurus and SEO specialists. Why? One of the main reasons for SEO purposes is that they can be incompatible for some browsers. Another big reason is that nested tables can be slower loading, restrictive for layouts, and prevent a more flexible and functional web page.
 
Compatibility
In the world of Web 2.0, there is a strong leaning toward ensuring that web pages are compatible with many more types of web browsers than just Microsoft Internet Explorer. Web pages are accessed not only from desktop computers, but also through WiFi on laptops, Blackberries, iPhones, and other smaller phones with web access. Tables do not show up well on these smaller screens in our portable world, nor does all table programming translate into most smaller portable browsers. In order to provide access to your website to more users, you need alternative layout programming.
 
Layout & Bandwidth
Besides making web pages that are easily accessible by more visitors, a web designer wants to keep things as easy as possible on his end. Nested tables are an extremely labor intensive process in maintaining consistency throughout many pages, especially if a website is large and contains hundreds of pages. 
 
In addition, a major issue with nested tables stems from potentially slower loading times from the user's perspective.  Unlike CSS, which dynamically displays the content in the browser window as each element is retrieved from the server, nested tables must load all of the information and structure before it can be displayed to the visitor.  Subsequently, a visitor may see a blank site until the entire table and its contents load, which is a contrast to CSS websites, which load design elements gradually.  While the server retrieval may not technically be slower, from the perspective of the visitor, the site does load at a slower pace.  
 
To worsen the issue, browsers have a tendency to display nested tables quite slowly, especially in comparison to CSS design.  If your design incorporates many tables nested within each other, or a table has many rows that each includes a child table, then the speed is made even more sluggish.  While Mozilla Firefox is more expeditious than Internet Explorer at rendering nested tables, the general consensus is that nesting slows down the user's experience. 
 
The other problem with using nested tables as a layout tool is that it requires much more bandwidth to store more coding text, as well as images, photos and other elements inserted into each cell.  This not only drains resources from a hosting perspective, but also makes the end result slower for your visitors to navigate.  
 
Web designers need to keep in mind that visitors should be able to load and browse quickly, especially on mobile browsers that usually charge by the kilobyte.
 
The Benefits of CSS
 
CSS, also known as Cascading Style Sheets, is a style sheet programming language that allows a web developer to create a consistent look within a website. A columnar layout that once needed nested tables can now be achieved through much easier CSS programming. More benefits include:
 
  • Consistency – A web programmer now has the ability to create consistent layout for many pages rather than programming each page individually. Font types, headings, columns, colors, and more can be controlled with a single CSS page.
 
  • Compatibility – CSS is read by most of the popular browsers, including Internet Explorer, Firefox, Opera, and Safari. The CSS coding can also be translated and read by popular mobile browsers used on Blackberries and iPhones.
 
  • Flexibility – CSS programmers can develop attractive web page layouts without the bandwidth and time drain of nested tables.
 
  • SEO Improvement – Through the use of CSS, webmasters can improve their SEO ranking with easier coding of keywords in header tags, and by using actual text instead of GIF images for headers.
 
CSS has become one of the best tools to create consistent web pages that are easier to find on search engines and allow visitors to navigate more simply. If you’re unfamiliar with CSS, it is easy to learn and incorporate into web designing, especially if you are already familiar with HTML. 
 
If you’re looking to improve your SEO rankings, start incorporating CSS in your web pages. You’ll find that bots will crawl your site more quickly and have more valuable information to use in algorithmic ranking. Your users will have an easier time accessing your site through almost any browser. And most importantly, you’ll be able to manage and update your entire website more easily with current content and pertinent keywords.
 
 
 
Resources:
 
http://en.wikipedia.org/wiki/Css
 
http://www.indywebshop.com/bestpractices/2006/06/14/css-vs-nested-tables/
 
http://www.stonetemple.com/articles/css-and-seo.shtml

 

Read Related Articles About How to Optimize Your Site

All Categories: