Designing Web Pages: Tables or CSS

There is some debate recently about the best method to design and layout a Web page. Traditionally, HMTL tables have been used to handle the layout of a Web page. Today, however, a new layout method is gaining more popularity which uses CSS (Cascading Stylesheets).

Which method is the best way of designing a Web page? I will explain both methods in this post and provide my own opinion. This post, however, won’t explain how to create the HTML files as I’ll save that for a future post.

Using HTML Tables

If you view the source of many Web pages on the Internet, you will probably see the entire layout of the page constructed using tables. Tables have been the main method of providing the layout of a Web page since they were first introduced. They make it easy to provide a header, footer, and content sections to a page.

Recently, however, many Web designers have been declaring that tables should only be used to display tabular data. This makes sense as many applications, such as Excel and database GUIs have a structured table look. The Web designers also state that the look and feel of a Web page should be separated from the HTML Web page.

The advantage to using tables is that they are easy to use. You define a table (<tabl>), then a row (<tr>) and finally a cell (<td>). You can span rows across columns and columns across rows to make cells larger. Formatting a table can be accomplished in the HTML code itself, or a CSS file.

Another advantage to tables is that all browsers in use today support tables. This means that a visitor won’t get a mangled Web page when it is viewed in their browser.

A disadvantage of using tables is they need to download the entire HTML first before they are rendered. This is because the browser can’t be sure how the table will look until the entire HTML can be rendered. As more people switch to broadband Internet, this will probably be a moot point.

I have designed many Web pages using tables, and have had no problems. I have, however, started to design Web pages using the new method: straight CSS with no tables.

Using CSS

The second method of laying out a Web page is using pure CSS and not tables. This method has been gaining popularity, especially among the processional Web designers.

So how exactly is CSS used to layout a Web page? The answer: through the use of division tags (<div>). These tags are used to divide your Web page into various sections. One large section will contain all the sub-sections, which is usually called the container. Within the container you may have header, footer, navigation and content sections. The look and positioning of these sections is defined by the CSS.

The CSS as I mentioned earlier is an acronym for Cascading Stylesheets. These are text files placed on a Web server that are downloaded along with the HTML file. A CSS file contains definitions, known as styles, which provide the look and feel of your Web site. The best part about using CSS files is that you only need to change one file when you want to change the look of your entire site. For those that manage thousands of Web pages, this can be a huge time saver.

One disadvantage to using CSS to layout your Web pages is that not all Web browsers support all the CSS style tags. Your Web pages may not display nicely to visitors on older Web browser. With each new version of a browser, this becomes more of a moot point.

I currently use the CSS method for Technically Easy, which is also my first site designed in this manner.

The Verdict

I usually call the last section in my posts "Summary" but this time I think I’ll provide my verdict, or opinion. I have used both methods to design Web pages, and have seen the advantages and disadvantages to both.

I decided to go with CSS for my new sites since that looks like the future of Web pages. I have accepted the risk that for many visitors on older browsers, the Web pages may not display correctly. I have also examined my Web site statistics and realized that for the most part my visitors are using newer browsers. I have tested my CSS site on IE 6.0+, Firefox 2.0+ and Opera 9.0+, and haven’t had any problems.

If you are a beginner to Web page designing, I suggest you use tables since they are easier to work with. Once you become familiar with HTML and CSS, you can then try using CSS for the layout, if you choose. I do recommend, however, that you learn CSS quickly and apply that to your Web pages as it can make changing the look of your entire site easier.

In the end, I don’t think it really matters which method you choose, as no one cares what your Web page source looks like. All that matters is that you Web pages display correctly.

Follow Me