I have a data entry web application that is formatted heavily
with tables. Having learned a bit of CSS, I'm hoping to rewrite
this using <div> tags. But I have run into a formatting problem
that keeps me from a solution. I'm hoping for some trick.
Assume that "label_a" is a <label> tag and "INPUT_A" is
an <input> tag. A sample of my current web page is:
<table>
<tr><td>label_a</td><td>INPUT_A</td>
<td>label_x</td><td></td></tr>
<tr><td>label_b</td><td>INPUT_B</td>
<td>label_y</td><td></td></tr>
<tr><td>label_c</td><td>INPUT_C</td>
<td>label_e</td><td>INPUT_E</td></tr>
<tr><td>label_d</td><td>INPUT_D</td>
<td>label_f</td><td>INPUT_F</td></tr>
</table>
rendered like this:
label_a INPUT_A label_x
label_b INPUT_B label_y
label_c INPUT_C label_e INPUT_E
label_d INPUT_D label_f INPUT_F
I use tabindex attributes to make the focus traverse A-B-C-D-E-F.
I want to rewrite this using <div> tags, as so:
<div>
<div style="float:left;">
<div>label_a INPUT_A</div>
<div>label_b INPUT_B</div>
<div>label_c INPUT_C</div>
<div>label_d INPUT_D</div>
</div>
<div style="float:right;">
<div>label_x</div>
<div>label_y</div>
<div>label_e INPUT_E</div>
<div>label_f INPUT_F</div>
</div>
</div>
If I write things this way I don't have to use tabindex at all!
But this doesn't quite give me the visual effect I want. It
turns out that the height of the <label> elements is less than
that of <input> or <select> elements, and so the right column
doesn't line up with the left column. The controls in the right
column are all about a third of a line higher up on the page.
label_a INPUT_A label_x & _y
label_b INPUT_B label_e INPUT_E
label_c INPUT_C label_f INPUT_F
label_d INPUT_D
("label_x & _y" is not the actual result, but is part of a
crude approximation to show that my initial <div> design yields
a display that doesn't look aligned *or* professional)
It turns out this is a general problem. If I structure things
with nested tables instead of nested divs:
<table>
<tr>
<td><table id="left">. A, B, C, D..</table></td>
<td><table id="right"> x, y, E, F..</table></td>
</tr>
</table>
then I get the same sort of problem. The height of table "left"
is different than that of table "right" and so the lines in the
"left" table don't line up with those of the "right" table.
I know I could bottom align both tables / divs, That would work
if the two columns were meant to align at the bottom and had
identical elements from the bottom. But I'm trying to solve the
more general problem.
So.....is there a nice solution that I haven't yet considered?
Thanks for help,
Jerome.