Change size of TD in an HTML table

Question

I currently have a table that looks like this:

https://i.sstatic.net/Vl1ZU.png

I want to move the two textbox TDs right next to TDs left of it (as seen in the image above).

I've already tried things such as min-width and white-space: nowrap, however, nothing has been working. How can I fix this issue? Or is it just impossible?

The code of the table is:

<table>
    <tr>
        <td>Name</td>
        <td>
            <input type="text" name="user" placeholder="Your Name" maxlength="20">
        </td>
    </tr>
    <tr>
        <td>Email Address</td>
        <td>
            <input type="text" name="email" placeholder="Your Email Address">
        </td>
    </tr>
    <tr><td>Message</td></tr>
    <tr>
        <td>
            <textarea rows="10" cols="50" name="message" maxlength="500"></textarea>
        </td>
    </tr>
</table>

Answer 1

You're looking for the colspan attribute of TD's and TR's. It defines how many columns should be grouped into one.

<table>
    <tr>
        <td>Name</td>
        <td>
            <input type="text" name="user" placeholder="Your Name" maxlength="20">
        </td>
    </tr>
    <tr>
        <td>Email Address</td>
        <td>
            <input type="text" name="email" placeholder="Your Email Address">
        </td>
    </tr>
    <tr><td>Message</td></tr>
    <tr>
        <td colspan="2">
            <textarea rows="10" cols="50" name="message"></textarea>
        </td>
    </tr>
</table>

Here's the above example on jsfiddle: http://jsfiddle.net/5Nc6x/