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

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>

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

Solution 2

You need to use CSS to control cell spacing.

Here's a good tutorial with examples:

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

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Ashley]

@Ray- doing this gets the td "First Name" side by side with the input box but both pieces of data are now all on the right side and I need it left-justified. Any ideas how I can do that?

[Ray]

I am not sure what you mean by 'both pieces of data are now all on the right side'. The right alignment should only go in the left side column, not the right. Also, you should do the colspan thing on the header row that RegDwight suggested.

[Ashley]

@RegDwight- I tried the things you said and they did not work. Inserting the colspan=2 just moved the heading "Personal Information" not the "First Name" or input box. I'm sure what you're saying must work but I can't seem to get it to. I'll keep messing with it and the other ideas given.

[Ashley]

@Pekka- I tried this directly in the td field of each and it didn't work for me. I don't know why it's not working. How do you usually write it?

[Ashley]

@Ray-I mean that the "First Name" text and input text box are now side by side but they are on the far right side of the page and not on the left side like I need it to be. I tried adding colspan to my th tag but that didn't work. The only thing I found that works is putting style= "float: left"; in the <tr> of First Name to get it to the left hand side but doing it to the rest of them doesn't lay them out one underneath the other but side by side of each other. So I am still trying to figure it all out.

[Ray]

It sounds like something outside the table is causing this new problem. If you used the css version of my suggestion, is it possible that something else on the page uses the class "label" which is pushing everything to the right? You should not ever have to float table rows.

[Ashley]

@Ray- I figured out why there was so much space. It's because I had two columns for all of my nested tables and the input boxes were being crammed into the second column but if I put it in with the "First Name" table data section they are side by side. Yea!! Thanks for your help though.

[Ashley]

@RegDwight- I got this to work after all. Thanks for your help!