How to make a grid-like form

[ryy705]

Hello,
Is there a way to create a grid-like form with CSS? Meaning, I would like the label and input fields to be equidistant from one another. It naturally happens if I use tables but is there a way to achieve the same effect with CSS?
Floating label elements to the left and floating input elements to the right does quite achieve the same effect. Can't find a relevant solution by googling, many thanks in advance.

[macneato]

Hi ryy705,

You will have to use CSS to achieve what you want. A example would be;

#col {width:250px;float:left;margin:2px;}
	
#row {width:100%; margin:2px}

And your html will be as follows:

<form action="ac_contact.php" method="post">
<div id="row">
<div id="col">Name:</div>
<div id="col">
  <input type="text" name="name" />
</div>
</div>
<div id="row">
<div id="col">Surname:</div>
<div id="col">
  <input type="text" name="surname" />
</div>
</div>
</form>

Very easy to understand. But if you having any problems, Just shout.

[MidiMagic]

This is a proper use of tables.

Tables are not deprecated. What W3C wanted to stop the wrong use of tables for is using them to create margins, borders, or padding (which was done by web authors before those styles existed).