Ввод формы HTML / выравнивание меток

Question

Я пытаюсь создать простую регистрационную форму.Чтобы все выровнять аккуратно, я использовал метод таблицы.Однако текст не выравнивается по центру таблицы, а находится немного ниже таблицы.Я использовал подобные методы и раньше, и все работало нормально.

Вы можете увидеть проблему здесь.http://www.krawczyksolutions.com/sender/register.php

Код для таблицы:

<div class="head" align="center">
    <div align="center" class="box">
        <h2>Register New Account</h2><p/>
        <form name="regform" action="javascript:checkForm();">
            <table>
                <tr>
                    <td>First Name:   </td>
                    <td><input type="text" name="fname" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Last Name:   </td>
                    <td><input type="text" name="lname"  class="input" size="30"/><p/></td>
                </tr>
                <tr>
                    <td>Company:   </td>
                    <td><input type="text" name="comp"  class="input" size="30"/><p/></td>
                </tr>
                <tr>
                    <td>Address Line 1:   </td>
                    <td><input type="text" name="add1" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Address Line 2:   </td>
                    <td><input type="text" name="add2" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>City:   </td>
                    <td><input type="text" name="city" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Postcode:   </td>
                    <td><input type="text" name="post" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Country:   </td>
                    <td><input type="text" name="countr" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Email:   </td>
                    <td><input type="text" name="email" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Confirm Email:   </td>
                    <td><input type="text" name="cemail" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Password:   </td>
                    <td><input type="password" name="pass" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Confirm Password:   </td>
                    <td><input type="password" name="cpass" class="input" size="30" /><p/></td>
                </tr>
            </table>
            <input type="submit" value="Proceed To Payment"/><p/>
        </form>
    </div>
</div>

Файл CSS содержит следующее (ПРИМЕЧАНИЕ. Некоторые элементы в файле CSS не используются на этой странице).

body
{
    background-image:url("img/backgr.jpg");
    color:#9E9E9E;
    font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
}
#header 
{
    margin: 20px;
    padding: 10px;
    height: 60px;
}
#footer
{
    margin: 20px;
    padding: 10px;
    height: 60px;
}
#leftcol
{
    position: absolute;
    left: 150px;
    top: 160px;
    width:400px;
}
#rightcol 
{
    position: absolute;
    right: 150px;
    top: 220px;
    width: 300px;
}
.inputbox
{
    background-color:black;
    color:#9E9E9E;
    font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
    box-shadow:1px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}
.box {width:700px;padding:15px;background-color:#fff;margin-bottom:18px;border-radius:0.6em;-moz-border-radius:0.6em;-webkit-border-radius:0.6em;}
.box {
    -moz-box-shadow: 4px 4px 5px #111;
    -webkit-box-shadow: 4px 4px 5px #111;
    box-shadow: 4px 4px 5px #111;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}
.head
{
    margin-top:50px;
}
.input
{
    font-size:14px;
}

ОБНОВЛЕНИЕ

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

Answer 1

Вам не нужно использовать стол. Используйте сам ярлык для выравнивания формы.

См. Этот пример

Answer 2

Попробуйте это:

tr
{
  vertical-align:text-bottom;
}

Answer 3

Это происходит из-за тегов <p/> в правой ячейке таблицы. Уберите их, и если вам нужно больше места между строками, добавьте стили заполнения к всем ячейкам таблицы.

Пример

td
{
   padding-bottom: 10px;
}

Answer 4

Попробуйте

<td align=center>name</td>