Spans are Evil

Are you still using tables for page layout? If you use an authoring tool like Adobe (formerly Macromedia) Dreamweaver, a very good tool by the way, you can easily fall into a trap. Dreamweaver makes it very easy to lay out a page using a feature called "layout view". When you use layout view, you simply use the mouse to "draw" tables on the page. It allows a huge amount of flexibility in designing your page and allows you to place elements wherever you want them.

So what's wrong with that? The problem is in the code written by Dreamweaver to accomplish that task. Dreamweaver's layout view makes abundant use of COLSPAN and ROWSPAN attributes to split and merge table cells to format the page exactly the way you have drawn it. However, when you begin adding content to the page, you may find that your carefully crafted layout begins to explode. Of course, the same problem can occur even in "standard view". If you use the "merge cells" or "split cell" feature, the same problem can occur.

To help you visualize what happens, consider the following two column, two row tables. For purposes of this demonstration, make sure that your browser's text size is set to normal.

Table One

This is a simple two column, two row table. An image is inserted in each of the two cells in the left column. The two images merge seamlessly, except for the border that is included just to illustrate what happens.

Example Image Row 1 Column 2
Example Image Row 2 Column 2

Table Two

This table is exactly like the one above, except the two cells in the right column have been merged. Merging these cells uses a ROWSPAN attribute. Notice that the images in the two cells of the left column still merge seamlessly, except for the border.

Example Image The two cells in right column have been merged.
Example Image

Table Three

Now, we begin adding more content to the merged cells in the right column. As it grows in height, it forces the two cells in the left column to grow in height as well. That causes the two images to pull apart.

Example Image This table is defined in exactly the same method as the table above. The problem is that, as you add content to the merged cells, it grows in height, forcing the cells in the left column to grow because the sum of the heights of the cells in the left column will always be the same as the height of the right cell.
Example Image

If you have your browser text size (or zoom) set to normal 100% size, the second table will show the two images butted together. Now set your browser's text size to a larger size. In all browsers except Opera, you'll see the second table beginning to pull the images apart as well, so even if you lay out your table using the exact content that will be used, you cannot depend on it holding the layout you wanted. The only reason this doesn't happen in Opera is that it also zooms the images as well as the text.


Fixing it

So, how do you prevent your tables from exploding like this? Simple, you use a table with two columns and one row. Then, you "nest" another table inside the left column. It might look something like this:

Example Image
Example Image
This example uses a two cell outer table, with a nested table in the left cell. Notice how the two images on the left now butt right up next to each other. It makes no difference how much content you add to the right column. The left cells will continue to join smoothly.

This is just the tip of the iceberg when it comes to learning how to use tables effectively. There are two excellent tutorials that can teach you a lot more about the proper way of using tables for layout.

If you learn to use tables properly, you can get your page under control and not be a victim of exploding tables syndrome.