asked on 5/18/2011

HTML textarea/select rowspan problem

Hi Experts,

Have a look at this HTML:

<html>
<body>

  <table>

    <tr>
      <td rowspan="2">
        <textarea rows="2" cols="10">Textarea</textarea>
      </td>

      <td rowspan="3">
        <select size="5" multiple="multiple">
          <option>Select option 1</option>
          <option>Select option 2</option>
          <option>Select option 3</option>
          <option>Select option 4</option>
          <option>Select option 5</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <input type="text" value="Textbox">
      </td>
    </tr>

  </table>

</body>
</html>

Open in new window

Could someone please explain to me, why the above HTML produces sample1.png (attached), instead of the expected sample2.png (also attached).

Since the <textarea> spans 2 rows, and the <select> spans 3 rows, I would have expected the <input> text box to sit under the <textarea>, as it does in sample2.png.

To get sample2.png, I had to change the textarea's:
<td rowspan="2">
to:
<td rowspan="1">
(or remove it the rowspan, since 1 is the default), but I don't understand why.

This is using Firefox 3, but I tried IE 6 and got the same kind of problem.

Any ideas what's happening here?

Thanks.
sample1.png
sample2.png

HTML Web Development CSS

Last Comment

Dave Baldwin

5/18/2011

Pratima

5/18/2011

try this

<body>
		<table ID="Table1">
			<tr>
				<td>
					<textarea rows="2" cols="10" ID="Textarea1" NAME="Textarea1">Textarea</textarea>
				</td>
				<td rowspan="3">
					<select size="5" multiple="multiple" ID="Select1" NAME="Select1">
						<option>Select option 1</option>
						<option>Select option 2</option>
						<option>Select option 3</option>
						<option>Select option 4</option>
						<option>Select option 5</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<input type="text" value="Textbox" ID="Text1" NAME="Text1">
				</td>
			</tr>
		</table>
	</body>

Open in new window

tel2

5/18/2011

ASKER

Thanks for the lightning fast response, pratima_mcs.

Please correct me if I'm wrong, but I think I have *already* effectively tried that, as mentioned in my original post. See the part where I said:
> To get sample2.png, I had to change the textarea's:
> <td rowspan="2">
> to:
> <td rowspan="1">
> (or remove the rowspan, since 1 is the default), but I don't understand why.

My (and your) code seem to workaround the problem, but they don't answer the questions I've asked. Please answer the questions in my original post.

Thanks.

robasta

5/18/2011

If u put a rowspan on the cell for the input area, it will span the cell for the input and therefore the input will not go underneath.

Your table has 2 rows, and rowspan=2 means the textarea spans all the rows

ASKER CERTIFIED SOLUTION

Dave Baldwin

5/18/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

tel2

5/18/2011

ASKER

Hi robasta,
> Your table has 2 rows, and rowspan=2 means the textarea spans all the rows
Did you see the 'rowspan="3"' for the <select> text box?

Hi Dave,
OK Mr HTML hotshot, if what you think is true, then I'd expect the 2 tables in the following code not to manifest the problem. Note the .

<html>
<body>

  <table>

    <tr>
      <td rowspan="2">
        <textarea rows="2" cols="10">Textarea</textarea>
      </td>

      <td rowspan="3">
        <select size="5" multiple="multiple">
          <option>Select option 1</option>
          <option>Select option 2</option>
          <option>Select option 3</option>
          <option>Select option 4</option>
          <option>Select option 5</option>
        </select>
      </td>
    </tr>

    <!-- Inserting a dummy row, so all rows contain something -->
    <tr>
    </tr>

    <tr>
      <td>
        <input type="text" value="Textbox">
      </td>
    </tr>

  </table>

  <table>

    <tr>
      <!-- Putting the single row element first, so all rows contain something -->
      <td>
        <input type="text" value="Textbox">
      </td>
      <td rowspan="3">
        <select size="5" multiple="multiple">
          <option>Select option 1</option>
          <option>Select option 2</option>
          <option>Select option 3</option>
          <option>Select option 4</option>
          <option>Select option 5</option>
        </select>
      </td>
    </tr>

    <tr>
      <td rowspan="2">
        <textarea rows="2" cols="10">Textarea</textarea>
      </td>
    </tr>

  </table>

</body>
</html>

Open in new window

Attached is a screen shot from Firefox (sample3.png).
Nice work! You get to retain your (newly aquired) title of "Mr HTML hotshot".
Thanks Dave!
sample3.png

Dave Baldwin

5/18/2011

You're welcome, glad to help. And I've been given a lot worse titles than that! That's a good test also with the empty row, I didn't think of doing that.