Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > [beginner] stange COLSPAN behaviour

Reply
Thread Tools

[beginner] stange COLSPAN behaviour

 
 
JL
Guest
Posts: n/a
 
      12-28-2003
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!







 
Reply With Quote
 
 
 
 
Ryan Stewart
Guest
Posts: n/a
 
      12-28-2003
"JL" <(E-Mail Removed)> wrote in message
news:QVAHb.7459$(E-Mail Removed)...
> 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.


 
Reply With Quote
 
 
 
 
Sid Ismail
Guest
Posts: n/a
 
      12-28-2003
On Sun, 28 Dec 2003 08:32:34 -0500, "JL" <(E-Mail Removed)> wrote:

: <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

 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      12-28-2003
JL wrote:

> 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 |
> -------------------------------
> | test test test test test test |
> -------------------------------
>
> This problem occured in IE and Opera. It's ok in Mozilla.


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
 
Reply With Quote
 
JL
Guest
Posts: n/a
 
      12-28-2003

"Ryan Stewart" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...

> 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!


 
Reply With Quote
 
JL
Guest
Posts: n/a
 
      12-28-2003

"Sid Ismail" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...

> 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..


 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      12-28-2003
On Sun, 28 Dec 2003 17:48:24 -0500, "JL" <(E-Mail Removed)> wrote:

: 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Stange behaviour with files permissions on a windows mounted share F. Senault Ruby 0 11-18-2010 11:54 AM
Stange and complicated Henrry Pires ASP .Net 3 02-07-2006 03:42 PM
stange anchor ref behavior Jack Fox ASP .Net 1 11-29-2004 01:08 AM
Stange effects? Alexander M. Polak ASP .Net 3 08-27-2003 01:13 PM
Stange mp3 file association issue... k Computer Support 4 08-07-2003 05:22 AM



Advertisments