Table With Colspan Problems

HTML & CSS
1

Hello, I’m currently having problems with tables and putting a COLSPAN=“3” on a TD. I put a picture and the code below.

My problem is when I put the code below it acts as if the colspan=3 is not working because it makes the left side of the table smaller and the right side bigger. It did work for the small text at the top of the table, it didn’t make either side change, worked fine.


[COLOR=Red]<td colspan="3"><div align="left">[/COLOR]
  <textarea name="fs" cols="70" rows="10" class="box" id="fs" tabindex="24"></textarea>
</div></td>

The top portion of the picture is the HTML code without the colspan=3. The bottom half includes the colspan=3 with the textarea and it gets messed up.

Here is the full code:


      <table width="450" border="1" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="3"><div align="center"><span class="smallGreyText">Fields marked with an asterisk <span class="star">*</span> are required.</span></div><br /></td>
        </tr>
        <tr>
          <td width="155"><div align="right"><label for="username"><span class="star">* </span>Username:</label></div></td>
          <td width="20"></td>
          <td width="275"><div align="left">
            text here
          </div></td>
        </tr>
        <tr>
          [COLOR=Red]<td colspan="3"><div align="left">[/COLOR]
            <textarea name="fs" cols="70" rows="10" class="box" id="fs" tabindex="24"></textarea>
          </div></td>
        </tr>
      </table>

Also, here is the a picture of the bottom of the table where the actual TEXTAREA and colspan=3 are. You can see the COLSPAN looks like it worked fine but it still messes up the rest of the table.

Please help, thanks.

EDIT: It does seem to load fine in FIREFOX but in Internet Explorer it doesn’t. I don’t think it’s browser related though.

2

Hi,

Welcome!
It’s not the colspan that is throwing off the layout - it’s the cols attribute on the textarea.

If you remove this and give the text area a style attribute with a set width it will fix it.
But I wouldn’t use tables either, i’m part of the XHTML/CSS fanclub :slight_smile:

3

yeah but, to get the forms all lined up and stuff how wud u do that with DIV’s? only way i know how is to use tables to make them all lined up like that. cause im pretty sure by xhtml/css you mean divs.

EDIT: I applied a style width to the textarea and it still messes up the tables… just like before. Your suggestions didnt work :confused:. Here’s the code I used:


<tr>
  <td colspan="3"><div align="left">
    <textarea name="about" cols="" rows="" class="box" id="about" style="width: 440px;"></textarea>
  </div></td>
</tr>
4

Using CSS to define textarea width and height should solve it

5

yep, so…


CSS
#fs {
	width: 440px; /* or 100% */
	height: 100px; /* whatevr height you want here */
}

HTML
<td colspan="3"><textarea name="fs" id="fs"></textarea></td>

Delete the rows and cols all together and the class might not be necessary depending on what else you have in the page…

6

If I was replacing this without tables I would do something like…


CSS
form { width: 500px; }
.row { clear: both; }
.row label {
  float: left;
  width: 150px;
}
.row textarea {
  float: right;
  width: 350px;
}

HTML
<form>
  <div class='row'>
    <label for='about'>About Me</label>
    <textarea id='about' name='about'></textarea>
  </div>
</form>
7

The “rows” and “cols” attributes of textarea elements are required. If you specify width and height in the CSS, they will be overridden.

8

Thanks Kravvitz,
I wasn’t aware of that.

Cheers,