Still using tables to lay out your Web pages? Well, there is a better way. By using Cascading Stylesheets, you can make changes to the look and feel of your Web pages without extensive re-coding. Or, you can author new ones that are compliant with Web standards.
Ever since tables became a part of HTML they've been and incredibly popular way not just to format information but as a design tool. Countless Web sites use tables to define page layout. So, how can a Web author create dynamic looking pages without tables? By using Cascading Style Sheets (CSS).
This article looks at building two- and three-column Web pages using CSS. It assumes that you have a basic familiarity with CSS and, of course, knowledge of HTML.
Why CSS Instead of Tables?
It's easy to understand why someone would be leery of dumping tables for CSS. Tables are a proven quantity: they're familiar, and they're safe. Moving to CSS is a lot of work. While tables are great for creating cool layouts, they can also present accessibility problems.
The main problem is accessibility, especially for the blind. Most screen readers for the Web don't handle the content of tables very well -- instead of reading text from left to right, they read it downwards. The meaning of the text in the table will often be lost.
By using CSS, you can make changes to the look and feel of your Web pages without extensive re-coding. By changing a single CSS file, you can (for example) modify column widths, change fonts, and more. The changes are automatically reflected in the Web pages that use the CSS file.
Finally, you may see some increase in the speed in which a Web pages laid out using CSS renders compared to a page using a table layout. This is especially true for large tables. My own very unscientific tests have shown that CSS layouts load anywhere from 5% to 15% faster than table layouts.
Browser and Platform Considerations
CSS seems like the perfect solution to your Web design problems. While it's good, CSS isn't perfect. And that's because not all Web browsers support CSS in the same way. Some CSS-capable browsers only support a subset of the CSS specification, while other support most of it.
I've tested CSS table layouts in several Web browsers. I've found that the following browsers do the best job of rendering CSS in general, and CSS table layouts in particular:
Opera (Windows and Linux)
Mozilla (Windows and Linux)
FireFox (Windows and Linux)
Konqueror (Linux)
Safari (MacOS)
Internet Explorer for Windows also does a pretty good job, but I've never been overly impressed with Netscape's CSS support. But you still may run into trouble. Older versions of certain browsers -- especially Safari and Opera -- don't support CSS all that well. CSS-based layouts may not work properly or at all. For example, columns may run into each other or appear stacked on top of each other.
The Two-Column Layout
A large number of Web sites that use tables for layout use two columns. The left column is for navigation, and the larger right column contains the content. Also, the page often contains a banner at the top for the title of an individual page, or for some kind of graphic or ad.
Breaking a Web page into three distinct areas is done with the div tag. The div tag is used define divisions or sections in an HTML document. So, a Web page using a two-column layout with a banner would be divided into three distinct sections.
So, how do you define the layout in CSS? First, create an empty file called twocol.css. Then, add the following code to the file:
div#bodyRight {
margin: 5px 25px 25px 225px;
width: 75%;
}
The bodyLeft division defines the column on the left. As you've probably guessed, the bodyRight division defines the column on the right that will be used for content. The division labelled topBanner defines the space at the top of the Web page for the page's title or for some kind of graphic or ad.
But what about the hash signs (#) before the names of the divisions? The hash signs are CSS selectors, which tell a browser to apply the style to a specific HTML tag, in this case.
The width properties specify how wide you want each column to be. I chose the specific widths because having a menu take up half of a page makes no sense. You can fiddle with the column widths to suit your own purposes.
The position: absolute property simply sets the left column in conjunction with the right column. The left and right columns are fixed. If the left column is a menu and you want it to scroll downward with right column, you can change the position: absolute property to position: fixed.
Note that sometimes, Internet Explorer doesn't play well with the position: absolute property. In fact, using it may cause your columns of text to run together. If you are going to use a CSS layout with Internet Explorer, you should remove the position: absolute property from the stylesheet.
Using the Styles
Using the styles on your site is straightforward. In the header of a new HTML file, add the link to the CSS file, like this:
Then, set up your three divisions in the file by adding the code like this:
<div id="topBanner">Page Title</div>
<div id="bodyLeft">Add menu items here</div>
<div id="bodyRight">Add your content here</div>
Three-Column Layout
A three-column layout is a little trickier because you have to balance content over the three sections of a page (not including the banner at the top, if you include one). However, if properly done and with a bit of artistic flair, a three-column CSS layout can be very attractive.
In this example, our three-column layout uses the two-column layout that we created earlier as its basis. We simply add a third column and balance everything out. The columns on the left and right can be used for navigation, ads, links, an internal search engine, or for that matter anything you want.
To create a three-column Web page, create an empty stylesheet file called threecol.css. Then, add the following code to the file:
As with the two-column layout, the bodyLeft division defines the column on the left. The bodyCenter division defines the column in the middle of the page that will be used for content. The bodyRight division is for the column on the right side of the page. The division labelled topBanner defines the space at the top of the Web page for the page's title or for some kind of graphic or ad.
I specified left and right margins for the bodyCenter division in order to properly center it on the page. Again, I specified the widths of each column to retain a balance on the page. You can experiment with the widths to find ones that suit your particular needs.
You'll notice that the bodyRight and bodyLeft divisions contain the padding-left and padding-right properties. These properties just add a bit of space between the edge of the browser window and the left and right columns. This is more for esthetics than anything else. You can experiment with different amounts of padding or remove these properties.
The bodyRight division also contains the property right: 0%. This property aligns the right column with the right side of the browser window and the top of the other two columns. If you don't include this property, the contents of the right column have been known to appear at the bottom of a page -- exactly where you don't want it to be.
After you have created your style sheet, create a blank HTML file. Link the file threecol.css to the HTML file. Then, set up your four divisions in the HTML file like this:
<div id="topBanner">Page Title</div>
<div id="bodyLeft">Add menu items here</div>
<div id="bodyCenter">Add your content here</div>
<div id="bodyRight">Add your content here</div>
Then, add your text and/or graphics to the file.
Conclusion
If you have a Web page or site that uses tables for layout, you can replace the tables with CSS. It will take a bit of time and work, but the results can be both attractive and standards compliant.