Table layouts compared with CSS layouts

Posted in CSS Web standards on 15 April 2009

There’s a good article over at Smashing Magazine called Table Layouts vs. Div Layouts: From Hell to… Hell? which discusses the pros and cons of different website layout methods. The article compares CSS layouts using <div> tags with ‘old school’ table layouts. All the relevant points are covered and the article also explores the possibility of using CSS properties like display:table and display:table-cell [now that Internet Explorer 8 supports this].

I used to be a bit sceptical about CSS layouts a few years ago but after trying out some reasonably easy-to-understand examples, I switched from using tables for layout to CSS methods. If there is one thing that solidified that move, it is when I get asked to maintain a tables-based layout that I have not created myself. It can be a nightmare! An example I saw recently used many nested tables and, as a result, simply changing the width of a table column involved digging into the page code to understand the table layout and then changing the widths of all relevant cells in all pages. Compare this with a simple style sheet change which would take a minute at most. There’s no comparison!

Suggested Reading: If you are new to CSS layouts and the use of web standards for building web pages, HTML and CSS Web Standards Solutions is an excellent book. It starts from the beginning. Always useful I find! I am reading it now and hope to review it here in the next couple of weeks.

Related Posts

• Responsive web design is easy with fluid layouts
• Checking out responsive grid systems
• Quick tip: Making jQuery tabbed content available for users without JavaScript
• Just a few things I've seen recently
• Transparent borders with CSS3
• CSS Tip: Using max-width for flexible images