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ファイルのarn'tの要素の一部）が含まれます。

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; 
} 

UPDATE

mason81は、この特定の問題を解決しましたが、これに出くわす他の誰がそれを整列させるだけではなく、CSSのテーブルを使用してに関する真実の答えをお読みください。それをやる方がはるかに簡単で簡単です。

Answer 1

はこれを試してみてください：

tr 
{ 
    vertical-align:text-bottom; 
} 

Answer 2

は、それはそれをやっている理由があるため右表のセル内<p/>タグである

<td align=center>name</td> 

Answer 3

を試してみてください。それらを取り出して、行の間にスペースが必要な場合は、パディングスタイルをすべてテーブルセルに追加します。

例

td 
{ 
    padding-bottom: 10px; 
} 

Answer 4

あなたは、テーブルを使用する必要はありません。ラベル自体を使用してフォームを整列させます。

See this example