表单中的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标签在错误的地方打开。

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

应该是

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

我制作了一个 jsfiddle 来测试您的代码：http://jsfiddle.net/qLgCX/

空间实际上是由于您在行之间添加了许多
标签。这不是表格的布局方式。

Answer 2

除了表示表格数据之外，您不应该真正将表格用于任何其他用途，但除此之外：

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

应该是：

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

希望这足以解决您的间距问题！

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