Webmaster tips » CSS


Sasch Mayer

Replace tables with DIVs and CSS

Average rating
  • 3.6 out of 5 Stars
Rate this article

By now, most web designers are aware of the many benefits of using (CSS) to control the formatting and appearance of text elements within their web pages. Indeed, if applied properly, Cascading Style Sheets can substantially cut down the amount of code needed to present a web page in a polished and professional manner.

What few designers realise however, is that CSS is capable of so much more than just handling a page's text formatting. If used to its fullest capability, the Style Sheet is capable of controlling just about every aspect of page layout and presentation, even to the extent of replacing a Hyper-Text document's traditional table-based design structure.

Custom Facebook Graphics

Quite aside from saving the web developer a substantial amount of coding time, this approach also cuts down the amount of code needed to display a web page properly to an absolute minimum. So much so that in the recent redesign of one of our web sites, the use of CSS controlled HTML cut the average document size from 24kb to less than 5kb.

The key to designing CSS controlled web pages, rests in the use of DIV Tags and DIV IDs. For example, a traditional table structure would look something like this:

<table width="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="560" align="left" class="one"><h1>Example Text</h1></td>
<td width="240" align="left" class="two"> <img src="images/exampleimage.jpg" width="200" height="100" alt="Example Image"></td>
</tr>
</table>

With CSS control, exactly the same look and feel can be achieved by the following two DIV Tags:

<div id="content"><h1>Example Text</h1></div>
<div id="image"><img src="images/exampleimage.jpg" width="200" height="100" alt="Example Image"> </div>

The DIV ID passes control of layout and appearance to the CSS, which handles it as follows:

#content {
     position:absolute;
     width: 560px; 
     height: 100px; 
     top: 10px; 
     left: 100px; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 12px; 
     font-weight: normal; 
     color: #000000; 
     background-color: #FFFFFF; 
}

#image {    position:absolute;    width: 240px;    height: 100px;    top: 10px;    left: 660px;    font-family: Arial, Helvetica, sans-serif;    font-size: 12px;    font-weight: normal;    color: #000000;    background-color: #FFFFFF; }

On the face of it, it may seem like this entails some extra work on the designer's part, but don't forget that at the same time as controlling the DIV Tag's position and appearance, the CSS also handles all text formatting, and that the above Style Sheet will only need to be written once in order to control an entire web site.
Then of course there is the fact that the above example is an immensely simple one. Imagine for a moment, the sheer amount of code which is saved by using CSS over the course of writing an in-depth web page.

The end result is an HTML document which has been stripped of all unnecessary code and is consequently extremely 'light-weight' and easily indexed by search engines.

Additionally, it is also possible to radically alter a page's appearance at the click of a button without ever changing any of its HTML code. This approach is very capably demonstrated at the CSS Zen Garden, where more information about the power of CSS controlled web design can be found.

Furthermore, like HTML, CSS is undergoing constant revisions and will doubtlessly grow to play an even more important part in web design during years to come. Therefore, now may be a good time to further acquaint yourself with the full functionality of this essential web design element.

Tags: CSS HTML
About The Author
With well over a decade of industry experience, Sasch Mayer has been writing about the World Wide Web and Internet Marketing for many years. He currently writes under contract to IceGiant Web Services, a company specialising in high-quality Web Design using both the traditional table-based and also the CSS controlled methods. Visit the IceGiant Web Site for more information.
Rate This Article
How would you rate the quality of this content?
Currently rated: 3.6 out of 5 stars. 15 people have rated this article.
  • 3.6 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Related Articles
  • Rating: 2.5 stars
    7 Useful CSS Tools by Marie Coles (Sep 4, 2010)
    CSS or Cascading Style Sheets is still one of the most popular modes of designing a working website, yet, for many designers it can be at times a lengthy and tedious job. Thus, many web designers have took to using CSS tools in order to quicken the process up as well as have more control over design elements...
  • Rating: 3.6 stars
    Using !important CSS Declaration by Brigitte Simard (Jan 15, 2010)
    The !important declaration has been valid since CSS1 but it seems to have acquired a bad reputation over the years. Even if the !important declaration should be used with caution, it's a very useful and powerful expression that much deserves its place in our CSS world...
  • Rating: 2.6 stars
    Styling Forms with CSS by WebAssist (Nov 2, 2009)
    In many ways, forms are the real workhorses of the Web, but that doesn't mean they have to be plain. Until CSS use became prevalent, little could be done to alter the way forms and form elements looked on the Web...
  • Rating: 3.6 stars
    I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp...
  • Rating: 5 stars
    9 Advantages of using CSS by Grace Alexa (Apr 11, 2008)
    CSS style sheets have made it easier to handle web pages during web development. CSS or Cascading Style Sheets as the name suggests is a style sheet that allows you to easily link to other documents in your website...
Unique content creation services