How do I remove the space between table data in a table row in HTML?

Question

Hi, 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

You need to use CSS to control cell spacing.

Here's a good tutorial with examples:

http://www.quirksmode.org/css/tables.html

Answer 2

<table border="0" cellpadding="2" cellspacing="0" width="65%">
...
</table>

Answer 3

I assume you want the left hand column to adjust in width so that it is as wide as its longest entry. This is actually an interesting question.

What I usually do:

• give the left hand column a white-space: nowrap style attribute

• give the right hand column a width that is slightly more than it should be, e.g. maybe 70%. That's a matter of trying out.

The result is that the right hand column "presses" against the left hand column, which has no width specified. The left hand column will give in but only to the point of its content's length.

I'm interested to see whether there is some other, cleaner solution to this that I have overlooked the past eight years :)

Code example:

<tr>
 <td style="white-space: nowrap">Label</td>
 <td style="width: 95%">Input</td>
</tr>

it should be enough to set the width in the first row.

Answer 4

First of all, put a colspan="2" on your th:

<tr>
    <th colspan="2">Personal Information</th>
</tr>

Without this, the th will unnecessarily stretch the tds underneath it (i.e. the left column). The colspan="2" will stretch the th over the width of entire table. This should fix at least a part of the problem and bring the tds closer together. If that is still not enough, you can define a fixed width for the left column by setting a width attribute on any of the tds in it, e.g.:

<tr>
    <th colspan="2">Personal Information</th>
</tr>

<tr> 
    <td width="200">First Name:</td> 
    <td><input ... /></td> 
</tr> 

<tr>
    <td>Last Name:</td>
    <td><input ... /></td>
</tr>

Better yet, set the width using CSS, in em rather than pixels, so as to enable the cell width to scale with the font size:

<tr>
    <th colspan="2">Personal Information</th>
</tr>

<tr> 
    <td style="width:10em">First Name:</td> 
    <td><input ... /></td> 
</tr> 

<tr>
    <td>Last Name:</td>
    <td><input ... /></td>
</tr>

The values 200 and 10em are just examples, you'll have to experiment a little to find the optimal values.

Answer 5

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;
}

Answer 6

With CSS:

td {
  padding: 0;
  margin: 0; /** or whatever pixel you prefer **/
}

table {
  white-space: nowrap;   /** I don't know if this will help, just giving solutions **/
}

and for your html

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