Table fields need to be unstacked

HTML & CSS
1

This Contact Form that I’m using looks fine except that the Your Name field box is stacked right on top of the Email Address field box. How can I put a blank line (or space) in between them? Thanks.

    <table cellpadding="5" width="100&#37;">
    <tr>
		  <td width="10" class="required_field">*</td>
      <td width="80">Your Name</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" maxlength="50" style="width:300px" /></td>
    </tr>
    <tr>
		  <td class="required_field">*</td>
  <td>Email Address</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="email" maxlength="40" style="width:300px" /></td>
    </tr>
    <tr>
    <td></td>
	      <td>Subject:</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="subject" maxlength="40" style="width:300px" /></td>
    </tr>
        <tr>
        <td></td>
      <td>Comments:</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;<textarea name="comments" style="width: 100%; height: 250px"></textarea></td>
    </tr>
<tr>
      <td class="required_field">*</td>
      <td>Enter Image Code:</td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="" name="captext" style="width: 100px" maxlength="6" /></td>
    </tr>
<tr>
      <td></td>
      <td><a onclick="refresh_security_image(); return false;" style="cursor:pointer;"><u>Refresh Image</u></a></td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;<img src="includes/captcha.php" border="0" id="verificiation_image" /></a></td>
    </tr>
    </table>
2

The real answer is WHAT THE <snip /> is this, 1997?!? :stuck_out_tongue: (that’s a joke)

Jokes aside, there is NO reason to be using a table there. … and if you are resorting to non-breaking spaces to pad stuff in, you’re going about it all wrong. Much less that if you are building a form there are tags you SHOULD be using that are nowhere to be found in your version – specifically LABEL and FIELDSET. Even if you were to use a table you also would NOT have every cell being a TD, since things like “comments:” or “Your name:” would be HEADINGS, which means TH.

It’s also wasteful markup since if every single one of your inputs before the textarea are getting the same width, that goes in the external stylesheet instead of wasting time saying it in the markup on every single one of them.

The markup for that type of form element SHOULD be something more like this:


<fieldset class="info">
    <label for="info_name"><span>*</span>Your Name</label>
    <input type="text" name="name" id="info_name" maxlength="50" />
    <br />
    <label for="info_email"><span>*</span>Email Address</label>
    <input type="text" name="email" id="info_email" maxlength="40" />
    <br />
    <label for="info_subject">Subject:</label>
    <input type="text" name="subject" id="info_subject" maxlength="40" />
    <br />
    <label for="info_comments">Comments:</label>
    <textarea name="comments" id="info_comments"></textarea>
</fieldset>

<fieldset class="captcha">
    <label for="captcha_text"><span>*</span>Enter Image Code:</label>
  <input type="text" value="" name="captext" id="captcha_text" maxlength="6" />
  <a href="#" onclick="refresh_security_image(); return false;">Refresh Image</a>
  <img src="includes/captcha.php" id="verificiation_image" />
</fieldset>

<fieldset class="submitsAndHiddens">
    <input type="submit" value="Submit" />
</fieldset>

Float the labels, pad-left and absolute positon the spans inside the labels, margin the inputs… ALL of which should be done in your EXTERNAL stylesheet.