Head First HTML with CSS

deciding how to style forms
To Table or Not to Table? That’s the question...
You’re going to find people on both sides of this issue. Should you use
CSS to layout your forms? Or tables? The harsh reality is that laying out
forms with CSS is difficult. And, if you’d like to bend space and time to lay
out your forms with CSS, we’ll gladly get out of your way and look on in
admiration. However, many forms are tabular in their layout, so why not use
tables to do the layout of your forms and let CSS do the styling? That way,
we get the best of both worlds.
Let’s start with the layout...
We’ll start by getting the form into a table. Check out the sketch below
and you’ll see the form fits pretty nicely in a table, and even better, it looks
like a form rather than a ragged collection of input elements. Also notice
that we’ve used a nested table in the “Ship to:” section.
The labels for
each form
element go
in the left
column.
The cell on
the left of
the submit
button is
empty. There’s
no label to
put here.
626 Chapter 14
Here’s the sketch of the table.
It’s a simple table, with two
columns and six rows - one row
for each main section of the form.
We’ve thrown all the input
elements into the right-hand
column.
Notice that we’ve grouped each
set of checkboxes and radio
buttons into one table data cell.
The Ship to: section has five text
elements, so we’ve grouped
them into a nested table. The
nested table has the same basic
layout as the main table: two
columns and five rows, with one
row for each label / element pair.