Why use CSS in layouting a website instead of tables
Last updated on December 31, 2011. Tags: CSS layout, tableless web page layout
One of the most efficient ways of making a website search engine friendly is to have as many readable content and as few formatting codes as possible. Readable content are those that the website's human visitors can actually see such as text, hyperlinks, and alt and title attributes (for images). Formatting codes are those that we use in formatting text, calling external files and anything else that is not visible in the browser.
This is the main reason why blogs and news websites appear frequently on top of search results while websites made of pure flash rarely appear on search results. Blogs contain huge chunks of content; good food for search engine spiders and for humans craving for knowledge. Pure flash websites, on the other hand, contains nothing but a piece of code that calls an external swf file.
When you use table to force the layout of the webpage, you need to use several formatting codes. Below is a screenshot of a webpage that uses table layout. Click on the screenshot to see the actual page.
The HTML code for this site is shown below.
<table border="0" cellpadding="0" cellspacing="0" width="700"> <tr> <td width="700" colspan="2" height="100" bgcolor="#ffccff">Header</td> </tr> <tr> <td width="200" height="300" align="center" valign="top" bgcolor="#ffff99"> <br> <a href="#">Menu 1</a> <br><br> <a href="#">Menu 2</a> <br><br> <a href="#">Menu 3</a> <br><br> <a href="#">Menu 4</a> <br><br> <a href="#">Menu 5</a></td> <td width="500" height="300" align="left" valign="top" bgcolor="#c0c0c0"> <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </td> </tr> <tr> <td width="700" colspan="2" height="70" bgcolor="#ccff99">Footer</td> </tr> </table>
You will notice that in this layout, the tags contain so many codes whose function is to format the layout. There are codes assigned to control the width and height of a cell, the background color of a cell and how the texts within a cell are aligned.
Now, let's see a webpage in which the layout was done using CSS. An example of a webpage using CSS layout is shown in the screenshot below. Click on the screenshot to see the actual webpage.
Do they look identical? Think again. The difference will be clear if you view the source code:
<div id="wrapper"> <div id="header">Header</div> <div id="left-menu"> <br> <a href="#">Menu 1</a> <br><br> <a href="#">Menu 2</a> <br><br> <a href="#">Menu 3</a> <br><br> <a href="#">Menu 4</a> <br><br> <a href="#">Menu 5</a> </div> <div id="right-content"> <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> <div id="footer">Footer</div> </div>
Here, you will notice that the code is much cleaner. Aside from those div tags, everything else is readable text.
This is what search engine spiders love. They can index several readable contents within the page.
Theoretically, the most search engine friendly websites are those that contain nothing but readable text and few links. However, human visitors would find such a website boring and difficult to navigate (since there is no navigation menu). Hence, we still need to spend some codes in formatting and layout.
The question now is: How can we format and layout a webpage when it contains nothing but readable texts and div tags?
The answer is the external CSS file (csslayoutstyle.css) being called from the head section of the webpage. Go back to the sample page with CSS layout and check its source code; in particular the head section. You will notice this code.
<link type="text/css" rel="stylesheet" media="screen" href="csslayoutstyle.css">
The content of the CSS file is as follows:
body {
background: #ffffff;
margin: 0;
padding: 0;
}
#wrapper {
width: 700px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #dddddd;
}
#header {
width: 700px;
height: 100px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ffccff;
}
#left-menu {
width: 200px;
height: 300px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ffff99;
text-align: center;
}
#right-content {
width: 500px;
height: 300px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #c0c0c0;
}
#footer {
width: 700px;
height: 70px;
margin: 0;
padding: 0;
border: 0;
float: left;
background: #ccff99;
}
By placing the formatting on a separate file, the search engine spiders are free to explore and index the readable content, while at the same time, human visitors can glance the webpage for both its useful content and beautiful layout.
To learn the basics of creating a webpage with CSS layout, visit this article: Designing a simple website layout using CSS.
Posted by Greten on October 10, 2008 under Cascading Stylesheet, Search Engine Optimization
Related Posts
- Margin and padding of block elements
- Centering a fixed-width webpage using absolute position
- Fixed-width two-column CSS layout
- Forcing the master block element of a centered fixed-width layout to vertically expand
- Centering a fixed-width webpage using auto margin
You might also be interested (randomly generated):
- Margin and padding of block elements
- Search engine optimization of HTML title tags
- HTML title tag
- Redirecting visitors to update page during website maintenance
- Multiple page menus in WordPress using include argument
Post Comments
Comment Rules and Reminders
- The links to the commentator's e-mail do not have nofollow tag. However, I will be very strict in approving comments.
- When you comment, please say something that indicates that you indeed read my post. If your comment is a general statement that can fit to any blog post about any topic, it will be regarded as spam.
- What you write in the name field may include keywords to your website provided that (1) it's only up to four words long and (2) at least one of these four words is your first name or nickname. I rather reply to Bob or to Joe Smith than to Online Marketing Tips.
- Please double check your comment before clicking the "Post" button. Once you clicked it, there will be no way for you to edit your comment.
- Fields marked with asterisks (*) are required. Your email will never be displayed in public.
