[beginner] stange COLSPAN behaviour

[JL]

I have a Table with 2 Rows.
There are 3 Cells in the first Row and 1 Cell in the second Row (with:
colSpan="3").

Cannot be simpler, I don't even use CSS:
----------
<TABLE border="1" width="800px">
<TR>
<TD width="150px">cell 1</TD>
<TD width="150px">cell 2</TD>
<TD>cell 3</TD>
</TR>
<TR>
<TD colSpan="3">test test test test test test test test</TD>
</TR>
</TABLE>
----------

I want the first two Cells to always keep their width="150px". The width of
the third Cell can change to fit the total width of the Table .

But:
If the lenght of the text in the second Row reaches the end of the text of
the first Row's third Cell ("cell 3") the width of the two first Cells
change!!

OK:
_______________________
| cell 1 | cell 2 | cell 3 |

 

[Ryan Stewart]

I have a Table with 2 Rows.
There are 3 Cells in the first Row and 1 Cell in the second Row (with:
colSpan="3").

Cannot be simpler, I don't even use CSS:
----------
<TABLE border="1" width="800px">
<TR>
<TD width="150px">cell 1</TD>
<TD width="150px">cell 2</TD>
<TD>cell 3</TD>
</TR>
<TR>
<TD colSpan="3">test test test test test test test test</TD>
</TR>
</TABLE>
----------

I want the first two Cells to always keep their width="150px". The width of
the third Cell can change to fit the total width of the Table .

But:
If the lenght of the text in the second Row reaches the end of the text of
the first Row's third Cell ("cell 3") the width of the two first Cells
change!!

OK:
_______________________
| cell 1 | cell 2 | cell 3 |
------------------------------
| test test |
------------------------------

OK:
_____________________
| cell 1 | cell 2 | cell 3 |
------------------------------
| test test test test |
------------------------------

PROBLEM (the width of the first two Cells has changed)
_______________________
| cell 1 | cell 2 | cell 3 |
-------------------------------
| test test test test test test |
-------------------------------

This problem occured in IE and Opera. It's ok in Mozilla.
I know I could use DIV for my layout but i'd like to understand this Table
behaviour! Thanks!

Well, I can't exactly explain it, besides to say HTML is quirky and often
seems to just do what it wants. But if you put a style="table-layout:
fixed;" in your table tag, you should get the behavior you're looking for.

 

[Sid Ismail]

: <TABLE border="1" width="800px">
: <TR>
: <TD width="150px">cell 1</TD>
: <TD width="150px">cell 2</TD>
: <TD>cell 3</TD>


Try changing the third TD to <td with="500px">, else all TDs change
proportionately.

Sid

 

[DU]

I have a Table with 2 Rows.
There are 3 Cells in the first Row and 1 Cell in the second Row (with:
colSpan="3").

Cannot be simpler, I don't even use CSS:
----------
<TABLE border="1" width="800px">
<TR>
<TD width="150px">cell 1</TD>
<TD width="150px">cell 2</TD>
<TD>cell 3</TD>
</TR>
<TR>
<TD colSpan="3">test test test test test test test test</TD>
</TR>
</TABLE>
----------

I want the first two Cells to always keep their width="150px". The width of
the third Cell can change to fit the total width of the Table .

But:
If the lenght of the text

Tables are not best to render text. Tables are best for handling,
rendering tabular data; paragraphs are best for handling, rendering
variable amount of text. If your webpage is using table to position
text, then this is the first issue to address.

in the second Row reaches the end of the text of

the first Row's third Cell ("cell 3") the width of the two first Cells
change!!

OK:
_______________________
| cell 1 | cell 2 | cell 3 |
------------------------------
| test test |
------------------------------

OK:
_____________________
| cell 1 | cell 2 | cell 3 |
------------------------------
| test test test test |
------------------------------

PROBLEM (the width of the first two Cells has changed)
_______________________
| cell 1 | cell 2 | cell 3 |

If you use:
<table border="1" width="800">
<col width="150"><col width="150"><col>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td colspan="3">test test test test</td>
</tr>
</table>
you'll see that you can avoid this behavior in MSIE 6 for windows and
Opera 7.50 (tested and verified in a compliant page).

I know I could use DIV for my layout but i'd like to understand this Table
behaviour! Thanks!

The explanations about this behavior may be here:
http://www.w3.org/TR/CSS2/tables.html#auto-table-layout

DU

 

[JL]

Well, I can't exactly explain it, besides to say HTML is quirky and often
seems to just do what it wants. But if you put a style="table-layout:
fixed;" in your table tag, you should get the behavior you're looking for.

Oh!
That works... Thanks!

 

[JL]

Try changing the third TD to <td with="500px">, else all TDs change
proportionately.

Sid

That works for my Table with a fixed width (width="800px") but if I use
width="100%" it doesn't work to put a width to the third Cell!

Thanks for the suggestion..

 

[Sid Ismail]

: That works for my Table with a fixed width (width="800px") but if I use
: width="100%" it doesn't work to put a width to the third Cell!

bad to mix px and %.

Sid