The Trouble with Tables

I really thought I knew html. Recently, I tried to build what I thought was only a modestly complex table, and I found out that everything I know is wrong.

The problem shouldn't be too hard:

I've got a list of items and sub-items. It's the kind of thing you'd use nested <ul> lists for, except for this catch: these items and sub-items need edit boxes associated with them. I want the edit boxes to line up nicely to the right of the items, indented in a similar fashion. That is, I want the edit boxes for the main items to all line up, and the edit boxes for the sub-items to be indented from the main item boxes by the same amount that the sub-items are indented from the main items.

(I wanted to draw a picture of this, but I totally don't know any graphics tools. Sorry, I hope my description is adequate.)

Ok, it's table time!!!

Here's how I figure it: For a row with a main-level item on it, we start with a <td colspan="2">. That's because the sub-item needs one column for indentation, but can't be indented over as far as the width of the longest main item. This is followed by a fixed-width spacer cell (<td width="50"></td>), then a cell spanning the rest of the table to hold the edit box. That turns out to be colspan="3", as we'll see when we consider a sub-item row.

The sub-item row starts with a width="50" spacer cell for indentation, then has the cell containing the sub-item name. How wide? Well, some sub-item names are really long and we don't want the edit boxes for the main items have to be to the right of the longest sub-item name. A colspan of 1 would line up with the end of the main item name, and a colspan of 2 would line up with the end of the spacer after that name, so we need to use colspan="3". Following this is a width="50" spacer, and then the final cell containing the sub-item edit box.

A little complex maybe, but it just takes a little logic to get it worked out.

Here's the html for my test table:

<table border="2"><tbody>

<tr><td colspan="2" >main item one</td><td width="50"></td>
<td colspan="3" >main item one edit control</td></tr>

<tr><td colspan="2" >main item two</td><td colspan="4"></td></tr>

<tr><td width="50"></td><td colspan="3" >subitem one</td>
<td width="50"></td><td >subitem one edit control</td></tr>

<tr><td width="50"></td><td colspan="3" >subitem two (with a long name)</td>
<td width="50"></td><td >subitem two edit control</td></tr>

<tr><td colspan="2" >main item three</td><td width="50"></td>
<td colspan="3" >main item three edit control</td></tr>
</tbody></table>

I should note that all my html pages start with a DOCTYPE declaration like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
That's important because it tells Mozilla to do its best job of following the W3C standards, instead of falling back to "quirks mode", which tries to reproduce all the bugs of Netscape Navigator 4.x that web designers had come to rely on. I've read it has a similar effect on IE6.

This table wasn't too hard to figure out: now we just need to check in our target browsers and make sure it looks right. Here we go.