NESTED TABLE CONSTRUCTION.

First off: if some die hard geeks are making your life miserable because they're arguing that "divs and CSS" is the only - and right - way to go, just ignore them, because they don't know better.

The idea is to use whichever method that fits the particular project, the design and your own skills. It's not to be "cool" and trying to belong to some "inner circle" of designers. If you're about to throw out the computer because divs and CSS won't play, show some integrity and try tables (of course styled by CSS like the rest of your page/site) or a combination of tables, divs and CSS.

If the geeks still will come after you with arguments like "tables are made for tabular data" and similar, point them here. Tables WERE actually made for design purpose.

This isn't a tutorial (sounds pretentious), but rather a demonstration of the dangerous colspan and rowspan tags, which is what e.g. Fireworks, Dreamweaver's Layout mode and the badly informed designer usually generates. Hopefully, it'll help you to understand that an image editor should be used as such, not as an html editor, and how to plan and implement a table that'll work regardless of the user's settings, in particular his preferred font size.

We have made two tables that looks the same. But when you increase your browser's font size, you will see how one of them breaks apart completely, while the other will stay intact.

THE DISASTROUS TABLE...

To see the first table, click here and it will open in a new window. Don't forget to increase you font size to watch the disaster.

(NB: Since we have done this by hand, some might think that we have deliberately created this table as bad as possible to make our point. It's actually the other way around: People with this kind of problem have usually made tables that are far more messed up. When we tried to make it resemble any of these chaotic tables, we ran into so much problems that we finally gave up and made it less messy. )

THE GOOD, SOLID TABLE...

The second table is here. click here to see and do as with the previous: increase the font size.

AND HERE IS HOW THEY WERE BUILT:

THE FRAIL TABLE

The "unruly" table has been done in "one piece". To accommodate the various slices, it has been split into rowspan and colspan tags. The little image below shows how the table structure looks. There are actually seven cells for the menu with "button backgrounds". We made it less in this sketch just to make it easier to see. We have also placed a "ghost" image of the page for the same reason:

When "text 1" grows, it will eventually push the bottom of the cell downwards (quite obvious). That bottom is "connected" to one of the cell bottoms in the menu, and will force that one downwards too. The menu will therefore break apart. That's illustrated by the green line.

When "text 2" and "text 3" are increased, the bottoms of these cells will be pushed down (the orange line), and both the outer columns will break apart from the bottom cell and it's slice.

THE SOLID TABLE

The second table is a nested table. Before we made it, we took pen and a paper and made a few sketches until we had a construction that we knew would be able to accommodate all the elements without breaking apart. The steps we took are described below. As with the other table, we have inserted the finished page as a "ghost" image since we think it's easier to see what we have done:

First table (the "parent" table) set to 600 pixels width, one column and three rows. Zero cell padding and zero cell space. Habitually, we placed the cursor in each cell, clicked and selected vertical alignment to "top" in the Property Inspector. No width or height parameters in the cells. They will eventually collapse nicely around the images.

Second table (= first "child" table) inserted in the middle cell of the parent table. Three columns, one row, zero cellpadding, zero cellspace. Vertical alignment "top" in each cell. To make sure that the center cell will expand to full width, we gave that a width of 100%, no height. The other two cells need no width/height parameters at all.

Third table, placed in the center cell of the above table. One column, two rows, zero padding, zero cellspace, vertical align "top", as before. Width 100%, height nothing.

Fourth table. Two columns, one row, and the rest as previous, i.e. vertical align top. Width 100%, height nothing.

Fifth and final table in place, the menu table. Since the sliced images will fill the cells, it requires no height or width.

Hope the above will point you in the right direction. If you like to download these pages and check in e.g. Dreamweaver, click here and you'll get a zipped file with the lot.

A FEW WORDS ON THE WAY:

1. Don't ever work in Dreamweaver's Layout mode. It's a runaway mode that will produce code that will very likely cause huge problems sooner or later. Use Code and Design (Standard) views. (Exception: if you're a weathered code wizard, you can of course make required modifications afterwards)

2. Don't use Fireworks or any other image editor create code for you. If you decide to use Fireworks, ImageReady or any other image editor to create sliced images, fine. But create the table yourself, applying the principle of nested tables shown above. The reason and exception are the same as in previous paragraph.

3. When creating tables, make sure the various widths/heights adds up at the end. Avoid mixing percentage and pixel widths/heights if you can.

4. In many cases (perhaps most?), you don't need to add any height/width of cells/tables. They will collapse nicely around their content. See examples in the lower table above.

5. Never resize tables/cells in Design (Standard) mode by grabbing and dragging them and then believing that everything is OK. When a table/cell requires height and/or width parameter(s), you must specify these by hand in the property inspector or in code view.

6. Take a close look at Murray Summer's table tutorial.

7. This hasn't anything to do with tables per se, but it's so common that people forget this that we just have to remind you anyway: Make sure you have the correct doctype (DTD) above all code in your page! Here are a couple of sites with more info: http://www.alistapart.com/stories/doctype/ http://www.hut.fi/u/hsivonen/doctype.html

Good luck!

PS. To make the outer two columns look as if they "stretch" vertically, we copied the lowermost horizontal pixelrow of the two gradient images, made separate jpeg's of them and placed them as backgrounds in respective cell, i.e. the outer two cells in the second (blue) table above.

Back to top