Table and CSS coding

HTML & CSS
1

Hi there,

I have what is probably a simple problem. I have a table with a form in it. I want the space between the rows to be smaller - ie. there is too much space between each line.


<table width="600" border="0">
  <tr>
    <td>Title:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="110"><label for="emailaddress2">Email Address:</label></td>
    <td width="480"><input type="text" name="emailaddress" id="emailaddress" /></td>
  </tr>
  <tr>
    <td><label for="telephone2">Telephone:</label></td>
    <td><input type="text" name="telephone" id="telephone" /></td>
  </tr>
  <tr>
    <td><label for="firstname2">First Name:</label></td>
    <td><input type="text" name="firstname" id="firstname" /></td>
  </tr>
  <tr>
    <td><label for="lastname2">Last Name:</label></td>
    <td><input type="text" name="lastname" id="lastname" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Delivery address:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><label for="address5">Address 1:</label></td>
    <td><input type="text" name="address1" id="address1" /></td>
  </tr>
  <tr>
    <td>Address 2:</td>
    <td><input type="text" name="address2" id="address2" /></td>
  </tr>
  <tr>
    <td>Address  3:</td>
    <td><input type="text" name="address3" id="address3" /></td>
  </tr>
  <tr>
    <td><label for="address6">Address 4:</label></td>
    <td><input type="text" name="address4" id="address4" /></td>
  </tr>
  <tr>
    <td>City:</td>
    <td><input type="text" name="City" id="city" /></td>
  </tr>
  <tr>
    <td>County:</td>
    <td><input type="text" name="county" id="county" /></td>
  </tr>
  <tr>
    <td>Post code:</td>
    <td><input type="text" name="postcode" id="postcode" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">Tick this box if the billing address is the same as the delivery address.
    <input name="billingsame" type="checkbox" value="yes" /></td>
  </tr>
  <tr>
    <td>Billing address:</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><label for="billaddress5">Billing Address 1:</label></td>
    <td><input type="text" name="billaddress1" id="billaddress1" /></td>
  </tr>
  <tr>
    <td><label for="billaddress6">Billing Address 2:</label></td>
    <td><input type="text" name="billaddress2" id="billaddress2" /></td>
  </tr>
  <tr>
    <td><label for="billaddress7">Billing Address  3:</label></td>
    <td><input type="text" name="billaddress3" id="billaddress3" /></td>
  </tr>
  <tr>
    <td>Billing Address 4:</td>
    <td><input type="text" name="billaddress4" id="billaddress4" /></td>
  </tr>
  <tr>
    <td>City:</td>
    <td><input type="text" name="billCity" id="billcity" /></td>
  </tr>
  <tr>
    <td><label for="billcounty2">County:</label></td>
    <td><input type="text" name="billcounty" id="billcounty" /></td>
  </tr>
  <tr>
    <td><label class="billpostcode" for="postcode2">Post code:</label></td>
    <td><input type="text" name="billpostcode" id="billpostcode" /></td>
  </tr>
  <tr>

Thanks for your help,

Matthew Bent.

2

While you may be better off without using a table for this in the first place, I believe you can set the table row margin to 0px.

<table class="reducedTable">
  <tr>
    <td>Field Here</td>
  <tr>
</table>

.reducedTable tr
{
  margin-top: 0px;
  margin-bottom: 0px;
}
3

Try…

td{padding:0;}

…also, if your “label for” doesn’t match the id, it won’t work like it should.

This…


    <td width="110"><label for="emailaddress2">Email Address:</label></td>
    <td width="480"><input type="text" name="emailaddress" id="emailaddress" /></td>

Should be…


    <td width="110"><label for="emailaddress">Email Address:</label></td>
    <td width="480"><input type="text" name="emailaddress" id="emailaddress" /></td>
4

Uhm… guys… duh… he’s not zero’ing cellpadding or cellspacing?

IF you are going to continue to use a table, either set border-collapse:collapse to get rid of cellpadding/spacing/border, or declare the table with cellpadding=“0” cellspacing=“0”

Though as noted, there is ZERO legitimate excuse for that to even be a table in the first place. You’ve got perfectly good labels and inputs, USE THEM instead of wasting a table on non-tabular data.

Set the labels to inline-block, set width:180px; on them… put <br /> after each input setting their widths as needed (maybe with a negative right margin to prevent stacking ‘drop’ since the width can’t be predicted cross-browser)… Look ma, no table.