Head First HTML with CSS

Test driving a very tabular form
Open “styledform.html” in your browser and take a look at the Starbuzz
Bean Machine form in table format. It looks better, doesn’t it? All the labels
and form elements are aligned, and it looks more professional.
Now, we can use CSS to make it look even better, by tweaking some things
here and there. Let’s take a look at what you might want to change.
We can align all these
labels to the right
so they line up nicely
against the form
elements.
We can also align the
labels and the form
elements vertically
so they both align
to the top of the
data cells.
Finally, we’ll add just
a bit of space on the
left side of the body.
We’ll do some basic styling that you’re well
familiar with by now, like changing the
font, and adding a background color.
xhtml forms
A border around the
table would look nice.
Notice how
the rows are a
little too close
together? We
can add space
between the cells
in the rows so
the form is easier
to read.
you are here 629