There is a little-known web design problem that can prevent search engine spiders from finding the content on web pages. It’s called excessive table nesting and the problem is more common than most designers and site owners think.
WYSIWYG (what you see is what you get) web design tools, such as Microsoft Frontpage, Macromedia Dreamweaver, Adobe GoLive and others make it very easy for a web designer to create a design with a table within a table within a table within a table, etc, until the web page looks like the Web designer would like it to look. If the borders on the tables are turned off, the problem may be invisible to someone viewing the final design.
The problem is that while the tables may be invisible, the HTML code necessary to create the tables is not invisible to the search engine spiders that must dissect the code and it can be a serious impediment. Excessive table nesting creates complex code that hinders both Web page performance and Web page spiderability.
Another problem with excessive table nesting and the code created is that it raises the ratio of code-to-content on a page. There may be clear search engine benefits when a page script contains more content than code. If your page scripts are 90% HTML, CSS and JavaScript code with only 10% content, you very likely will have problems getting that page to rank well.
A general rule for table nesting in Web design
If you want search engine spiders to be able to find the content on your pages, try to never nest tables more than two deep, which means a table within a table. If the design requires it, you may be able to get by with tables nested three deep, but any more than that will likely cause problems. How can you tell if excessive table nesting is causing problems with spiders? One telltale sign is when Google is displaying a page’s Description meta tag rather than page content on search engine results pages.
How can I see if my Web site design has excessive nesting of tables?
One method would be to count the number and order of opening and closing table tags. This can be tedious and confusing if your design is complex. The method used to provide the example above is to add a bordercolor attribute [bordercolor="blue"] to each table. Make sure that the border width attribute is set to 1 or greater; otherwise the border will not display. Establish a color standard that identifies the table nesting depth. The following standard was used on the example shown above.
table level 1 bordercolor="blue"
table level 2 bordercolor="red"
table level 3 bordercolor="black"
table level 4 bordercolor="green"
table level 5 bordercolor="purple"
table level 6 bordercolor="orange"
This method can still be a bit tedious to set up, but once the Web design’s table nesting is simplified, it is quite easy to remove the bordercolor attributes and set the border width attribute back to 0.
Tips for table simplification in Web site design
- You do not need to wrap the entire page in a table. If you use separate header, content and footer tables, just set the align attributes to the same value, i.e., align="center", for each table.
- Images do not need to be wrapped in a separate table.
- Learn to use the colspan and rowspan table attributes to create complex table layouts that use much less HTML code.
- Learn to use CSS. The proper use of div containers can eliminate the need for tables altogether and dramatically reduice the amount of coce on a page.
For most standard web page designs, you only need three tables to define the page–a header, content section and footer. See the example below. This greatly simplified table design will work well for many web site designs.
Always think about ways to simplify table nesting when you are working with a complex web page, and do not rely on WYSIWYG web design tools to fix this problem. Most of the time, you will have to work with the code directly to resolve these issues.