Question

I am trying to figure out how to remove the extra space between table data(s) in a table row in HTML. For example in the code below there is extra space between ‘First Name’ table data and the ‘input name’ table data when the code is viewed in my web browser IE. Here’s the example:

<tr> 
<td>First Name:</td> 
<td><input name="fname" id="fname" size="30" type="text" /></td> 
</tr>

I need the input text box to be reasonably close to the category (ie: “First Name”). I have requirements to include no table border, cellpadding of 2 and width of 65% and that’s what I have listed in my code and it is making it do this.

How can I keep these requirements and still get the look I’m needing (which is minimal space between the two table data fields)? Any help would be greatly appreciated. Thanks!

Here is my code:

    <form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
<!--Personal Info. table -nested table 1 -->
    <tr>
        <th>Personal Information</th>
    </tr>

    <tr> 
        <td>First Name:</td> 
        <td><input name="fname" id="fname" size="30" type="text" /></td> 
    </tr> 

    <tr>
        <td>Last Name:</td>
        <td><input name="lname" id="lname" size="30" type="text" /></td>
    </tr>

    <tr>
        <td>Address:</td>
        <td><input name="address" id="address" size="30" type="text" /></td>
    </tr>

    <tr>
        <td>City:</td>
        <td><input name="city" id="city" size="35" type="text" /></td>
    </tr>

    <tr>
        <td>State:</td>
        <td><input name="state" id="state" size="3" type="text" /></td>
    </tr>

    <tr>
        <td>Zip Code:</td>
        <td><input name="zip" id="zip" size="10" type="text" /></td>
    </tr>

    <tr>
        <td>Country:</td>
        <td><input name="country" id="country" size="10" type="text" /></td>
    </tr>

Answer 1

It soounds like you need to right-align the text in the first column. You can do it like this:

<td align='right'>

or with css

<td class='label'>

and the style would be:

.label {
  text-align:right;
}