Do we need tables?

This article was first published on tjkdesign.com (01-27-2002).

Make sure to read about doctype issues.

Many beginning web designers fail to properly understand inline elements [that's what images are], so when it comes to assembling a sliced image using HTML, they mostly rely on their favorite tool: "da table!"

To make things worse, some use image editing programs such as Fireworks™, Image Ready, or any other Graphics editing program that also writes HTML, to get the job done. Fireworks™ is a great graphic tool, but using its default settings, it does a very poor job when it comes to writing the HTML code to build a table to hold the sliced images.

Consider the following original image:

Slice this image along the thin black lines to make the top [cow] a single image and the bottom into four buttons. By default, the Fireworks export command/feature produces the following table with five images, which looks identical to the original:

The rendering of that image is pure FireWorks'™. The good news is that it looks identical to the original. The bad news is the code it writes to accomplish that. Here is what the code looks like:

<table border="0" cellpadding="0" cellspacing="0" width="300">
<!-- fwtable fwsrc="Untitled" fwbase="image.jpg" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
    <tbody>
        <tr>
            <td><img src="/img/spacer.gif" width="64" height="1" alt=""></td>
            <td><img src="/img/spacer.gif" width="77" height="1" alt=""></td>
            <td><img src="/img/spacer.gif" width="75" height="1" alt=""></td>
            <td><img src="/img/spacer.gif" width="84" height="1" alt=""></td>
            <td><img src="/img/spacer.gif" width="1" height="1" alt=""></td>
        </tr>
        <tr>
            <td colspan="4"><img id="image_r1_c1" src="slices/image_r1_c1.jpg" width="300" height="160" alt=""></td>
            <td><img src="/img/spacer.gif" width="1" height="160" alt=""></td>
        </tr>
        <tr>
            <td><img id="image_r2_c1" src="slices/image_r2_c1.jpg" width="64" height="26" alt=""></td>
            <td><img id="image_r2_c2" src="slices/image_r2_c2.jpg" width="77" height="26" alt=""></td>
            <td><img id="image_r2_c3" src="slices/image_r2_c3.jpg" width="75" height="26" alt=""></td>
            <td><img id="image_r2_c4" src="slices/image_r2_c4.jpg" width="84" height="26" alt=""></td>
            <td><img src="/img/spacer.gif" width="1" height="26" alt=""></td>
        </tr>
    </tbody>
</table>

It is important to notice that Fireworks™ has thrown a few "extra" columns along with spacer.gif images in there. Why? I don't know...

This doesn't make any sense to me because Fireworks™ has an option called "Space with" [File > Export > Options > Table Tab > Space with:] that gives 3 choices:

Believe it or not, out of these 3 choices, it is the option by default that creates "spaghetti" code. The first two choices actually do a decent job, although finding the options can be a bit of a challenge if you don't know where to look. Even then, the result can include several redundant, unnecessary, and/or invalid table/cell dimensions or spans depending on the complexity of your particular design.

So let's clean up the mess. What about starting with nothing but the sliced images? Something like this:

<img src="slices/image_r1_c1.jpg" width="300" height="160" /><img src="slices/image_r2_c1.jpg" width="64" height="26" /><img src="slices/image_r2_c2.jpg" width="77" height="26" /><img src="slices/image_r2_c3.jpg" width="75" height="26" /><img src="slices/image_r2_c4.jpg" width="84" height="26" /><br />

This minimal code produces this:

Now try to resize your browser's window to see how these slices behave when they don't have enough room to line up next to each other.

Did you try? Interesting, isn't it?

We sure got rid of all the table elements at once, but we still need to give some sense to the images' layout. So be prepared for a moment of pure beauty.

Are you ready?

Here it comes:

<img src="slices/image_r1_c1.jpg" width="300" height="160" /><span class="highlighter"><br /></span><br><img src="slices/image_r2_c1.jpg" width="64" height="26" /><br><img src="slices/image_r2_c2.jpg" width="77" height="26" /><br><img src="slices/image_r2_c3.jpg" width="75" height="26" /><br><img src="slices/image_r2_c4.jpg" width="84" height="26" /><br />

This is it:


What? A simple <br /> tag? You're kidding me! But... Wait a minute, the images at the bottom don't even touch each other! This is ridiculous! I want my table back, with all my "spacers" too.

My fault! That's because I wrote these lines of code in a way that would be easier for you to read, but if I'd just used the exact same code without leaving any space between tags, like this:

<img src="slices/image_r1_c1.jpg" width="300" height="160" /><span class="highlighter"><br /></span><img src="slices/image_r2_c1.jpg" width="64" height="26" /><img src="slices/image_r2_c2.jpg" width="77" height="26" /><img src="slices/image_r2_c3.jpg" width="75" height="26" /><img src="slices/image_r2_c4.jpg" width="84" height="26" /><br />

We'd get this:


Instead of using a <br /> tag to break the flow, it is possible - in this case - to apply the following style to the 1st image:

style="display: block;"

We end up with the exact same result as the one produced by Fireworks' code even though we removed all the following code:

<table border="0" cellpadding="0" cellspacing="0" width="300">
<!-- fwtable fwsrc="Untitled" fwbase="image.jpg" fwstyle="Dreamweaver" fwdocid= "742308039" fwnested="0" -->
    <tr>
        <td><img src="spacer.gif" width="64" height="1" border="0" alt=""></td>
        <td><img src="spacer.gif" width="77" height="1" border="0" alt=""></td>
        <td><img src="spacer.gif" width="75" height="1" border="0" alt=""></td>
        <td><img src="spacer.gif" width="84" height="1" border="0" alt=""></td>
        <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
        <td colspan="4"></td>
        <td><img src="spacer.gif" width="1" height="160" border="0" alt=""></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><img src="spacer.gif" width="1" height="26" border="0" alt=""></td>
    </tr>
</table>

All of this has been replaced with a single <br /> tag (note that using "display:block" is even a better solution because it is not structural).
Just think about it...

If for any reason you still want to put this set of images inside a table, make sure they all fit into one single cell. You may also want to set a column width attribute to replace the <br /> tag we used to break the natural flow. I'm using this technique myself in the documents inside this frameset [read about Doctype issues below].

I hope this article helped you to better understand what inline elements are and how they behave. You can learn more at the W3 website.

Doctype issues

Depending on the browser and the DOCTYPE used for a given document, one can experience horizontal white lines [gaps] under images.

The Doctype declaration for all the documents inside this site is as follow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This frameset can also help you to compare how your browser renders both documents.

Depending on your browser, you should be able to notice the Mysterious Gap described by Eric Meyer in this article.