Как разработать и выровнять формы без таблиц?

Да, используйте маркировки и CSS:

<label class='FBLabel' for="FName">First Name</label>
<input value="something" name="FName" type="text" class='FBInput'>
<br>

css:

.FBLabel, .FBInput {
    display:block;
    width:150px;
    float:left;
    margin-bottom:10px;
}

См.: http://www.alistapart.com/articles/prettyaccessibleforms

Почему Вы не хотите использовать таблицы? Это кажется, что они работают отлично на Вас теперь. Вы волнуетесь по поводу проблем доступности? Просто, потому что это - таблица, не означает, что доступность пострадает.

я хочу предостеречь Вас от создания нового решения решенной проблемы ни для чего кроме пользы чистоты. Даже если Вы волнуетесь по поводу семантики, какая семантика описывают форму так или иначе?

Я использую следующий метод большую часть времени, и он позволяет мне вставать, все мое выравнивание установило точно, как мне нравится он. Как Вы видите, это дает мне большое количество рычагов для CSS и JS.

<form id="login-form" action="#" method="post">
    <fieldset>
        <label id="for-email" for="email">
            <span class="label-title">Email Address <em class="required">*</em></span>
            <input id="email" name="email" type="text" class="text-input" />
        </label>

        <label id="for-password" for="password">
            <span class="label-title">Password <em class="required">*</em></span>
            <input id="password" name="password" type="password" class="text-input" />
        </label>
    </fieldset>

    <ul class="form-buttons">
        <li><input type="submit" value="Log In" /></li>
    </ul>
</form><!-- /#login-form -->

Существуют тонны путей там, чтобы сделать это без таблиц. Как только Вы свалили основной формат, столь легко работать с тем, как таблицы, это - просто начальная игра вокруг этого, может быть боль. Так, просто обратитесь к другим, которые уже сделали работу понимания всего этого для Вас:

• http://www.alistapart.com/articles/prettyaccessibleforms
• http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

я также зарегистрировал метод, который я обосновался на прошлой неделе (отрывок):

<form action="/signup" method="post">
<fieldset>
<legend>Basic Information</legend>
<ol>
<li><label for="name">Name <span class="error">*</span>
    </label><input type="text" id="name" name="name" size="30" /></li>
<li><label for="dob">Date of Birth <span class="error">*</span></label>
    <div class="inputWrapper">
    <input type="text" id="dob" name="dob" size="10" />
    <span class="note">YYYY-MM-DD</span></div></li>
<li><label for="gender">Gender <span class="error">*</span></label>
    <select id="gender" name="gender">
    <option value=""></option>
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select></li>
</ol>
</fieldset>
</form>

И CSS:

fieldset { 
    margin: 0 0 20px 0; } 

fieldset legend { 
    font-weight: bold; 
    font-size: 16px; 
    padding: 0 0 10px 0; 
    color: #214062; } 

fieldset label { 
    width: 170px; 
    float: left; 
    margin-right:10px; 
    vertical-align: top; } 

fieldset ol { 
    list-style:none; 
    margin: 0;
    padding: 0;} 

fieldset ol li { 
    float:left; 
    width:100%; 
    padding-bottom:7px; 
    padding-left: 0; 
    margin-left: 0; } 

fieldset ol li input, 
fieldset ol li select, 
fieldset ol li textarea { 
    margin-bottom: 5px; } 

form fieldset div.inputWrapper { 
    margin-left: 180px; } 

.note { 
    font-size: 0.9em; color: #666; }

.error{ 
    color: #d00; }

Действительно зависит от того, с кем Вы говорите. Пуристы говорят, что CSS использования, потому что элемент таблицы не был предназначен для расположения. Но для меня, если это работает, почему изменение это? Я действительно использую CSS теперь для расположения, но у меня все еще есть много унаследованного кода, который я не имею и не изменю.

Там не едино для этого. Пример таблицы, который Вы использовали, может быть изменен к лучшему, хотя:

<table>
  <tbody>
    <tr>
      <th scope="row"><label for="f_name">First name:</label></th>
      <td>
        <input type='text' id='f_name' name='f_name' />
        <?php form_error('f_name'); ?>
      </td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

Не слишком уверенный в ошибочной части; я думаю, что это имеет больше смысла, помещая его рядом с входом, чем наличие отдельного столбца для него.

Я использовал это в прошлом справедливо эффективно:

HTML:

<fieldset>
  <p>
    <label for="myTextBox">Name</label>
    <span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
    <span class="error">This a message place</span>
  </p>
</fieldset>

CSS:

<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em;  text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>

единственное действительно глюк является Firefox 2, который корректно ухудшается. (см.-moz-inline-box, который является небольшим количеством взлома, но не слишком плохо)

Если вы не используете таблицы, вам нужно заранее знать ширину ваших меток. Это часто может быть проблемой для многоязычных сайтов (i18n).

В таблицах они растягиваются, чтобы соответствовать ярлыкам разного размера. Один только CSS пока не может сделать это хорошо поддерживаемым способом.