Webmaster tips » CSS

Aug 6, 2007
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.

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.

Print! Print this article   Bookmark:

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.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 3.6 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other CSS Articles
Rating: 5 stars
How to set up a print stylesheet by Trenton Moss (Jun 21, 2007)
A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper...
Rating: 3.8 stars
Understanding CSS by Arun Pal Singh (Apr 19, 2007)
In the good old days of the web tables were an essential requirement for creating a webpage. The first thing in laying out a webpage was to create a table. Table was then further divided into cells. Using different combinations of border and shading a number of effects could be created...
Rating: 4 stars
Cascading Style Sheet Basics by Larry Lang (Jan 24, 2007)
There are only three parts to Cascading Style Sheets (CSS), and once we understand what they are and how to use them, CSS becomes very easy and exciting to use. One of the best parts of CSS is that you can create an external Cascade Style Sheet which you can use for all web pages on your website...
Rating: 3 stars
Preparing your CSS for Internet Explorer 7 by Trenton Moss (Sep 7, 2006)
Later on this year Microsoft will officially release Internet Explorer 7. If you can't wait until then, you can download a beta version and see how it works. Microsoft has hinted that IE7 is officially released they'll be looking to quickly upgrade users from IE6, so it's essential that your website is prepared for this new browser...
Rating: 5 stars
Ten more CSS tricks you may not know by Trenton Moss (Jun 19, 2006)
Block vs. inline level elements Another box model hack alternative Minimum width for a page IE and width & height issues Text-transform command Disappearing text or images in IE? Invisible text...