Верстка формы без использования таблиц.

Разметка формы будет следующая:

HTML

     <form id="myForm">
       <fieldset>
         <legend>Регистрация</legend>
       <div>
         <label for="login">Логин:</label>
         <input type="text" name="login" id="login" />   
       </div>
       <div>
         <label for="password">Пароль:</label>
         <input type="password" name="password" id="password" />   
       </div>
       <div>
         <label for="confirmPassword">Подтверждение пароля:</label>
         <input type="password" name="confirmPassword" id="confirmPassword" />   
       </div>
       <div class="s_but">
         <input type="submit" name="submit" value="Регистрация" id="submit" />
       </div>
     </fieldset>
    </form> 

Каждый набор из элементов формы (подписи и поля) размещаем в элементе <div></div>. Подписью будет содержимое элемента <label></label>

Сначала сделаем элементы хранящие подписи блочными и установим им ширину.

После этого мы увидим, что поля съезжают на новую строку. Чтобы это исправить, мы применим к ним еще одно правило css, которое называется float.

таким образом. у нас получится следубющий набор правил css:

CSS

    #myForm label{
      display:block;
      width:7em;
	  float:left;
     }

Теперь нужно сделать отступы между блоками, обрамляющими элементы формы и выравниваем кнопку «Отправить».

В итоге к нашей форме будет применена следующая таблица стилей:

CSS

 #myForm{
    background-color:#dfdfdf;
	border:1px solid #000;
	width:20em;
	height:10em;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	position:relative;	
   }
      
   #errBlock{
     width:100px;
	 position: absolute;
	 top:10px;
	 left:10px;
	 background:#cfc;
	 border:1px solid #00f;
	 text-align:center;
	 color:#f00;
	 font-size:.8em;
   }
      
   #myForm label{
    display:block;
    width:7em;
	float:left;
   }
   #myForm div{
    margin-bottom:.3em;
   }
   .s_but{
    text-align:center;
	margin-top:.3em;
	clear:both;
   }
  #login, #password, #confirmPassword{
    border-color:#7f9db9;
	border-width:1px;
	border-style:solid;
   }

Выглядеть форма будет так:

В итоге у нас получилась очень прилично выглядящая форма регистрации на сайте.