WWW FAQs: Should I use tables or CSS for page layout?


2005-09-21: Tables were originally intended for exactly that -- tabular data, things that resemble spreadsheets -- not for page layout. But back in the days of Netscape 4.x and Internet Explorer 4.x, tables were the only practical way to lay out a web page attractively. While Netscape 4.x and Internet Explorer 4.x had some support for CSS, it was limited, buggy and inconsistent. Because of these limitations, designers chose to use CSS to control fonts, link underlining and other details, but avoided using CSS to lay out the page.

That was then. Today, less than 1% of users are stuck with Netscape 4.x, and barely 1% use Internet Explorer 5.x or older. The overwhelming majority have Internet Explorer 6.x, Firefox, or another modern web browser.

Using CSS instead of tables offers many advantages. Most importantly, CSS allows you to separate all of your layout into a single site-wide .css file, if desired, leaving only the actual content in your HTML files. That keeps your HTML simple... which makes it easy for Google and other search engines to index correctly. It also makes your site highly accessible to visually impaired users. Finally, CSS saves bandwidth and speeds up your site, because the .css file for the site only has to be downloaded once. Compare that with hundreds of pages full of ugly table code.

The main drawback of CSS is that, even today, you'll still need to test your page carefully in both Firefox and Internet Explorer and make adjustments until both browsers work smoothly. That has always been the case, but table-based page designs do produce more consistent results between browsers.

For detailed examples and a thoughtful discussion, see Sergio Villarreal's article Tables Vs. CSS - A Fight to the Death at www.sitepoint.com.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!