How to align table cells in JavaScript/Html

Question

I've been working on this JavaScript table and I'm stuck. I tried to find an answer here and on the web but unfortunately I couldn't.

What am I trying to do is align all the text fields and bring as close as I can the comments textbox.

<html>
<body>
<table cellspacing= "20px">
<tr><td></td><td></td><td rowspan="6" valign="top">Comments
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br><textarea rows="4" cols="40" name="Comments" tabindex="6"></textarea></td></tr>
<tr><td>Your&nbsp;Name*</td><td><input name="Name" id="Name" tabindex="1"></td><td></td></tr>
<tr><td>Company</td><td><input name="Company" id="Company" tabindex="2"></td></tr>
<tr><td>E-mail*</td><td><input name="Email" id="Email" tabindex="3"></td></tr>
<tr><td>Telephone*</td><td><input name="Phone" id="Phone" tabindex="4"></td></tr>
<tr><td>Your Partner name</td>
<td><input name="Partner" id="Partner" tabindex="5"></td>
<td>This is a text and it suppose to be long. Actually exactly this length.</td></tr>
</table>

</body>
</html>

Everything works great until I add the line:

<td>This is a text and it suppose to be long. Actually exactly this length.</td>

right before the table closing.

The matter is that this line suppose to be with the same line as the last textbox. This line pushes the comments textbox to the right side of the screen exactly by the length of the text. And I can't figure out how to bring it back so it would be aligned near the text fields.

I want it to look like this:

text|---| comments
text|---| |-------|
text|---| |-------|
text|---| 
text|---| long text here

instead of this:

text|---|                comments
text|---|                |-------|
text|---|                |-------|
text|---|               
text|---| long text here

achudars · Accepted Answer · 2013-07-17 10:10:01Z

1

Does this jsFiddle do what you want?

2 key points:

1. <td rowspan="3" valign="top"> for the td above the text area

2. The last row should be like this

<tr>
  <td>Your Partner name</td>
  <td><input name="Partner" id="Partner" tabindex="5"></td>
  <td colspan="2">This is a text and it suppose to be long. Actually exactly this length.</td>
</tr>

answered Jul 17, 2013 at 10:10

achudars

1,50615 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MaD Over a year ago

Thank you so much. I was sitting on it like two hours now. It so obvious when pointed out. Thanks again

Joe M · Accepted Answer · 2013-07-17 10:44:01Z

Couple of things:

- Avoid formatting using nbsp's.
- Use CSS

Like so:

<html>
<head>
<style>

body
{
margin:0;
padding:0;
}
.left
{
float:left;
width:300px;
}
</style>
</head>
<body>
  <div class="left">
    <table cellspacing="20px" border-colour="blue">
        <tr>
            <td>Your&nbsp;Name*</td>
            <td><input name="Name" id="Name" tabindex="1"></td>
            <td valign="top" rowspan="4">
                Comments<br><textarea rows="4" cols="40" name="Comments" tabindex="6"></textarea>
            </td></tr>
        <tr><td>Company</td><td colspan="2"><input name="Company" id="Company" tabindex="2"></td></tr>
        <tr><td>E-mail*</td><td colspan="2"><input name="Email" id="Email" tabindex="3"></td></tr>
        <tr><td>Telephone*</td><td colspan="2"><input name="Phone" id="Phone" tabindex="4"></td></tr>
        <tr>
            <td>Your Partner name</td>
            <td><input name="Partner" id="Partner" tabindex="5"></td>
            <td>This is a text and it suppose to be long. Actually exactly this length.</td>
        </tr>
    </table>
  </div>
</body>
</html>

hfz · Accepted Answer · 2013-07-17 10:08:16Z

0

Try using the colspan instead of having empty <td> tags:

<td colspan="2">long text here</td>

More explanation about colspan here.

answered Jul 17, 2013 at 10:08

hfz

3373 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to align table cells in JavaScript/Html

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related