Table-Based Designs Vs. CSS Designs

The first Web pages on the Internet contained little more than text and hyperlinks. As the Internet's popularity grew, however, Web design outgrew the current HTML standards and the capabilities of available browsers. Designers needed a way to create complicated Web designs that Internet Explorer and Netscape browsers would display the same way. Out of this need came table-based design, in which designers used HTML table tags -- meant for displaying tabular data -- to create the structure for a site's design. Since around 2002, however, Web professionals began considering table-based layouts as a poor coding technique.

Background

Early in 2001, the influential online publication A List Apart published an article titled "From Table Hacks to CSS Layout," which sparked a heated debate among Web designers. Many designers and programmers were reluctant to stop using tried-and-true table-based designs. In 2001, browser support for CSS (Cascading Style Sheets) was limited. Internet Explorer 6 was released the same year and had the best CSS support for its time, but that support included many bugs. The most infamous IE6 bugs -- the "box model bug" and "double margin bug" -- wreaked havoc on otherwise well-coded CSS-based layouts. For these reasons, it took a few years for designers to drop table-based coding for CSS-based coding.

How Table Layouts Work

Table layouts use HTML table tags to create a structure for the site's graphics and contents. The classic example is of a three-column layout with a heading and footer. In a table-based layout, designers use HTML tags to create a table with a two-column-wide cell on the top and bottom rows. The table's middle row contains three cells, and each cell is a column for the site. Attributes that are no longer used in HTML 4 and up allowed programmers to control spacing, padding, width and height of table cells.

How CSS Layouts Work

Layouts controlled by CSS properly separate content from presentation. This means that the HTML file contains the content -- text, images, etc. -- while the CSS defines where that content appears on the page. Designers can link one CSS file to every page in the site and, as a result, be able to change the whole site's design by changing that one CSS file. The standard CSS replacement for table tags in HTML 4 and XHTML is the

tag, although HTML 5 introduces new

and

tags that carry more meaning in their names than

. The CSS file uses the class or ID attribute to target specific

tags.

Why Table Layouts Are Bad

Table-based layouts require changes to every page in the site whenever the design is changed. Even if a table-based layout uses some CSS for style, to change the layout structure, changes to every page are required. When updating a table-based layout, finding the content to edit is more difficult in the maze-like code of tables nested inside tables. Web designers might charge extra for the time it takes to edit table-based layouts, or they will suggest scrapping the current site altogether. Another result of table-based layouts is bloated code. Large websites with heavy traffic cannot afford bloated code because of bandwidth costs.