|
 According to the World Wide Web Consortium, (http://www.w3.org/TR/REC-html40/struct/tables.html)
"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells" The use of tables for web page layouts has been popular with web designers because of their ability to position text and images in specific cell locations on a page, similar to laying out a newspaper.
Tables are handy for page layouts, but they must be used with caution – not only because nested tables can cause display problems in different browser versions, but also because they push the most important page content for search engine indexing to the bottom of your HTML code, under the table layout code. When a web page is created using tables, the main text of the page is generally laid out into the bottom right cell of a table. Naturally, a search engine robot indexing the page will travel left to right, top to bottom, having to pass through a lot of table code before finding this content. To avoid this, make sure you feed the most informative table cell first by placing it towards the top of your table. One good way to pull the content higher up in the HTML code is to shift the site navigation menu from the left hand side to the right hand side of the page. However there is a way to retain your navigation menu on the left and still have your main text content indexed first by creating an empty cell which opens the cell row. It is illustrated by the picture below. 
The spiders will enter your site at the first table, the header, and then travel through to the empty cell in row 1 of the second table, the next stop is your content area, the "meat" of your website. After going through your content the spiders will then continue onto row 2 where you have inserted a table holding your navigation, if your navigation is image based, as most is, it holds very little content that matters from the spider's perspective. The spiders will then follow through to row 3 where you have your footer, a place to add valuable text links rich in targeted keywords. This pattern is not applicable for all Web sites. Many designers prefer to stick to a professional and clean design when there's only one picture (maybe a flash animation) and probably a bottom or a top menu. Still, it's vital to lay out textual content on the home page also, without resorting to the largely discredited HTML tricks that hide text from visitors, which is sure to be considered spamming by the search engines. In this table they lay out a picture and a simple menu. Nothing else is visible at first sight and the page produces a perfect impression of a sleak and clean design. Where's the content? Just scroll down the page. Clever, isn't it? Here's an example of such a table: 
Tables and accidental spamming Another concern about tables is that they allow you set a background for each table cell, and many designers often use this possibility to set the cell's color other than the page background (for instance, your typical white background). The designer may then type white text into this cell. Thus, the text is the same color as the main page background. And although it's quite visible to users, a spider may consider it spamming because the designer is trying to use the same color text and page background. Remember, the spider is just a machine and may think that the designer is tyring to hide the text! Search engines may penalize you for this. Here's an example of the code: <body bgcolor="#ffffff"> <!-- background of the body is white --> <table> <tr> <td bgcolor="#ff0000"> <!-- background of the table cell is red --> <font color="#ffffff">This is the white text in the cell!</font> </td> </tr> </table> And here's how it looks like: | This is the white text in the cell! | If you've found out you are using this or similar effect on your pages but still like to keep the formatting, use CSS instead: <style type="text/css"> // let's define the class .whitetext { Color:#ffffff; } </style> … then when it comes to our text: <span class="whitetext"> So far this is a bulletproof technique.
 |
Subscribe to this comment's feed