adding space in html

Question

Hi I would like to know if its possible to add a space inside the table? This is my code: I want to have a space between "Copy the Anti-spam code" and the box where the code appears. How could you do that? Thanks

<table>
    <tr>
    <td><label for="name">Name:</label></td>
    <td><input type="text" name="name" size="60" maxlength="60" eform="Name::1" /></td>
</tr>

<tr>
    <td><label for="firstName">First Name:</label></td>
    <td><input type="text" name="firstName" size="60" maxlength="60" eform="First Name::1" /></td>
</tr>

<tr>
    <td>Copy the anti-spam code:<br/><img src="[+verimageurl+]" alt="verification code" border="1"/></td>
    <td valign="top"><input type="text" name="vericode" size="20" />
</tr>

<tr>
    <td rowspan="2" valign="right">
        <input align="right" type="submit" name="submit" value="Register" />
    </td>
</tr>

</table>

Answer 1

Quick and dirty

...
<tr>
    <td>Copy the anti-spam code:<br/><img src="[+verimageurl+]" alt="verification code" border="1"/></td>
    <td valign="top"><input type="text" name="vericode" size="20" />
</tr>

<tr><td colspan="2">&nbsp;</td></tr>

<tr>
    <td rowspan="2" valign="right">
        <input align="right" type="submit" name="submit" value="Register" />
    </td>
</tr>
...

Answer 2

Like this

<td>Copy the anti-spam code:&nbsp;&nbsp;<br/><img src="[+verimageurl+]" alt="verification code" border="1"/></td>

Or do you mean this?

<td>Copy the anti-spam code:&nbsp;&nbsp;<br/><br/><img src="[+verimageurl+]" alt="verification code" border="1"/></td>

Answer 3

I assume you mean vertical space, seeing as there is a line break?

Options:

1) wrap the "Copy the Anti-Spam code" text into a label class="antispam" and give that label a padding-bottom value

2) give the image a class="antispam" and give that class a margin-top value

Update: example.

In the head:

<style type="text/css">

   img.antispam { margin-top: 16px }      

</style>

In the markup:

<img class="antispam" src="[+verimageurl+]" alt="verification code" border="1"/>

Answer 4

You could use   to put a space in, or maybe use a transparent 1x1 pixel image and stretch that to the size you require/

Answer 5

Do you me the image with "the box where the code"?

"Space" is usually created with margin in CSS:

<img src="[+verimageurl+]" alt="verification code" border="1" style="margin-top: 2em;"/>

Consider moving the style to your external stylesheet.