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 <div> tag, although HTML 5 introduces new <section> and <aside> tags that carry more meaning in their names than <div>. The CSS file uses the class or ID attribute to target specific <div> 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.