Weighing Tables and CSS

Article ID: KB101841

Last month, we moved past the CSS knowledge Level 1 mile marker by learning some CSS basics that apply to streamlining tables-based sites as well. This month, we'll tackle Level 2 head-on. As a quick refresher, people in Level 2 are "tables-layout gurus" who may have tried CSS layout, got frustrated, and gave up. The best way to move forward is to start by being open to taking a serious look at tables vs. CSS. You'll be much more willing to learn CSS after seeing how they stack up against each other.

In the rest of this article, I'll compare two web pages -- one built using tables, font tags, and spacer gifs and the other using CSS and background images. We'll put them both on the scale and see how they weigh.

I started with the Intensive Wedding HTML template, which was designed using CSS for the layout and design.

Then, I spent a good hour and a half reslicing the images and building a table structure. The screenshot below (click for a larger version) shows my nested table structure. I have five levels of nested tables.

Now I'm ready to weigh both options!

Looking at file size alone:

• The tables page is 8.46K.
• The CSS page is 3.07K, with the stylesheet itself at 4.36K.

Initially this doesn't seem like much of a difference. However, since the layout/design code (code for spacer gifs, font tags, etc.) is in each and every tables page, the user is having to download all that information for each and every page. The stylesheet, once loaded, automatically applies to every page that is viewed and does not need to be reloaded. Here's how it breaks down:

• Tables site - viewing four different pages (if all the same size):
  9K + 9K + 9K + 9K = 36K
• CSS site - viewing four different pages:
  3K + 4K (stylesheet) + 3K + 3K + 3K = 16K

CSS is the obvious winner for saving you bandwidth.

Now let's look at the graphic files. The diagram below shows just one example of how CSS can make working with graphics easier. With tables, the footer graphic had to be split into three separate graphics to fit the table structure. With CSS, only one graphic is needed. In my entire web site, I needed 8 additional graphics for creating the table layout's various background images and slices. Again, CSS results in a slimmer solution.

Figure 1. CSS results in less graphics.

Let's look in-depth at the navigation buttons. The HTML code for the CSS version is simple, clean, and semantic to boot, taking up only six lines of code. The button graphic, text placement, width, height, etc., are all controlled through the separate stylesheet.

<ul class="submenu">
<li><a href="index.htm">Home</a></li>
<li><a href="gettingstarted.htm">Getting Started</a></li>
<li><a href="template2col.htm">2 Column Template</a></li>
<li><a href="template3col.htm">3 Column Template</a></li>
</ul>

The HTML code for the tables version is a mess, to say the least. I will spare you the full 45 lines of code, but here's a small section:

<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2">
<tr>
<td><img style="display: block;" src="images/vertical1.gif" width="21" height="26"></td>
<td width="100%" background="images/vertical2.gif">
<font face="Verdana" size="2">
<a href="index.htm">
<font color="#FFFFFF">Home</font></a></font></td>
</tr>
<tr>
<td><img style="display: block;" src="images/spacer.gif" width="1" height="7"></td>
<td><img style="display: block;" src="images/spacer.gif" width="1" height="7"></td>
</tr>
...

Even with all that code, the functionality of the CSS menu is far superior to the tables menu. Without CSS, you can't remove the underline from the table link (short of actually creating individual button graphics for each link), nor can the button change on-hover (without adding Javascript functionality). The CSS menu looks clean, crisp, and easily allows for a link rollover effect.

Figure 2. CSS gives better control over links, with much less code!

Here's a summary of how tables matched up with CSS:

Using CSS for design and layout...

• results in lighter, cleaner code
• allows for semantic, standards-based markup
• saves on bandwidth with smaller file sizes
• makes graphics less complex

What I'm NOT saying, however, is that CSS is "easier" than tables. As with any new skill, it will take some focused effort to learn the rules of CSS, just as it took some time to get used to building complex table structures. Once you get used to it, however, CSS will seem so natural that you'll find it hard to go back to tables!

In next month's newsletter, I'll get you jump-started with CSS-based layout.

---

Was this helpful?

Please rate this article:

Not helpful			Very helpful
1	2	3	4	5	6	7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)

Comments: (How can we improve this article?)


Clicking "Submit" will not clear this page.

---

link to this page: http://www.pixelmill.com/support/al0/kb101841.htm
permalink to this article: http://www.pixelmill.com/support/kb101841.htm

Back to top