对齐表格正确

Question

我有这样的形式：

<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded"> 
    <table> 


    <tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr> 

    <tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr> 
    <tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr> 

    <tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()"> 
     <option>Select Number of Classes</option> 
     <?php 
     echo'<option value="1">One</option>'; 
     echo'<option value="2">Two</option>'; 
     echo'<option value="3">Three</option>'; 

     ?> 
    </select><br/><br/></td></tr> 


    <tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr> 
    <tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr> 
    <tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr> 

    <tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr> 
    </table><br /> 
    <input type="submit" name="enviar" value="Insertar"/> 
    </form> 

而CSS类形式是：

td.Forms { 


    text-align: left; 
    text-indent: 10px; 
    font-family: Century Gothic; 
    font-weight: normal; 
    font-size: 15px; 
    white-space: nowrap; 
} 

的框开始当标题结束，我想的箱子，在同一零件启动所有。我认为这个想法是看到一个科拉姆标题和箱其他，像这样http://i48.tinypic.com/2nbd2m8.png，但我有这个http://i49.tinypic.com/1exb80.png

Answer 1

您需要添加额外的细胞（<td>）为您的输入字段，以便他们都开始上相同的位置。此外，您可能需要定义一个宽度，以确保在一个单元格和另一个单元格之间有足够的空间。我通过将width: 200px;添加到您的td.Forms中，将它定义为所有<td>。最后给行之间的间隔，我补充说：

td { 
    padding: 10px 0; 
} 

其中每个单元格的顶部和底部添加10px填充。

结帐此fiddle看到的代码在行动。

Answer 2

下面是正确的html标记（假设你将使用表格布局）。 Here is a demo。

<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded"> 
    <table> 


    <tr> 
     <td class=Forms>ICAO:</td> 
     <td><input type="text" value="" name="ICAO" /></td> 
    </tr> 

    <tr> 
     <td class=Forms>Name:</td> 
     <td><input type="text" value="Airbus A320" name="nombre" /></td> 
    </tr> 
    <tr> 
     <td class=Forms>Price:</td> 
     <td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td> 
    </tr> 

    <tr> 
     <td class=Forms>Number Classes:</td> 
     <td> 
      <select name="numberclasses" id="numberclasses" onchange="callAjax()"> 
      <option>Select Number of Classes</option> 
      <?php 
      echo'<option value="1">One</option>'; 
      echo'<option value="2">Two</option>'; 
      echo'<option value="3">Three</option>'; 
      ?> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td class=Forms>First Class:</td> 
     <td><input disabled="disabled" type="text" name="classes1" /></td> 
    </tr> 
    <tr> 
     <td class=Forms>Bussines Class:</td> 
     <td><input disabled="disabled" type="text" name="classes2" /></td> 
    </tr> 
    <tr> 
     <td class=Forms>Economy Class:</td> 
     <td><input disabled="disabled" type="text" name="classses" /></td> 
    </tr> 
    <tr> 
     <td class=Forms>Capacidad:</td> 
     <td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td> 
    </tr> 
    </table> 
    <input type="submit" name="enviar" value="Insertar"/> 
</form> 

Answer 3

我打算给你答案 - 但首先我想解释一些语义以及如何正确编码表格而不使用表格。

html表格自html诞生以来一直存在。您会惊奇地发现，只有存在多少html表单元素才能帮助您正确编写语义html。适当的语义HTML表示：

1）你的代码是文本观众如谷歌搜索引擎和盲人 2）使用浏览器访问履行ISPS联邦法律（美国法律规定，学校/政府网站可访问） 3）从长远来看，让你更容易编写后端（php）。

在其准系统的表格应包括：

<form> 
<fieldset> 
    <div> 
    <label for="first-name">First Name</label> 
    <input type="textbox" name="first_name" id="first-name" value="" /> 
    </div> 
    <div> 
    <label for="gender_selection">Gender</label> 
    <select name="gender" id="gender_selection"> 
     <option value="male">Male</option> 
     <option value="female">Female</option> 
    </select> 
    </div> 
</fieldset> 
</form> 

• 您必须对每个form标签的fieldset标签。
• label标记用于定义表单元素代表什么。这是什么告诉文本查看器每个表单元素代表什么！当然，你可以不做，但为什么当这个标签是为了这个目的而创建的。
• div标签可让您轻松设计所需的错误/更正。

CSS

form div { 
    overflow: hidden; 
} 
form div label { 
    float: left; 
    width: 120px; 
    padding: 0 20px 0 0; 
} 
form div input, form div select { 
    float: left; 
    width: 220px; 
} 

简单的CSS（未测试）来模仿你的表格形式与不使用表，易于接受，并且使用正确的HTML的优点。

现在，如果用户做出与错误让我们说first name我们只需添加.error类该div：

<div class="error"> 
    <label for="first-name">First Name</label> 
    <input type="textbox" name="first_name" id="first-name" value="" /> 
    </div> 

CSS：

div.error label { 
    color: red; 
} 
div.error input { 
    border: red; 
    color: red; 
} 

回答你的问题：

您的html表单“标签”元素没有固定的宽度。通过添加额外的<td>列或使用上面提供的代码来添加固定宽度。

希望这篇文章会帮助你的未来。