表单中的html表对齐方式

Question

我使用以下代码在html中创建表单。但输出未对齐。在标题和元素之间插入了一个空格。

 [<h2>Update the Transaction Details</h2>       
        <table>
                <tr>
                <h4><td>Transaction Date:</h4></td> <td><input type="text" name="transactiondate" class="tcal" /></td></tr> <br><br>
                <tr><td><h4>Category:</h4></td> <td><select name="category" id="category">
                        <option selected="selected" disabled="disabled"></option>
                            <option value="Electricity">Electricity</option>
                            <option value="Food">Food</option>                  
                            <option value="Others">Others</option>
                        </select></td></tr> <br><br>
                <tr><td><h4>Amount:</h4></td> <td>$<input type="text" name="amount" /></td></tr> <br><br>
                <tr><td><h4>Mode of Payment:</h4></td> <td><input type="radio" name="modeofpayment" value="debit"><h5>Debit</h5></td>
                                <td><input type="radio" name="modeofpayment" value="credit"><h5>Credit</h5> </td></tr> <br><br>
                <tr><td><h4>Comments:</h4></td> <td><input type="text" name="comments" /></td></tr> <br><br>
              <tr><td><input type="submit" name="update" value="Update" /></td></tr>
              </tr></table>

Answer 1

除了表示表格数据之外，你不应该真正使用表格，但这有助于：

<h4><td>Transaction Date:</h4></td>

应该是：

<td><h4>Transaction Date:</h4></td>

希望这足以修复你的间距！

再看一遍，我看到你的表行之后也得到了一些br。这些不应该是必需的，因为tr是块级元素，因此提供它们自己的换行符。

Answer 2

第一个H4标签在错误的位置打开。

<h4><td>Transaction Date:</h4></td>

应该是

<td><h4>Transaction Date:</h4></td>

我做了一个jsfiddle来测试你的代码：http://jsfiddle.net/qLgCX/

空间实际上是由于行之间有许多标签。这不是表格的排列方式。