0

I am using the below code for creating a form in html.But the output is not aligned. There is a space inserted between the heading and elements.

enter image description here

 [<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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jill448
  • 1,745
  • 10
  • 37
  • 62

2 Answers2

1

You shouldn't really use tables for anything other than representing tabular data, but that asside:

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

should be:

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

Hope this is enough to fix your spacing!

Looking again, I see you've also gotten some br's after your table rows. These shouldn't be needed as tr's are block level elements and therefore provide their own line breaks.

Ric
  • 458
  • 1
  • 7
  • 23
  • Ha, I guess I type too slow! – Ric May 20 '13 at 20:21
  • I corrected the

    tag. Still the output is same. Instead of table can I do the same in a better way by including anything in my CSS?

     – Jill448 May 20 '13 at 20:25
  • Looking at your visual, the simplest way would be to float both labels and input fields to the left, also setting a width for the labels and a clear:left; on them so that each starts a new row. – Ric May 20 '13 at 20:30
  • `#label { display: block; width: 6em; float: left; }` do you mean this will do? – Jill448 May 20 '13 at 20:35
  • Ric's right - "tables are for tabular data". There's much easier ways to do layout (namely - CSS) and the HTML code is best used to organise the contents by tagging it in a way that is meaningful. – boisvert May 20 '13 at 20:36
  • Not quite - The # is used to reference an id, so you'd want to leave that out. Then also set float:left; on the inputs, and replace your whole table with etc.. – Ric May 20 '13 at 20:38
  • Getting confusing now... Better go there: http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers – boisvert May 20 '13 at 21:42
0

The first H4 tags is opened in the wrong place.

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

should be

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

I've made a jsfiddle to test your code: http://jsfiddle.net/qLgCX/

The space is actually due to the many
tags you have peppered between rows. That's not how tables are layed out.

boisvert
  • 3,679
  • 2
  • 27
  • 53
  • I corrected the

    tag. Still the output is same. Instead of table can I do the same in a better way by including anything in my CSS?

     – Jill448 May 20 '13 at 20:25