Explore the merits of using HTML tables and CSS

by Tony Patton | Sep 01, 2006 4:31:00 PM

Tags: Web browsers, Tony Patton, HTML, HTML TABLE, CSS, Web, Web Development Zone Newsletter

Takeaway: There are two main approaches to Web application layout: HTML tables and CSS. Layout with HTML tables is tested and proven, while CSS is relatively new. Learn more about each approach's set of pros and cons.

Last week's column on frames led me to consider the current state of Web design. Web standards have received a lot of publicity lately. The merits of Web development applications such as CSS and XHTML are lauded as the way to go, but there is still a large community of developers relying upon proven layout with HTML tables. Let's consider the merits of the HTML tables and the CSS approach.

The good old days

When I first began Web development, I was amazed at the power and flexibility offered by HTML tables. They could be nested infinitely to produce the desired results, and problems with empty table cells not correctly appearing in the browser were easily fixed with clear gif images. But presentation is not the intent of those behind HTML and its tables.

HTML tables were designed to present tabular data. Yes, it is that simple. So, if you want to present Excel-like data, a table is the answer. While it serves this purpose without problems, early Web designers quickly discovered tables provide a great way to control page layout and presentation.

It is easy to split a page design into table cells, but it can be a bit tricky to code such layouts by hand. In addition, the myriad of nested tables in a Web page design can be a nightmare to wade through when changing it, but visual design tools like FrontPage can help. A good way to showcase table-based layout is with an example.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

The example in Listing A creates a Web page with a header, footer, simple menu, and a content area. One table encloses the full page with nested tables for individual areas of the page: header, footer, menu, and content. The background color of each area of the page is set differently for the purpose of demonstration.

The table design produces the desired results, but the resulting HTML page source can be a bit confusing. One positive aspect of using tables is the results are consistent across the broad range of browsers, including older browsers like Internet Explorer 5.0. This isn't always the case with CSS-based designs, but CSS offers other advantages.

The new kid on the block

The Web standards push began a couple years ago as CSS began to take shape. It builds on the fact that HTML was designed for dealing with a Web page's content; that is, it was not designed for dealing with data presentation. CSS follows this design principle by allowing you to easily separate design (HTML) from presentation (CSS).

At first, CSS was used to manipulate text presentation like color and font, but it gradually grew to support all aspects of presentation. In addition to simplifying the presentation of text and colors, CSS provides layout features as well. One problem with CSS-based layout has been browser support. Browser support has slowly arrived on the scene, but older browsers will never support it. In the case of limited support, there are a variety of workarounds or hacks.

Let's take the HTML example developed with CSS as opposed to HTML tables. The HTML source in Listing B offers the same presentation using DIV tags to define the major areas of the page (header, menu, content, and footer). In addition, the menu area uses an unordered list. The CSS is included in the HTML head section. It specifies presentation rules for the different DIV tags. This includes colors and margins.

The net result of the CSS layout is a design that is easier to maintain since the content is controlled with the HTML (and it's much easier to read HTML without tables), and presentation is easily maintained with the CSS. Since CSS support has some variance from browser to browser, you must test diligently and employ the many CSS hacks available to accommodate known browser differences. These hacks (as well as working with older browsers) are beyond the scope of this article.

Alternative designs

HTML tables and CSS are not the only way to lay out Web sites; for instance, you may use Macromedia Flash to provide a dynamic interface. However, you should always provide an alternative route (HTML/CSS) for those users without Flash support in their browser or those who do not care for Flash interfaces.

Is a hybrid approach the way to go?

I've worked on many projects recently where a hybrid design featuring both HTML tables and CSS are employed. This makes it easy to accommodate the numerous browsers in use in today's Web. I did work on one particular project where a pure CSS design was employed, but it was an intranet-based application where the browser client was controlled, making it much easier to design.

At this stage in the Web, I prefer the hybrid design, where CSS can be employed to control most of the presentation aspects of a page (fonts, sizes, colors, etc), while tables can assist with layout�especially CSS layout features not broadly supported.

What is your approach to Web page layout? Do you have a preference between CSS and HTML tables? Please share your thoughts in the article discussion.