Dan Winter Web Services

Web Site Design, Consulting, and Coaching

Chapter Eight. Table versus CSS layout

Posted by wd4business on October 27, 2008

A few years back, most web site layout was done using table cells to position text and images on the page. Using CSS positioning gained popularity as browsers improved and did a much better and consistent job of formatting CSS instructions. Now many experienced web site developers only use CSS layout. They believe that it is totally wrong to use tables for layout — you must always separate web page content (HTML code) from web page layout (using CSS positioning instructions). There are advantages to using CSS for layout, the HTML code is cleaner and much easier to read because you do not have all the table code in the way. It is easier to make global layout changes to the web site, and so on. There also disadvantages. CSS positioning is not always easy to understand, it might work a little differently across browsers, and it does take a little more tweaking. When using tables, the browser can do some of the tweaking for you. 
 
So what should Ken do? He gives Dan a call. Dan explains that:
  • Ken can still use tables for layout if he wants to. As a matter of fact, for a nice, simple web site like Ken wants for his small business, using table to define the web page layout can work out very well. His pages are not that complicated and he can break the page down into manageable parts. Then, rather than trying to make the page one big table (which is very hard to manage), he can use a separate table to format or manage each of these parts.   
  • Just because he can use tables to define the layout of the page doesn’t mean that he doesn’t need to use CSS. He should use CSS definitions to define fonts, colors, backgrounds, margins and so on. There are times when he will want to make global changes to the web site and it is much easier to make those changes in one place. 
  • The end user doesn’t care if the site layout is done using tables or CSS. The most important thing to the user is that the web site provides what they are looking for.
 
Ken decides to go with table layout for his web site. We will see how he breaks the page down into manageable chunks in a later chapter.     
 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>